import { Component, createSignal, onCleanup, onMount, ParentComponent } from 'solid-js'
import { A, Route, Router } from '@solidjs/router'

import styles from './css/menu.module.css';
import { Country } from './pages/country/Country';
import { Cities } from './pages/cities/Cities';
import { Database } from './pages/database/Database';
import { Station } from './pages/station/Station';
import { apiHost } from './consts';
import { WeatherIconStub } from './components/weatherIcons/WeatherIconStub';
import { Harmonie } from './pages/harmonie/Harmonie'
import { LvgmcForecast } from './pages/lvgmc-forecast/LvgmcForecast'
import { Home } from './pages/home/Home'
import { Faktiska } from './pages/map-graphics/MapGraphics'
import { WaterTemperature } from './pages/water-temperature/WaterTemperature'

console.log("env:", import.meta.env.MODE)
console.log("api host:", apiHost)

const App: Component = () => {
    return (
        <Router root={AppLayout}>
            <Route path="/" component={Home} />
            <Route path="/harmonie" component={Harmonie} />
            <Route path="/lvgmc-forecast" component={LvgmcForecast} />
            <Route path="/station" component={Station} />
            <Route path="/cities" component={Cities} />
            <Route path="/faktiska" component={Faktiska} />
            <Route path="/udens-temperatura" component={WaterTemperature} />
            <Route path="/latvia" component={Country} />
            <Route path="/database" component={Database} />
        </Router>
    );
};

const AppLayout: ParentComponent = (props) => {
    const [isScrolled, setIsScrolled] = createSignal(false)
    const pages = [
        ['/station', 'Stations'], ['/cities', 'City analysis'], ['/faktiska', 'Faktiskā'], ['/udens-temperatura', 'Ūdens temperatūra'], ['/latvia', 'Latvia overview'],
        ['/database', 'Data archive'], ['/harmonie', 'HARMONIE'], ['/lvgmc-forecast', 'LVĢMC forecast'],
    ]
    onMount(() => {
        const updateHeader = () => setIsScrolled(window.scrollY > 24)
        updateHeader()
        window.addEventListener('scroll', updateHeader, { passive: true })
        onCleanup(() => window.removeEventListener('scroll', updateHeader))
    })
    return (
        <div class="appShell">
                <WeatherIconStub />
                <header class={styles.header} classList={{[styles.scrolled]: isScrolled()}}>
                    <A class={styles.brand} href="/"><span class={styles.brandMark}>W</span><span><strong>WeatherTool</strong><small>Weather data workspace</small></span></A>
                    <nav aria-label="Main navigation"><ul class={styles.menu}>{pages.map(([path, label]) => <li><A href={path} activeClass={styles.active}>{label}</A></li>)}</ul></nav>
                </header>
                <main class="appContent">
                    {props.children}
                </main>
        </div>
    );
};

export default App;
