import React from 'react';
import {
    Toolbar,
    IconButton
} from '@mui/material';
import { Menu } from '@mui/icons-material';
import { ToolBarPanel } from './panel';

export interface MainBarProps {
    className?: string,
    style?: React.CSSProperties,
    hideSwitcher?: boolean,
    sideMenuOpen?: boolean,
    onSideMenuSwitch?: (open: boolean) => void,
    children?: React.ReactNode | React.ReactNode[] | any
}

export const MainBar: React.FC<MainBarProps> = ({ className, style, hideSwitcher, sideMenuOpen, onSideMenuSwitch, children }) => {
    const handleSideMenuSwitch = () => {
        if (onSideMenuSwitch && !sideMenuOpen) {
            onSideMenuSwitch(true);
        }
    }

    return (
        <ToolBarPanel className={className} style={style} open={!!sideMenuOpen}>
            <Toolbar>
                {
                    !hideSwitcher && !sideMenuOpen && onSideMenuSwitch &&
                    <IconButton
                        edge="start"
                        color="inherit"
                        onClick={handleSideMenuSwitch}
                        style={{ marginRight: '5px' }}>

                        <Menu />
                    </IconButton>
                }
                {children}
            </Toolbar>
        </ToolBarPanel>
    );
}