import React from 'react';
import { Hook } from '../../hook';
import { Collapse, Divider } from '@mui/material';
import { ExpandLess, ExpandMore } from '@mui/icons-material';

interface ShortcutsPanelProps {
    title: string,
    open: boolean,
    children?: React.ReactNode | React.ReactNode[] | any
}

export const ShortcutsPanel: React.FC<ShortcutsPanelProps> = ({ title, open: preOpen, children }) => {
    const [theme] = Hook.useTheme();
    const [openned, setOpenned] = React.useState<boolean>(preOpen);

    return (
        <>
            {
                children && children.length > 0 &&
                <div style={{ padding: '24px 0px 24px 24px', width: 'calc(100% - 24px)' }}>
                    <div
                        style={{
                            display: 'flex',
                            flexDirection: 'row',
                            alignItems: 'center',
                            cursor: 'pointer'
                        }}
                        onClick={() => setOpenned(!openned)}>

                        {openned ? <ExpandLess fontSize='small' /> : <ExpandMore fontSize='small' />}
                        <span style={{ color: theme.palette.text.secondary }}>
                            {title}
                        </span>
                        <Divider variant='fullWidth' style={{ width: '80%', marginLeft: 'auto' }} />
                    </div>
                    <Collapse in={openned} style={{ padding: '12px !important' }}>
                        <div style={{
                            width: '100%',
                            display: 'flex',
                            flexWrap: 'wrap',
                            overflow: 'hidden'
                        }}>
                            {children}
                        </div>
                    </Collapse>
                </div>
            }
        </>
    );
}