import { useState } from "preact/hooks";
import { Database } from "types";
import { Head } from "$fresh/runtime.ts";
import { DEFAULT_STYLE } from "style";
import { fetch_db } from "db";
import { URL } from "utils";
import ConversationLink from "components/ConversationLink.tsx";
import WithStyleSheet from "components/WithStyleSheet.tsx";
import Meta from "components/Meta.tsx";

export default function Home({ db }: { db: Database }) {
    const [data, setData] = useState(db);

    const links = Object.keys(data.conversations)
        .reverse()
        .map(c => <ConversationLink conv={c} db={data} interactive={true} />);
    return (
        <>
            <Head>
                <title>Freshter Logs</title>
            </Head>
            <Meta
                title="freshter logs"
                description="append-only pester logs, built with fresh"
                after_slash=""
                color="#FFD80B"
            ></Meta>
            <WithStyleSheet href="/index.css" />
            <a href="/">
                <h1 className="title" style={DEFAULT_STYLE}>
                    freshter logs
                </h1>
            </a>
            <MakeConversation
                onsubmit={async () => (await fetch_db()).map(db => setData(db))}
            />
            {links}
            <div className="promo" style={DEFAULT_STYLE}>
                by <a href="https://pl.pyrope.net/terezi">mehbark</a>; code{" "}
                <a href="https://git.pyrope.net/mbk/freshter-logs">here</a>
            </div>
        </>
    );
}

function MakeConversation({ onsubmit }: { onsubmit?: () => void }) {
    const [name, setName] = useState("");
    const [desc, setDesc] = useState("");

    async function handleClick() {
        await fetch(`${URL}/api/conv`, {
            method: "PUT",
            body: JSON.stringify({ name, description: desc }),
        });
        setName("");
        setDesc("");
        onsubmit && onsubmit();
    }

    return (
        <>
            <WithStyleSheet href="/MakeConversation.css" />
            <div className="make-conversation">
                <input
                    value={name}
                    onInput={(e: any) => setName(e.target.value)}
                    className="mc-name"
                    placeholder="name"
                />
                <textarea
                    value={desc}
                    onInput={(e: any) => setDesc(e.target.value)}
                    className="mc-desc"
                    placeholder="description"
                />
                <button className="mc-submit" onClick={handleClick}>
                    create
                </button>
            </div>
        </>
    );
}

//TODO: making new conversations
//TODO: ui obv

//TODO: adding presets to convs (i think i'll have global presets be just manual tbh, people can email)

//TODO: conversation browser (ez)
//TODO: maybe preview but ehh name and description sbs
//TODO: oo def integrate their custom colors
