import _ from 'lodash'
import { render } from 'preact'
import { useEffect, useState } from 'preact/hooks'
import { ToolOverlay } from './components/CourseVisibility.jsx'

import { EventsView } from './components/EventsView.jsx'
import { HamburgerMenu } from './components/HamburgerMenu.jsx'
import { Toolbar } from './components/Toolbar.jsx'

window._ = _
window.dataBuffer = {}

const CALENDAR_IDS = {
    'anno-1': '6308cfcb1df5cb026699ce32',
    'anno-2': '6308e2dc09352a0208fefdd9',
    'anno-3': '6308e42a1df5cb026699ced4',
    'magistrale': '6308e8ea0c34e703bb1f7e85',
}

const App = ({}) => {
    const [source, setSource] = useState('magistrale')

    const [eventi, setEventi] = useState([])

    const [selectedCourses, setSelectedCourses] = useState([])

    useEffect(() => {
        setSelectedCourses([])
    }, [source])

    useEffect(() => {
        // Directly copy-pasted from chrome Dev Tools
        const request = fetch(
            'https://apache.prod.up.cineca.it/api/Impegni/getImpegniCalendarioPubblico',
            {
                headers: {
                    'content-type': 'application/json;charset=UTF-8',
                    'sec-fetch-dest': 'empty',
                    'sec-fetch-mode': 'cors',
                    'sec-fetch-site': 'same-site',
                },
                body: JSON.stringify({
                    mostraImpegniAnnullati: true,
                    mostraIndisponibilitaTotali: false,
                    linkCalendarioId: CALENDAR_IDS[source],
                    clienteId: '628de8b9b63679f193b87046',
                    pianificazioneTemplate: false,
                    dataInizio: '2022-10-02T22:00:00.000Z',
                    dataFine: '2022-10-07T22:00:00.000Z',
                }),
                method: 'POST',
                mode: 'cors',
                credentials: 'omit',
            }
        )

        // const request = fetch('/data.json')

        console.time('loading eventi')

        request
            .then(res => res.json())
            .then(data => {
                console.timeEnd('loading eventi')
                window.dataBuffer[source] = data
                setEventi(data)
            })
    }, [source])

    const [mode, setMode] = useState('course')

    const [hideOtherCourses, setHideOtherCourses] = useState(false)

    // TODO: Should wrap in "useEffect"?
    if (selectedCourses.length === 0) {
        setHideOtherCourses(false)
    }

    const [showMobileMenu, setShowMobileMenu] = useState(true)

    return (
        <>
            <Toolbar
                {...{
                    mode,
                    setMode,
                    source,
                    setSource,
                    onShowMenu: () => setShowMobileMenu(true),
                }}
            />
            <EventsView
                mode={mode}
                selection={selectedCourses}
                setSelection={setSelectedCourses}
                hideOtherCourses={hideOtherCourses}
                start={new Date(2022, 10, 3)}
                events={eventi.map(({ nome, dataInizio, dataFine, docenti, aule }) => ({
                    name: _.split(nome, '-', 1)[0].trim(),
                    start: new Date(dataInizio),
                    end: new Date(dataFine),
                    docenti: docenti.map(({ nome, cognome }) =>
                        _.startCase(_.lowerCase(nome) + ' ' + _.lowerCase(cognome))
                    ),
                    aula: _.startCase(aule[0].codice.toLowerCase()).replace(
                        /([A-Z]) ([1-9])/,
                        '$1$2'
                    ),
                }))}
            />
            {selectedCourses.length > 0 && (
                <ToolOverlay
                    visibility={hideOtherCourses}
                    toggleVisibility={() => setHideOtherCourses(s => !s)}
                    onClose={() => {
                        setSelectedCourses([])
                        setHideOtherCourses(false)
                    }}
                />
            )}
            {showMobileMenu && (
                <HamburgerMenu
                    onClose={() => {
                        setShowMobileMenu(false)
                    }}
                />
            )}
        </>
    )
}

render(<App />, document.body)