import { CompoundButton } from './CompoundButton.jsx'
import { DatePicker } from './DatePicker.jsx'
import { Icon } from './Icon.jsx'

export const Toolbar = ({
    source,
    setSource,
    date,
    setDate,
    showMobileMenu,
    setShowMobileMenu,
    onHelp,
    theme,
    setTheme,
}) => {
    return (
        <div class="toolbar">
            <div class="mobile">
                <button
                    class="flat icon"
                    onClick={() => setShowMobileMenu(!showMobileMenu)}
                >
                    <Icon name={`${showMobileMenu ? 'close' : 'menu'}`} />
                </button>
            </div>
            <div class="item logo">
                <img src="logo-circuit-board.svg" alt="logo" /> /{' '}
                <span>Orario</span>
            </div>
            <div class="option-group">
                <div class="item option">
                    <CompoundButton
                        options={[
                            { value: 'anno-1', label: 'I' },
                            { value: 'anno-2', label: 'II' },
                            { value: 'anno-3', label: 'III' },
                            { value: 'magistrale', label: 'Magistrale' },
                            { value: 'tutti', label: 'Tutti' },
                        ]}
                        value={source}
                        setValue={setSource}
                    />
                </div>
                <div class="item option">
                    <CompoundButton
                        options={[
                            { value: 'orario', label: 'Orario' },
                            { value: 'lista', label: 'Lista' },
                        ]}
                        value={source}
                        setValue={setSource}
                    />
                </div>
            </div>
            <div class="option-group">
                <DatePicker date={date} setDate={setDate} />
            </div>
            <div class="option-group">
                <div class="item option">
                    <button class="icon" onClick={() => window.print()}>
                        <Icon name="print" />
                    </button>
                </div>
                <div class="item option">
                    <button
                        class="icon"
                        onClick={() =>
                            setTheme(theme === 'dark' ? 'light' : 'dark')
                        }
                    >
                        <Icon
                            name={theme === 'dark' ? 'dark_mode' : 'light_mode'}
                        />
                    </button>
                </div>
                <div class="item option">
                    <button class="icon" onClick={onHelp}>
                        <Icon name="question_mark" />
                    </button>
                </div>
            </div>
        </div>
    )
}