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
    size?: 'large' | 'medium'
    isVisible?: boolean | false
}

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

    function onClick() {
        setIsActive(!isActive)
    }    

    return <div className={`toolbar-button-area ${props?.isVisible ? 'hidden' : ''}`}>
        <button 
            className={
                `toolbar-button 
                ${props.type} ${isActive ? 'on' : ''} 
                ${props?.isNotification ? 'notification' : ''}
                ${props?.isSelected ? 'selected' : ''}
                ${props?.size === 'large' ? `large ${props.type}` : props?.size === 'medium' ? `medium ${props.type}` : ''}
                `
            } 
            onClick={() => {
                props.onClick();
                //@ts-ignore
                if(CaptionToolbarButtons[`${props.type} on`] || props.type === 'users' || props.type === 'other')
                    onClick();
            }}
        >
            {
                props?.size === 'large'
                ? <div className="toolbar-button-large-view">
                    <span className="toolbar-button-large-view-icon"></span>
                    <span className="toolbar-button-large-view-title">{CaptionToolbarButtons[props.type]}</span>
                </div>
                : props?.size === 'medium'
                ? <div className="toolbar-button-medium-view">
                    <span className="toolbar-button-medium-view-icon"></span>
                    <span className="toolbar-button-medium-view-title">{CaptionToolbarButtons[props.type]}</span>
                </div>
                : null
            }
        </button>        
        {
            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>    
})