import { Button } from "@/components/bs-ui/button";
import { Dialog, DialogTrigger } from "@/components/bs-ui/dialog";
import { MixerHorizontalIcon } from "@radix-ui/react-icons";
import AutoPromptDialog from "./AutoPromptDialog";
import { useEffect, useState } from "react";
import { useAssistantStore } from "@/store/assistantStore";
import { Textarea } from "@/components/bs-ui/input";
import { useTranslation } from "react-i18next";

export default function Prompt() {

    const { t } = useTranslation()

    const [open, setOpen] = useState(false);

    const { assistantState, dispatchAssistant } = useAssistantStore()

    useEffect(() => {
        // 新建助手自动开启优化
        if (window.assistantCreate && assistantState.prompt) {
            setOpen(true)
            delete window.assistantCreate
        }
    }, [assistantState.prompt])

    return <div className="w-[50%] h-full  bg-[#1a1a1a] shadow-sm p-4 overflow-y-auto scrollbar-hide">
        <div className="flex-between-center relative">
            <span className="text-sm font-medium leading-none text-[#fff]">{t('build.assistantPortrait')}</span>
            <Dialog open={open} onOpenChange={setOpen}>
                <DialogTrigger asChild>
                    <Button variant="link" className="p-0 absolute right-[10px] text-[#b39012]"><MixerHorizontalIcon className="mr-1" />{t('build.automaticOptimization')}</Button>
                </DialogTrigger>
                {open && <AutoPromptDialog onOpenChange={setOpen}></AutoPromptDialog>}
            </Dialog>
        </div>
        <div className="h-[90%]">
            <Textarea
                className=" scrollbar-hide h-full focus-visible:ring-0 resize-none npcInput2 mt-[10px]"
                value={assistantState.prompt}
                placeholder={t('build.prompt')}
                onInput={(e => dispatchAssistant('setPrompt', { prompt: e.target.value }))}
            ></Textarea>
        </div>
    </div>
};