import { ComboBox } from './ComboBox.jsx'
import { MODE_COURSE, MODE_SCHEDULE, MODE_WORKWEEK, MODE_WORKWEEK_GRID } from './EventsView.jsx'
import { Help } from './Help.jsx'
import { Icon } from './Icon.jsx'

export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource, theme, setTheme }) => {
	return (
		<div class="menu">
			<div class="header">
				<div class="option-group">
					<button class="flat icon" onClick={onClose}>
						<Icon name="close" />
					</button>
					<button
						class="icon"
						onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
					>
						<Icon name={theme === 'dark' ? 'dark_mode' : 'light_mode'} />
					</button>
				</div>
				<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: MODE_COURSE, label: 'Corsi' },
						{ value: MODE_SCHEDULE, label: 'Giornaliera' },
						{ value: MODE_WORKWEEK, label: 'Settimana' },
						{ value: MODE_WORKWEEK_GRID, label: 'Schema' },
					]}
				/>
			</div>
			<hr /> */}
			<div class="help">
				<h2>
					<Icon name="info" />
					Guida
				</h2>
				<Help />
			</div>
		</div>
	)
}
