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";

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-gray-100">
                <div className="flex h-full" onClick={e => e.stopPropagation()}>
                    <div className="w-fit p-6">
                        <SheetTitle>{t('build.addTool')}</SheetTitle>
                        <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="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-muted-foreground/10'}`}
                                onClick={() => setType('default')}
                            >
                                <PersonIcon />
                                <span>{t('tools.builtinTools')}</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-muted-foreground/10'}`}
                                onClick={() => setType('custom')}
                            >
                                <StarFilledIcon />
                                <span>{t('tools.customTools')}</span>
                            </div>
                        </div>
                    </div>
                    <div className="flex-1 bg-[#fff] 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>
    );

};