import { Accordion } from "@/components/bs-ui/accordion";
import { SearchInput } from "@/components/bs-ui/input";
import { Sheet, SheetContent, SheetTitle, SheetTrigger } from "@/components/bs-ui/sheet";
import { getAssistantToolsApi } from "@/controllers/API/assistant";
import ToolItem from "@/pages/SkillPage/components/ToolItem";
import { useTranslation } from "react-i18next";
import { PersonIcon, StarFilledIcon } from "@radix-ui/react-icons";
import { useEffect, useMemo, useState } from "react";
import { Button } from "@/components/bs-ui/button";
import sousuo from "../../../assets/npc/sousuo.png";
import gongjuAdd from "../../../assets/npc/gongjuAdd.png";
import gongjuIcon from "../../../assets/npc/gongjuIcon.png";
import gongjuIcon1 from "../../../assets/npc/gongjuIcon1.png";

export default function ToolsSheet({ select, onSelect, children }) {
    const { t } = useTranslation()
    const [type, setType] = useState('default') // default custom

    const [keyword, setKeyword] = useState('')
    const [allData, setAllData] = useState([])

    useEffect(() => {
        getAssistantToolsApi(type).then(res => {
            setAllData(res)
            setKeyword('')
        })
    }, [type])

    const options = useMemo(() => {
        return allData.filter(el => 
            el.name.toLowerCase().includes(keyword.toLowerCase())
            || el.description.toLowerCase().includes(keyword.toLowerCase())
        )
    }, [keyword, allData])

    return (
        <Sheet onOpenChange={open => !open && setKeyword('')}>
            <SheetTrigger asChild>
                {children}
            </SheetTrigger>
            <SheetContent className="w-[1000px] sm:max-w-[1000px] bg-[#121212]">
                <div className="flex h-full" onClick={e => e.stopPropagation()}>
                    <div className="w-fit p-6">
                        <SheetTitle>{t('build.addTool')}</SheetTitle>
                        <div className="relative mt-[14px]">
                            <img src={sousuo} className="absolute w-[14px] left-[14px] top-[10px]" alt="" />
                            <input placeholder="搜索"
                            className="w-[237px] h-[34px] bg-[#1A1A1A]  text-[#fff] pl-[40px]"
                            style={{borderRadius:"17px",outline:"none"}}
                            onChange={(e) => setKeyword(e.target.value)} type="text" />
                        </div>
                        {/* <SearchInput placeholder={t('build.search')} className="mt-6" onChange={(e) => setKeyword(e.target.value)} /> */}
                        {/* <Button
                            className="mt-4 w-full"
                            onClick={() => window.open("/build/tools")}
                        >
                            {t('create')}{t("tools.createCustomTool")}
                        </Button> */}
                        <div className="w-[237px] h-[27px] bg-[#FFD025] mt-[14px] flex justify-center items-center border-radius-14 cursor-pointer" onClick={() => window.open("/build/tools")}>
                            <img src={gongjuAdd} className="w-[14px]" alt="" />
                            <span className="text-[#333333] ml-[12px]">自定义工具</span>
                        </div>
                        <div className="mt-4">
                            <div
                                className={`flex items-center gap-2 px-4 py-2 rounded-md cursor-pointer hover:bg-muted-foreground/10 transition-all duration-200 ${type === 'default' && 'bg-[#2A271D] text-[#FFD54C]'}`}
                                onClick={() => setType('default')}
                            >
                                {/* <PersonIcon /> */}
                                {type === "default" ? <img src={gongjuIcon1} className="w-[14px]" alt="" /> : <img src={gongjuIcon} className="w-[14px]" alt="" />}
                                <span className="ml-[8px] text-[#999999]">内置工具</span>
                            </div>
                            <div
                                className={`flex items-center gap-2 px-4 py-2 rounded-md cursor-pointer hover:bg-muted-foreground/10 transition-all duration-200 mt-1 ${type === 'custom' && 'bg-[#2A271D] text-[#FFD54C]'}`}
                                onClick={() => setType('custom')}
                            >
                                {type === "custom" ? <img src={gongjuIcon1} className="w-[14px]" alt="" /> : <img src={gongjuIcon} className="w-[14px]" alt="" />}
                                {/* <StarFilledIcon /> */}
                                <span className="ml-[8px] text-[#999999]">自定义工具</span>
                            </div>
                        </div>
                    </div>
                    <div className="flex-1 bg-[#121212] p-5 pt-12 h-full overflow-auto scrollbar-hide">
                        <Accordion type="single" collapsible className="w-full">
                            {
                                options.length ? options.map(el => (
                                    <ToolItem
                                        key={el.id}
                                        type={'add'}
                                        select={select}
                                        data={el}
                                        onSelect={onSelect}
                                    ></ToolItem>
                                )) : <div className="pt-40 text-center text-sm text-muted-foreground mt-2">
                                    {t('build.empty')}
                                </div>
                            }
                        </Accordion>
                    </div>
                </div>
            </SheetContent>
        </Sheet>
    );

};