import {Input} from "../input";
import {X, Link, Key} from "preact-feather";
import {Button} from "../button";
import {useContext} from "preact/hooks";
import {Slider} from "../slider";
import {FormGroup} from "../form";
import {settingsCtx, Settings as SettingsType} from "@/contexts/settings";
import {routeCtx} from "@/contexts/route";
import {topicsCtx} from "@/contexts/topics";
import style from "./style.module.scss";
import {logCtx} from "@/contexts/log";
import {Radio} from "@/components/radio";

export function Settings() {
    const [, , routeActions] = useContext(routeCtx);
    const [settings, setSettings, settingsActions] = useContext(settingsCtx);
    const [, , topicsActions] = useContext(topicsCtx);
    const [log, , logActions] = useContext(logCtx);

    const resetApp = () => {
        settingsActions.reset();
        topicsActions.reset();
        logActions.reset();
    }

    return <div>
        <form>
            <FormGroup>
                <label htmlFor="api">Type d'API</label>
                <Radio<{[key in SettingsType["apiType"]]: string}>
                    name="apiType"
                    choices={{"ooba": "Oobabooga", "beam": "Beam Cloud"}}
                    value={settings.apiType}
                    onChoose={(choice) => setSettings({...settings, apiType: choice})}
                />
            </FormGroup>
            <FormGroup>
                <label htmlFor="api">Url d'API</label>
                <Input
                    type="text"
                    placeholder={settings.apiType === "beam" ? "Ex: https://jvcgpt-d692de2-v1.app.beam.cloud/stream" : "Ex: https://ouruq7zepnehg2-5000.proxy.runpod.net/"}
                    icon={Link}
                    value={settings.apiURL}
                    onChange={(v) => setSettings({...settings, apiURL: v as string})}
                />
            </FormGroup>
            <FormGroup>
                <label htmlFor="api">Clé d'API</label>
                <Input
                    type="password"
                    placeholder="Ex: zyCH5svVE-qXv_J34ZLGc0vKQaGbYf_7YTbl2VKaAIqgwa_-qCeA=="
                    icon={Key}
                    value={settings.apiKey}
                    onChange={(v) => setSettings({...settings, apiKey: v as string})}
                />
            </FormGroup>
            <FormGroup>
                <label for="temperature">Temperature</label>
                <Slider
                    name="temperature"
                    value={settings.temperature}
                    onChange={(v) => setSettings({...settings, temperature: v})}
                    min={0.1}
                    max={2}
                    step={0.1}
                />
            </FormGroup>
            <div>
                <Button
                    onClick={resetApp}
                    secondary={true}
                    title="Tout réinitialiser"
                >
                    Tout réinitialiser
                </Button>
            </div>
            <br/>
            <div>
                <Button onClick={routeActions.goBack}>
                    Retour
                </Button>
            </div>
        </form>
        <hr/>
        <div>
            <h2>Log</h2>
            <pre className={style.log}>
                {log}
            </pre>
            <div>
                <Button onClick={logActions.reset} title="Vider le log">
                    <X/>
                </Button>
            </div>
        </div>
    </div>
}