import React, { useContext, useState } from "react";
import { CSSTransition } from "react-transition-group";
import { ContextWindowHeightOrientation } from "../../contextWindowHeight";
import { ControlButton } from "./controlButton";
import { ToolbarButton } from "./toolbarButton";
import { BorderLine } from "./toolbarButtonContainerBorderLine";
import { TypeToolbarButtons } from "./typeButtons";
import { CaptionToolbarButtons } from "./typeCaptionButtons";

type TProps = {
    buttons: Array<{
        type: TypeToolbarButtons, 
        onClick: () => void,
        isCaption: boolean
        isNotification?: boolean, 
        active?: boolean,
        isSelected?: boolean
    }>
    isOpenToolbar: boolean
    openedAddButtons?: string
    setOpenedAddButtons?: React.Dispatch<React.SetStateAction<string>>
    isBorderLineTop?: 'hide' | 'show'
    isBorderLineBottom?: 'hide' | 'show'
}

export const ButtonContainer:React.FC<TProps> = React.memo((props) => { 
    const {windowHeight, isLandscape} = useContext(ContextWindowHeightOrientation);
    // const [openedAddButtons, setOpenedAddButtons] = useState<string>('');
    const controlStates = ['default', 'questing', 'return', 'questing'];// temp
    const [currentControlState, setCurrentControlState] = useState<number>(0); // temp
    const typeUser = 'admin' // 'user' // temp

    // temp
    function nextControlState() {
        if(currentControlState + 1 < controlStates.length)
            setCurrentControlState(currentControlState + 1);
        else setCurrentControlState(0);
    }
    
    return <div className="toolbar-button-container">
        {
            props?.isBorderLineTop === 'hide'
            ? null
            : <BorderLine />
        }
        {props.buttons.map((button, index) => {
            function onClick() {
                if(props.openedAddButtons === button.type + index) {
                    props?.setOpenedAddButtons('');
                } else {
                    props?.setOpenedAddButtons(button.type + index);
                }
            }
            return <div className="toolbar-button-area-container" key={button.type + index}>
                <ToolbarButton
                    onClick={() => {
                        onClick();                        
                        button.onClick()
                    }} 
                    type={button.type} 
                    isNotification={button?.isNotification}
                    caption={CaptionToolbarButtons[button.type]}
                    active={button?.active}
                    isCaption={button.isCaption}
                    isSelected={button?.isSelected}
                    isVisible={props?.openedAddButtons === button.type + index + 'areacont' && windowHeight > 700 && (button.type.includes('user') || button.type.includes('language'))}
                />
                {
                    button.type.includes('user') && windowHeight > 700 ?
                    <CSSTransition
                        in={props?.openedAddButtons === button.type + index && props.isOpenToolbar}
                        timeout={300}
                        classNames={'show-add-buttons'}
                        unmountOnExit
                    >
                        {/* <div className={`toolbar-open-add-button-container ${props?.openedAddButtons === button.type + index && props.isOpenToolbar ? 'show' : ''}`}> */}
                        <div className={`toolbar-open-add-button-container show`}>
                            <ToolbarButton
                                onClick={() => onClick()} 
                                type={button.type} 
                                isNotification={button?.isNotification}
                                caption={CaptionToolbarButtons[button.type]}
                                active={button?.active}
                                isCaption={false}
                                isSelected={button?.isSelected}
                            />
                            <ToolbarButton
                                onClick={() => null}
                                type={"micro"} 
                                caption={''}
                                isCaption={false}
                            />
                            {
                                // temp
                                currentControlState === 0
                                ? <ControlButton
                                    onClick={() => nextControlState()}
                                    state={"default"}
                                    userType={typeUser}
                                />
                                : currentControlState === 1
                                ? <>
                                    <ToolbarButton
                                        onClick={() => nextControlState()}
                                        type={"no"}
                                        caption={''}
                                        isCaption={false}
                                        size={"medium"}
                                    />
                                    <ToolbarButton
                                        onClick={() => nextControlState()}
                                        type={"yes"}
                                        caption={''}
                                        isCaption={false}
                                        size={"medium"}
                                    />
                                </>
                                : currentControlState === 2
                                ? <ControlButton
                                    onClick={() => nextControlState()}
                                    state={"waiting"}
                                    userType={typeUser}
                                />
                                : currentControlState === 3
                                ? <>
                                    <ToolbarButton
                                        onClick={() => nextControlState()}
                                        type={"no"}
                                        caption={''}
                                        isCaption={false}
                                        size={"medium"}
                                    />
                                    <ToolbarButton
                                        onClick={() => nextControlState()}
                                        type={"yes"}
                                        caption={''}
                                        isCaption={false}
                                        size={"medium"}
                                    />
                                </>
                                : null
                            }
                            
                        </div>
                    </CSSTransition>
                    : null
                }
                {
                    button.type.includes('language') && windowHeight > 700 ?
                    <CSSTransition
                        in={props?.openedAddButtons === button.type + index && props.isOpenToolbar}
                        timeout={300}
                        classNames={'show-add-buttons'}
                        unmountOnExit
                    >
                        {/* <div className={`toolbar-open-add-button-container ${props?.openedAddButtons === button.type + index && props.isOpenToolbar ? 'show' : ''}`}> */}
                        <div className={`toolbar-open-add-button-container show`}>
                            <ToolbarButton
                                onClick={() => {onClick(); button.onClick()}} 
                                type={button.type} 
                                caption={CaptionToolbarButtons[button.type]}
                                isCaption={false}
                                isSelected={button.isSelected}
                            />
                            <ToolbarButton
                                onClick={() => null} 
                                type={"language en"} 
                                caption={CaptionToolbarButtons[button.type]}
                                isCaption={false}
                                isSelected={false}
                            /> 
                        </div>
                    </CSSTransition>
                    : null
                }
            </div>
            }
        )}
        {
            props?.isBorderLineBottom === 'hide'
            ? null
            : <BorderLine />
        }
    </div>
})