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

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-top-part">
                <ToolbarButton 
                    type="fullscreen"
                    onClick={() => null}
                />
                <ButtonContainer 
                    buttons={[
                        {
                            type: "user",
                            onClick: () => console.log('click')
                        },
                        {
                            type: "user",
                            onClick: () => console.log('click')
                        },
                        {
                            type: "user",
                            onClick: () => console.log('click')
                        },
                        {
                            type: "user",
                            onClick: () => console.log('click')
                        }
                    ]}
                />
            </div>
            <div className="toolbar-field-bottom-part">
            <ButtonContainer 
                    buttons={[
                        {
                            type: "control",
                            onClick: () => console.log('click')
                        },
                        {
                            type: "micro",
                            onClick: () => console.log('click')
                        }                        
                    ]}
                />
                <ButtonContainer 
                    buttons={[
                        {
                            type: "share",
                            onClick: () => console.log('click')
                        }
                    ]}
                />
                <ToolbarButton 
                    type="exit"
                    onClick={() => null}
                />
            </div>
        </div>
        <button className='toolbar-open-button' onClick={() => props.onClickOpenButton()}>
            <span className="toolbar-open-button-icon"></span>
        </button>
    </div>
})