import { ComboBox } from './ComboBox.jsx'
import { Help } from './Help.jsx'
import { Icon } from './Icon.jsx'

export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource }) => {
    return (
        <div class="menu">
            <div class="header">
                <button class="flat icon" onClick={onClose}>
                    <Icon name="close" />
                </button>
                <div class="item logo">
                    <img src="logo-circuit-board.svg" alt="logo" /> / <span>Orario</span>
                </div>
            </div>
            <div class="options">
                <div class="label">Gruppo Corsi</div>
                <ComboBox
                    value={source}
                    setValue={setSource}
                    options={[
                        { value: 'anno-1', label: 'I' },
                        { value: 'anno-2', label: 'II' },
                        { value: 'anno-3', label: 'III' },
                        { value: 'magistrale', label: 'Magistrale' },
                        { value: 'tutti', label: 'Tutti' },
                    ]}
                />
                <div class="label">Visualizzazione</div>
                <ComboBox
                    value={mode}
                    setValue={setMode}
                    options={[
                        { value: 'course', label: 'Corsi' },
                        { value: 'work-week-v', label: 'Settimana' },
                        // {
                            // value: 'work-week-h',
                            // label: 'Settimana (Trasposto)',
                        // },
                    ]}
                />
            </div>
            <hr />
            <div class="help">
                <h2>
                    <Icon name="info" />
                    Guida
                </h2>
                <Help />
            </div>
        </div>
    )
}