import { Conversation, Database, Message, Preset } from "types";
import RenderMsg from "components/RenderMsg.tsx";

//TODO: this might be the place to allow editing of presets,,,
//TODO: easier to just not allow editing presets lol
export default function PresetSelector({
    selected,
    setPreset,
    conv,
    db,
}: {
    selected: string;
    setPreset: (_: string) => void;
    conv: Conversation;
    db: Database;
}) {
    //TODO: maybe return DB presets? not really necessary
    const presets = Object.keys({ ...conv.presets });
    return (
        <div className="preset-selector">
            {presets.map(p => (
                <PresetOption
                    name={p}
                    selected={selected == p}
                    onSelect={setPreset}
                    conv={conv}
                    db={db}
                />
            ))}
        </div>
    );
}

function PresetOption({
    name,
    selected,
    onSelect,
    conv,
    db,
}: {
    name: string;
    selected: boolean;
    onSelect: (_: string) => void;
    conv: Conversation;
    db: Database;
}) {
    const msg: Message = {
        content: name == "" ? "default" : name,
        preset: name,
    };
    return (
        <div
            onClick={() => onSelect(name)}
            className={`preset-option ${selected ? "selected" : ""}`}
        >
            <RenderMsg msg={msg} db={db} conversation={conv} />
        </div>
    );
}