import {Input} from "../input";
import {Link, Thermometer, Sliders} from "preact-feather";
import {Button} from "../button";
import {useEffect, useState} from "preact/hooks";
import {fetchSettings, saveSettings, Settings as SettingsType} from "../../utils/settings";
import {Slider} from "../slider";
import {FormGroup} from "../form";

export function Settings(props: {
    settings: SettingsType,
    setSettings: (settings: SettingsType) => void,
    resetApp: () => void,
}) {
    // const [settings, setSettings] = useState(fetchSettings)
    //
    // useEffect(() => {
    //     saveSettings(settings);
    // }, [settings]);

    return <div>
        <form>
            <FormGroup>
                <label htmlFor="api">API</label>
                <Input
                    type="text"
                    placeholder="URl d'API ex: https://ouruq7zepnehg2-5000.proxy.runpod.net/"
                    icon={Link}
                    value={props.settings.apiURL}
                    onChange={(v) => props.setSettings({...props.settings, apiURL: v as string})}
                />
            </FormGroup>
            <FormGroup>
                <label for="temperature">Temperature</label>
                <Slider
                    name="temperature"
                    value={props.settings.temperature}
                    onChange={(v) => props.setSettings({...props.settings, temperature: v})}
                    min={0.1}
                    max={2}
                    step={0.1}
                />
            </FormGroup>
            <div>
                <Button
                    onClick={() => {
                        props.resetApp()
                    }}
                    secondary={true}
                    title="Tout réinitialiser"
                >
                    Réinitialiser
                </Button>
            </div>
            <br/>
            <div>
                <Button
                    onClick={() => {
                        history.go(-1)
                    }}
                >
                    Retour
                </Button>
            </div>
        </form>
    </div>
}