import React from 'react';
import Hook from '../../hook';
import {
    IconButton,
    Divider
} from "@mui/material";
import {
    ChevronLeft,
    ChevronRight
} from '@mui/icons-material';
import { SideMenuPanel } from './panel';
import { OpenSideMenuHeader } from './styled.header';
import { SideMenuBar, SideMenuBarContent } from './styled.bar';

export interface SideMenuProps {
    bar?: JSX.Element,
    header?: JSX.Element,
    sideMenuOpen?: boolean
    onSideMenuSwitch: (open: boolean) => void,
    children?: React.ReactNode | React.ReactNode[] | any
}

export const SideMenu: React.FC<SideMenuProps> = ({ bar, header, sideMenuOpen, onSideMenuSwitch, children }) => {
    const [theme] = Hook.useTheme();

    const handleSideMenuSwitch = () => {
        if (onSideMenuSwitch && sideMenuOpen) {
            onSideMenuSwitch(false);
        }
    }
    return (
        <SideMenuPanel
            open={!!sideMenuOpen}
            hasChildren={!!children && Array.isArray(children) && children.filter(x => x).length > 0}>

            <OpenSideMenuHeader>
                {
                    header
                        ? header
                        : <span className="spacer" />
                }
                {
                    sideMenuOpen &&
                    <IconButton onClick={handleSideMenuSwitch}>
                        {theme.direction === 'rtl' ? <ChevronRight /> : <ChevronLeft />}
                    </IconButton>
                }
            </OpenSideMenuHeader>
            <Divider />
            {
                bar
                    ? (
                        <SideMenuBar>
                            {bar}
                            <SideMenuBarContent>
                                {children}
                            </SideMenuBarContent>
                        </SideMenuBar>
                    )
                    : (
                        <SideMenuBarContent>
                            {children}
                        </SideMenuBarContent>
                    )
            }

        </SideMenuPanel>
    );
}