import { h, render, Fragment } from 'preact';
import { useState, useEffect, useMemo } from 'preact/hooks';
import { Game } from './Game';
import { gameName, urlParam } from "./util";
import "./App.css";
import { About } from './About';
import { useLocalStorage } from './localstorage';
import { PuzzleType, PuzzleTypeDisplay } from './PuzzleType';

import * as PUZZLES from './puzzles.json';

const EPOCH = new Date(2022, 1, 27);

type PickPuzzleTypeProps = {
    puzzleType: PuzzleType,
    setPuzzleType: (p: PuzzleType) => void,
};

function PickPuzzleType(props: PickPuzzleTypeProps) {
    const { puzzleType, setPuzzleType } = props;
    const PUZZLE_TYPES: PuzzleType[] = [2, 3, 4];
    return (
        <div class="pick-puzzle-type">
            {PUZZLE_TYPES.map((type) => (
                <div style={{ cursor: 'pointer' }} onClick={() => setPuzzleType(type)}>
                    <PuzzleTypeDisplay type={type} active={type === puzzleType} />
                </div>
            ))}
        </div>
    );
}

export function App() {
    type Page = "game" | "about" | "settings";
    const [page, setPage] = useState<Page>("game");

    const prefersDark =
        window.matchMedia &&
        window.matchMedia("(prefers-color-scheme: dark)").matches;
    const [dark, setDark] = useLocalStorage<boolean>("dark", prefersDark);
    const [colorBlind, setColorBlind] = useLocalStorage<boolean>("colorblind", false);
    const [keyboard, setKeyboard] = useLocalStorage<string>(
        "keyboard",
        "qwertyuiop-asdfghjkl-BzxcvbnmE"
    );
    const [enterLeft, setEnterLeft] = useLocalStorage<boolean>("enter-left", false);

    const day = useMemo(() => {
        let date = new Date();
        date.setHours(date.getHours() - 6); // treat 6 AM as the start of the day
        date.setHours(0); // now set it to midnight of the day
        return Math.round((date.getTime() - EPOCH.getTime()) / (24 * 60 * 60 * 1000));
    }, []);
    const [puzzleType, setPuzzleType] = useLocalStorage<2 | 3 | 4>("puzzleType", 4);
    const puzzle = useMemo(() => PUZZLES[puzzleType][day], [puzzleType]);

    useEffect(() => {
        document.body.className = dark ? "dark" : "";
        setTimeout(() => {
            // Avoid transition on page load
            document.body.style.transition = "0.3s background-color ease-out";
        }, 1);
    }, [dark]);

    const link = (emoji: string, label: string, page: Page) => (
        <button
            className="emoji-link"
            onClick={() => setPage(page)}
            title={label}
            aria-label={label}
        >
            {emoji}
        </button>
    );



    return (
        <div className={"App-container" + (colorBlind ? " color-blind" : "")}>
            <div className="top-left">
                {page === "game" && (
                    <PickPuzzleType puzzleType={puzzleType} setPuzzleType={setPuzzleType} />
                )}
            </div>
            <h1>
                {gameName}
            </h1>
            <div className="top-right">
                {page !== "game" ? (
                    link("❌", "Close", "game")
                ) : (
                    <>
                        {link("❓", "About", "about")}
                        {link("⚙️", "Settings", "settings")}
                    </>
                )}
            </div>
            {page === "about" && <About />}
            {page === "settings" && (
                <div className="Settings">
                    <div className="Settings-setting">
                        <input
                            id="dark-setting"
                            type="checkbox"
                            checked={dark}
                            onChange={() => setDark((x: boolean) => !x)}
                        />
                        <label htmlFor="dark-setting">Dark theme</label>
                    </div>
                    <div className="Settings-setting">
                        <input
                            id="colorblind-setting"
                            type="checkbox"
                            checked={colorBlind}
                            onChange={() => setColorBlind((x: boolean) => !x)}
                        />
                        <label htmlFor="colorblind-setting">High-contrast colors</label>
                    </div>
                    <div className="Settings-setting">
                        <label htmlFor="keyboard-setting">Keyboard layout:</label>
                        <select
                            name="keyboard-setting"
                            id="keyboard-setting"
                            value={keyboard}
                            onChange={(e) => setKeyboard((e as any).target.value)}
                        >
                            <option value="qwertyuiop-asdfghjkl-BzxcvbnmE">QWERTY</option>
                            <option value="azertyuiop-qsdfghjklm-BwxcvbnE">AZERTY</option>
                            <option value="qwertzuiop-asdfghjkl-ByxcvbnmE">QWERTZ</option>
                            <option value="BpyfgcrlE-aoeuidhtns-qjkxbmwvz">Dvorak</option>
                            <option value="qwfpgjluy-arstdhneio-BzxcvbkmE">Colemak</option>
                        </select>
                        <input
                            style={{ marginLeft: 20 }}
                            id="enter-left-setting"
                            type="checkbox"
                            checked={enterLeft}
                            onChange={() => setEnterLeft((x: boolean) => !x)}
                        />
                        <label htmlFor="enter-left-setting">"Enter" on left side</label>
                    </div>
                </div>
            )}
            {puzzle ? (
                <Game
                    puzzleType={puzzleType}
                    puzzle={puzzle}
                    day={day}
                    hidden={page !== "game"}
                    colorBlind={colorBlind}
                    keyboardLayout={keyboard.replaceAll(
                        /[BE]/g,
                        (x) => (enterLeft ? "EB" : "BE")["BE".indexOf(x)]
                    )}
                />
            ) : (
                puzzle === null ? (
                    <p>Hang tight! Something new is in store for us...</p>
                ) : (
                    <p>Optimle has concluded. Take a deep breath and relax :)</p>
                )
            )}
        </div>
    );
}

render(<App />, document.body);