import clsx from "clsx";
import { useState } from "preact/hooks";
import { Modal } from "@common/components/Modal";
import styles from "../assets/settings-modal.module.css";
import { BannedTokensSettings } from "./settings/banned-tokens";
import { ChatSystemInstructionSettings } from "./settings/chat-system-instruction";
import { ContinuePromptSettings } from "./settings/continue-prompt";
import { ConnectionSettings } from "./settings/connection";
import { SamplingSettings } from "./settings/sampling";
import { SystemInstructionSettings } from "./settings/system-instruction";
import { ImageSettings } from "./settings/image";
import { UserSettings } from "./settings/user";
import { LoginSettings } from "./settings/login";

interface Props {
    open: boolean;
    onClose: () => void;
}

type Tab = "banned-tokens" | "system-instruction" | "chat-system-instruction" | "continue-prompt" | "connection" | "user" | "sampling" | "image" | "login";

const TABS: { id: Tab; label: string }[] = [
    { id: "connection", label: "Connection" },
    { id: "sampling", label: "Sampling" },
    { id: "image", label: "Image" },
    { id: "banned-tokens", label: "Banned Tokens" },
    { id: "user", label: "User" },
    { id: "system-instruction", label: "System Instruction" },
    { id: "continue-prompt", label: "Continue Prompt" },
    { id: "chat-system-instruction", label: "Chat System Instruction" },
    { id: "login", label: "Login" },
];

export const SettingsModal = ({ open, onClose }: Props) => {
    const [activeTab, setActiveTab] = useState<Tab>("connection");

    return (
        <Modal
            open={open}
            onClose={onClose}
            title="Settings"
            sidebar={TABS.map(({ id, label }) => (
                <button
                    key={id}
                    class={clsx(styles.menuItem, activeTab === id && styles.active)}
                    onClick={() => setActiveTab(id)}
                >
                    {label}
                </button>
            ))}
            footer={
                <button onClick={onClose} class={clsx(styles.button, styles.buttonSecondary)}>
                    Done
                </button>
            }
        >
            {activeTab === "user" && <UserSettings />}
            {activeTab === "banned-tokens" && <BannedTokensSettings />}
            {activeTab === "system-instruction" && <SystemInstructionSettings />}
            {activeTab === "chat-system-instruction" && <ChatSystemInstructionSettings />}
            {activeTab === "continue-prompt" && <ContinuePromptSettings />}
            {activeTab === "connection" && <ConnectionSettings />}
            {activeTab === "sampling" && <SamplingSettings />}
            {activeTab === "image" && <ImageSettings />}
            {activeTab === "login" && <LoginSettings />}
        </Modal>
    );
};
