import React from "react";
import { ButtonContainer } from "./buttonContainer";
import './toolbar.css';
import { ToolbarButton } from "./toolbarButton";
import { BorderLine } from "./toolbarButtonContainerBorderLine";

type TProps = {
    onClickOpenButton: () => void
    isOpen: boolean
}

export const Toolbar:React.FC<TProps> = React.memo((props) => {
    return <div className={`toolbar-container ${props.isOpen ? 'opened' : 'closed'}`}>
        <div className="toolbar-field">
            <div className="toolbar-field-part">
                <ToolbarButton 
                    type="fullscreen"
                    onClick={() => null}
                />
                <ButtonContainer 
                    buttons={[
                        {
                            type: "admin",
                            onClick: () => console.log('click'),
                        },
                        {
                            type: "self",
                            onClick: () => console.log('click')
                        },
                        {
                            type: "guest",
                            onClick: () => console.log('click')
                        },
                        {
                            type: "guest",
                            onClick: () => console.log('click'),
                            isNotification: true
                        }
                    ]}
                />
            </div>
            <div className="toolbar-field-part">
                <ButtonContainer 
                    buttons={[
                        {
                            type: "control",
                            onClick: () => console.log('click')
                        },
                        {
                            type: "micro",
                            onClick: () => console.log('click')
                        }                        
                    ]}
                />
                <ToolbarButton 
                    type="share"
                    onClick={() => console.log('click')}
                />
                <BorderLine />                
                <ToolbarButton 
                    type="exit"
                    onClick={() => null}
                />
            </div>
        </div>
        <button className='toolbar-open-button' onClick={() => props.onClickOpenButton()}>
            <span className="toolbar-open-button-icon"></span>
        </button>
    </div>
})