import React, { useState } from "react";
import { ToolbarButton } from "../toolbar/toolbarButton";
import { TypeToolbarButtons } from "../toolbar/typeButtons";
import { BorderLine } from "./borderLine";
import { CaptionToolbarButtons } from "../toolbar/typeCaptionButtons";
import { ControlButton } from "../toolbar/controlButton";

type TProps = {
    typeUser: TypeToolbarButtons
    onClickMicro?: () => void
    onClickControl?: () => void
    onClickItem?: () => void
}

export const AddPartUserItem:React.FC<TProps> = React.memo((props) => {
    const controlStates = ['default', 'questing', 'return', 'questing'];// temp
    const [currentControlState, setCurrentControlState] = useState<number>(0); // temp

    // temp
    function nextControlState() {
        if(currentControlState + 1 < controlStates.length)
            setCurrentControlState(currentControlState + 1);
        else setCurrentControlState(0);
    }

    return <div className="user-item" onClick={() => props?.onClickItem ? props?.onClickItem() : null}>
        <ToolbarButton
            type={props.typeUser}
            caption=""
            isCaption={false}
            onClick={() => null}
        />
        <div className="user-item-user-info-container">
            <div className="user-item-user-info">
                <span className="user-item-user-info-name">{CaptionToolbarButtons[props.typeUser]}</span>
                {
                    props.typeUser.includes('user') ?
                    <div className="user-item-user-info-buttons">
                        <ToolbarButton
                            type="micro"
                            active={true}
                            caption=''
                            isCaption={false}
                            onClick={() => props?.onClickMicro ? props?.onClickMicro() : null}
                        />                        
                        {
                            // temp
                            currentControlState === 0
                            ? <ControlButton
                                onClick={() => nextControlState()}
                                state={"default"}
                                userType={'admin'}
                            />
                            : 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={'admin'}
                            />
                            : currentControlState === 3
                            ? <>
                                <ToolbarButton
                                    onClick={() => nextControlState()}
                                    type={"no"}
                                    caption={''}
                                    isCaption={false}
                                    size={"medium"}
                                />
                                <ToolbarButton
                                    onClick={() => nextControlState()}
                                    type={"yes"}
                                    caption={''}
                                    isCaption={false}
                                    size={"medium"}
                                />
                            </>
                            : null
                        }                        
                    </div>
                    : null
                }
            </div>
            <BorderLine />
        </div>
    </div>
})