'use client'

import styles from "./page.module.scss";
import {useReducer} from "react";
import reduce from "./state/reducer.ts";
import {INITIAL_STATE} from "./state/state.ts";
import MessageBanner from "./message-banner.tsx";
import InputForm from "./input-form.tsx";
import {actionToggledShowSolution} from "./state/action.ts";
import Maze from "./maze.tsx";

export default function Home() {
    const [state, dispatch] = useReducer(reduce, INITIAL_STATE);
    const hasValidMaze = !!state.maze;
    return (
        <div className={styles.page}>
            <h1 className={styles.mainheading}>A-Maze-R! Create your own maze!</h1>
            <h2 className={styles.mainheading}>A fun little maze generator written by fritteli</h2>
            <MessageBanner state={state}
                           dispatch={dispatch}/>
            <InputForm state={state}
                       dispatch={dispatch}/>
            {hasValidMaze &&
                <>
                    <h1>The Maze ({state.maze!.width}x{state.maze!.height}, Algorithm: {state.maze!.algorithm},
                        ID: {state.maze!.id})</h1>
                    <a href={"https://manuel.friedli.info/labyrinth/create/pdffile?w="
                        + state.maze!.width
                        + "&h=" + state.maze!.height
                        + "&id=" + state.maze!.id
                        + "&a=" + state.maze!.algorithm}
                    className={styles.downloadlink}>Download as PDF file</a>
                    <input type={"checkbox"}
                           checked={state.showSolution}
                           onChange={(e) => {
                               dispatch(actionToggledShowSolution(e.target.checked));
                           }}
                           id={"showSolution"}/><label htmlFor="showSolution">Show Solution</label>
                    <Maze state={state}
                          dispatch={dispatch}/>
                </>
            }
        </div>
    );
}