import { useState } from "preact/hooks";
import { URL } from "utils";

export default function PresetCreator({
    conv,
    name,
    setName,
    fg,
    setFg,
    bg,
    setBg,
    font,
    setFont,
    onsubmit,
}: {
    conv: string;

    name: string;
    setName: (_: string) => void;

    fg: string;
    setFg: (_: string) => void;

    bg: string;
    setBg: (_: string) => void;

    font: string;
    setFont: (_: string) => void;

    onsubmit?: () => void;
}) {
    async function submit() {
        await fetch(`${URL}/api/conv/${conv}`, {
            method: "PUT",
            body: JSON.stringify({ register_preset: name, fg, bg, font }),
        });
    }

    return (
        <div
            className="preset-creator"
            style={{
                color: fg,
                backgroundColor: bg == "" ? "white" : bg,
                fontFamily: font,
            }}
        >
            <div className="pc-name">
                Name:{" "}
                <input
                    value={name}
                    onInput={(e: any) => setName(e.target.value)}
                    className="pc-input"
                ></input>
            </div>
            <div className="pc-fg">
                FG:{" "}
                <input
                    value={fg}
                    onInput={(e: any) => setFg(e.target.value)}
                    className="pc-input"
                ></input>
            </div>
            <div className="pc-bg">
                BG:{" "}
                <input
                    value={bg}
                    onInput={(e: any) => setBg(e.target.value)}
                    className="pc-input"
                ></input>
            </div>
            <div className="pc-font">
                Font:{" "}
                <input
                    value={font}
                    onInput={(e: any) => setFont(e.target.value)}
                    className="pc-input"
                ></input>
            </div>
            <button
                className="pc-submit"
                onClick={async () => {
                    await submit();
                    onsubmit && onsubmit();
                }}
            >
                submit
            </button>
        </div>
    );
}