import { Badge } from "@/components/bs-ui/badge";
import { Button } from "@/components/bs-ui/button";
import { getChatOnlineApi } from "@/controllers/API/assistant";
import { useEffect, useMemo, useRef, useState } from "react";
import { useNavigate } from "react-router-dom";
import { SearchInput } from "../../bs-ui/input";
import { Sheet, SheetContent, SheetDescription, SheetTitle, SheetTrigger } from "../../bs-ui/sheet";
import CardComponent, { TitleIconBg } from "../cardComponent";
import { SkillIcon } from "@/components/bs-icons/skill";
import { AssistantIcon } from "@/components/bs-icons/assistant";
import { useTranslation } from "react-i18next";
import borderR from "../../../assets/npc/border-r.png";
import { SpotlightCard } from "@lobehub/ui";
import { Flexbox } from 'react-layout-kit';
import robot from "../../../assets/robot.png";
import robot2 from "../../../assets/robot2.png";
import robot3 from "../../../assets/robot3.png";
import zidingyi1 from "../../../assets/npc/zidingyi1.png";
import zidingyi2 from "../../../assets/npc/zidingyi2.png";
import npcIcon from "../../../assets/npc/npcIcon.png";
import nengliIcon from "../../../assets/npc/nengliIcon.png";
import { useDebounce } from "@/util/hook";
import LoadMore from "../loadMore";

export default function SkillChatSheet({ children, onSelect }) {
    const [open, setOpen] = useState(false)

    const { t } = useTranslation()

    const navigate = useNavigate()

    const [keyword, setKeyword] = useState(' ')
    const allDataRef = useRef([])

    const pageRef = useRef(1)
    const searchRef = useRef('')
    const [options, setOptions] = useState<any>([])

    const loadData = (more = false) => {
        open && getChatOnlineApi(pageRef.current, searchRef.current).then(res => {
            setOptions(opts => more ? [...opts, ...res] : res)
        })
    }
    const debounceLoad = useDebounce(loadData, 600, false)

    useEffect(() => {
        // open && getChatOnlineApi().then(res => {
        //     allDataRef.current = res
        //     setKeyword('')
        // })
        // setKeyword(' ')
        pageRef.current = 1
        searchRef.current = ''
        loadData()
    }, [open])

    // const options = useMemo(() => {
    //     return allDataRef.current.filter(el => el.name.toLowerCase().includes(keyword.toLowerCase()))
    // }, [keyword])

    const handleSearch = (e) => {
        pageRef.current = 1
        searchRef.current = e.target.value
        debounceLoad()
    }

    const handleLoadMore = () => {
        pageRef.current++
        loadData(true)
    }

    const render = (item: any) => (
        <Flexbox align={'flex-start'} className={`selectNpcFlexbox relative`} onClick={() => { onSelect(item); setOpen(false) }}>
            <div className="npcInfoItemBg">
                <span>
                    <span>
                        <div>
                            <TitleIconBg className="w-[160px] h-[160px] min-w-[160px]" img={item.avatar_img} id={item.avatar_color ? item.avatar_color : item.id} ><img src={item.avatar_img ? item.avatar_img : (item.flow_type == "assistant" ? npcIcon : nengliIcon)} alt="" /></TitleIconBg>
                        </div>
                    </span>
                </span>
            </div>
            <div>
                <TitleIconBg className="w-[40px] h-[40px] min-w-[40px]" img={item.avatar_img} id={item.avatar_color ? item.avatar_color : item.id} ><img src={item.avatar_img ? item.avatar_img : (item.flow_type == "assistant" ? npcIcon : nengliIcon)} alt="" /></TitleIconBg>
                <div>
                    <p>{item.name}</p>
                    <div>
                     
                    </div>
                </div>
            </div>
            <p className="mt-[10px] test-[13px]">{item.desc}</p>
            <div className={`absolute right-0 top-0 w-[41px] h-[16px] flex justify-center items-center text-[9px] ${item.flow_type === 'flow' ? 'text-[#333333] bg-[#FFD54C]' : 'text-[#FFFFFF] bg-[#2586FF]'}`} style={{borderRadius:"0px 10px 0px 7px",fontWeight:"bold"}}>
                {item.flow_type === 'flow' ? '能力' : 'NPC'}
            </div>
        </Flexbox>
      );

    return <Sheet open={open} onOpenChange={setOpen}>
        <SheetTrigger asChild>
            {children}
        </SheetTrigger>
        <SheetContent className="sm:min-w-[1000px] bg-[#1A1A1A]">
            <div className="flex h-full" onClick={e => e.stopPropagation()}>
                <div className="xinDuiHua-boxR">
                    {/* <img src={borderR} className="w-[30px] h-[100%]" alt="" /> */}
                </div>
                <div className="w-[280px] p-6">
                    <SheetTitle>选择对话</SheetTitle>
                    <SheetDescription className="text-[#999999]">选择一个您想使用的上线NPC或能力</SheetDescription>
                    {/* <SearchInput value={keyword} placeholder="搜索" className="my-6" onChange={(e) => setKeyword(e.target.value)} /> */}
                    <SearchInput placeholder="搜索" className="my-6" onChange={handleSearch} />
                </div>
                <div className="w-[690px] overflow-y-auto bg-[#000000] scrollbar-hide skillSheet">
                    <SpotlightCard items={options} renderItem={render} className="mt-[14px] skillSheetSpotlightCard"/>
                    <LoadMore onScrollLoad={handleLoadMore} />
                </div>
            </div>
        </SheetContent>
    </Sheet>
};