import React, { useContext, useState } from "react";
import { ContextWindowHeight } from "../../contextWindowHeight";
import { ButtonContainer } from "./buttonContainer";
import { ToolbarButton } from "./toolbarButton";
import { CaptionToolbarButtons } from "./typeCaptionButtons";
import './toolbar.css';

type TProps = {
    onClickOpenButton: () => void
    onClickMobileUsers?: () => void
    onClickMobileOther?: () => void
    isOpen: boolean
    isOpenUsersMobilePart?: boolean
    isOpenOtherMobilePart?: boolean
}

export const Toolbar:React.FC<TProps> = React.memo((props) => {
    const windowHeight = useContext(ContextWindowHeight);
    const [showAddButtonsContOnDekstop, setShowAddButtonsContOnDekstop] = useState<boolean>(false);

    function showAddButtons() {
        setShowAddButtonsContOnDekstop(!showAddButtonsContOnDekstop);
    }

    if(windowHeight < 700) {
        return <div className={`toolbar-container ${props.isOpen ? 'opened' : 'closed'}`}>
            <div className="toolbar-field">
                <div className="toolbar-field-part">
                    <ToolbarButton 
                        type="fullscreen"
                        onClick={() => {
                            if(!document.fullscreenElement) {
                                document.documentElement.requestFullscreen();
                            } else {
                                document.exitFullscreen();
                            }
                        }}
                        caption={CaptionToolbarButtons['fullscreen on']}
                        active={true}
                        isCaption={false}
                    />
                    <ButtonContainer 
                        buttons={[
                            {
                                type: "users",
                                onClick: props.onClickMobileUsers,
                                isCaption: false,
                                isSelected: props?.isOpenUsersMobilePart
                            }
                        ]}
                    />
                </div>
                <div className="toolbar-field-part">
                    <ButtonContainer 
                        buttons={[
                            {
                                type: "control",
                                onClick: () => console.log('click'),
                                active: true,
                                isCaption: false
                            },
                            {
                                type: "micro",
                                onClick: () => console.log('click'),
                                active: false,
                                isCaption: false
                            }                        
                        ]}
                    />                    
                    {/* <BorderLine /> */}
                    <ToolbarButton 
                        type="other"
                        onClick={props.onClickMobileOther}
                        caption={CaptionToolbarButtons["other"]}
                        isCaption={false}
                        isSelected={props.isOpenOtherMobilePart}
                    />
                </div>
            </div>
            <button className='toolbar-open-button' onClick={() => props.onClickOpenButton()}>
                <span className="toolbar-open-button-icon"></span>
            </button>
        </div>
    }
    return <div className={`toolbar-container ${props.isOpen ? 'opened' : 'closed'}`}>
        <div className="toolbar-field">
            <div className="toolbar-field-part">
                <ToolbarButton 
                    type="fullscreen"
                    onClick={() => {
                        if(!document.fullscreenElement) {
                            document.documentElement.requestFullscreen();
                        } else {
                            document.exitFullscreen();
                        }
                    }}
                    caption={CaptionToolbarButtons['fullscreen on']}
                    active={true}
                    isCaption={true}
                />
                <ButtonContainer 
                    buttons={[
                        {
                            type: "user admin",
                            onClick: () => console.log('click'),
                            isCaption: true
                        },
                        {
                            type: "user self",
                            onClick: () => console.log('click'),
                            isCaption: true
                        },
                        {
                            type: "user guest",
                            onClick: () => console.log('click'),
                            isCaption: true
                        },
                        {
                            type: "user guest",
                            onClick: () => console.log('click'),
                            isNotification: true,
                            isCaption: true
                        }
                    ]}
                />
            </div>
            <div className="toolbar-field-part">
                <ButtonContainer 
                    buttons={[
                        {
                            type: "control",
                            onClick: () => console.log('click'),
                            active: true,
                            isCaption: true
                        },
                        {
                            type: "micro",
                            onClick: () => console.log('click'),
                            active: false,
                            isCaption: true
                        }                        
                    ]}
                />
                <ButtonContainer
                    buttons={[
                        {
                            type:"share",
                            onClick: () => null,
                            isCaption: true
                        },
                        {
                            type: "language ru",
                            onClick: () => showAddButtons(),
                            isCaption: true,
                            isSelected: showAddButtonsContOnDekstop
                        }
                    ]}
                    isBorderLineTop={"hide"}
                />
                 {/* <ToolbarButton 
                    type="share"
                    onClick={() => console.log('click')}
                    caption={CaptionToolbarButtons["share"]}
                    isCaption={true}
                />
                <ToolbarButton 
                    type="language ru"
                    onClick={() => showAddButtons()}
                    caption={CaptionToolbarButtons["language ru"]}
                    isCaption={true}
                    isSelected={showAddButtonsContOnDekstop}
                /> */}
                {/* <BorderLine />*/}
                <ToolbarButton
                    type="exit"
                    onClick={() => null}
                    caption={CaptionToolbarButtons["exit"]}
                    isCaption={true}
                />
            </div>
        </div>
        <div className='toolbar-open-button' onClick={() => props.onClickOpenButton()}>
            <span className="toolbar-open-button-icon"></span>
        </div>
    </div>
})