import {ActionDispatch, FormEvent, useState} from 'react';
import ValidatingInputNumberField, {ValidatorFunction} from "./validating-input-number-field.tsx";
import {Action, actionLoadedMaze, actionLoadingFailed, actionStartedLoading} from "./state/action.ts";
import styles from "./input-form.module.css";
import "./input-form.css";
import {State} from "@/app/state/state.ts";

export default function InputForm({state, dispatch}: {
    state: State,
    dispatch: ActionDispatch<[Action]>
}) {
    const [width, setWidth] = useState(10);
    const [height, setHeight] = useState(10);
    const [id, setId] = useState<number>();
    const [algorithm, setAlgorithm] = useState('wilson');

    const handleSubmit = (e: FormEvent) => {
        e.preventDefault();
        dispatch(actionStartedLoading());
        const url = `https://manuel.friedli.info/labyrinth/create/json?w=${width}&h=${height}&id=${id || ''}&algorithm=${algorithm}`;
        fetch(url)
            .then(response => response.json())
            // .then(result => new Promise(resolve => setTimeout(resolve, 600, result)))
            .then(result => {
                dispatch(actionLoadedMaze(result));
            })
            .catch(reason => {
                console.error("Failed to fetch maze data.", reason);
                dispatch(actionLoadingFailed(reason));
            });
    };
    const validateWidthHeightInput: ValidatorFunction<string, number> = value => {
        const numberValue = Number(value);
        if (isNaN(numberValue) || "" === value || (Math.floor(numberValue) !== numberValue)) {
            return {
                valid: false,
                message: "Must be an integer greater than 1."
            };
        }
        if (numberValue < 1) {
            return {
                valid: false,
                message: "Must be greater than 1."
            };
        }
        return {
            valid: true,
            value: numberValue
        };
    };
    const validateIdInput: ValidatorFunction<string, number> = value => {
        if ("" === value) {
            return {
                valid: true
            };
        }
        const numberValue = Number(value);
        // FIXME doesn't handle strings with characters correctly (e.g. "asdf" yields an empty value, due to "type=number").
        if (isNaN(numberValue) || Math.floor(numberValue) !== numberValue) {
            return {
                valid: false,
                message: "Must be empty or an integer"
            };
        }
        return {
            valid: true,
            value: numberValue
        }
    };
    return (
        <form onSubmit={handleSubmit}>
            <div className={styles.inputform}>
                <ValidatingInputNumberField id={"width"}
                                            label={"Width"}
                                            value={width}
                                            constraints={{
                                                min: 2
                                            }}
                                            validatorFn={validateWidthHeightInput}
                                            disabled={state.loading}
                                            onChange={setWidth}
                />
                <ValidatingInputNumberField id={"height"}
                                            label={"Height"}
                                            value={height}
                                            constraints={{
                                                min: 2
                                            }}
                                            validatorFn={validateWidthHeightInput}
                                            disabled={state.loading}
                                            onChange={setHeight}
                />
                <ValidatingInputNumberField id={"id"}
                                            label={"ID (optional)"}
                                            value={id}
                                            validatorFn={validateIdInput}
                                            disabled={state.loading}
                                            onChange={setId}
                />
                <label htmlFor="algorithm">Algorithm:</label>
                <select id={"algorithm"}
                        value={algorithm}
                        disabled={state.loading}
                        onChange={e => setAlgorithm(e.target.value)}>
                    <option value="wilson">Wilson</option>
                    <option value="random">Random Depth First</option>
                </select>
            </div>
            <button type={"submit"}
                    disabled={state.loading
                        || isNaN(width)
                        || isNaN(height)
                    }
                    className={styles.submitbutton}>{state.loading ? "Loading ..." : "Create Maze!"}
            </button>
        </form>
    );
}