import React, { useState } from "react";
import { TypeToolbarButtons } from "./typeButtons";
import { CaptionToolbarButtons } from "./typeCaptionButtons";

type TProps = {
    onClick: () => void
    type: TypeToolbarButtons
    isCaption: boolean
    caption: string
    active?: boolean
    isNotification?: boolean
    isSelected?: boolean
}

export const ToolbarButton:React.FC<TProps> = React.memo((props) => {
    const [isActive, setIsActive] = useState<boolean>(props?.active || false);
    const [showAddButtons, setShowAddButtons] = useState(false)

    function onClick() {
        setIsActive(!isActive)
    }

    function showAdd() {
        setShowAddButtons(!showAddButtons);
    }

    return <div className="toolbar-button-area">
        <button 
            className={
                `toolbar-button 
                ${props.type} ${isActive ? 'on' : ''} 
                ${props?.isNotification ? 'notification' : ''}
                ${props?.isSelected ? 'selected' : ''}
                `
            } 
            onClick={() => {
                props.onClick();
                showAdd();
                //@ts-ignore
                if(CaptionToolbarButtons[`${props.type} on`] || props.type === 'users' || props.type === 'other')
                    onClick();
            }}
        >
        </button>
        {/* {
            showAddButtons && props.type.includes('user')
            &&
            <div className="toolbar-button-add-buttons">
                <button 
                    className={`toolbar-button micro ${isActive ? 'on' : ''}`} 
                    onClick={() => onClick()}
                >
                </button>
                <button 
                    className={`toolbar-button control ${isActive2 ? 'on' : ''}`} 
                    onClick={() => onClick2()}
                >
                </button>
            </div>
        }         */}
        {
            props.isCaption && <div className="toolbar-button-description-container">
                <span className="toolbar-button-description-triangle"></span>
                {
                    //@ts-ignore
                    <span className="toolbar-button-description-rectangle">{CaptionToolbarButtons[isActive ? `${props.type} on` : props.type]}</span>
                }
            </div>
        }
    </div>    
})