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

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

    const { t } = useTranslation()

    const navigate = useNavigate()

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

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

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

    const render = (item: any) => (
        <Flexbox align={'flex-start'} className={`selectNpcFlexbox relative`} onClick={() => { onSelect(item); setOpen(false) }}>
          {/* <Avatar size={24} src={item.favicon} style={{ flex: 'none' }} /> */}
          {/* <Flexbox>
            <div style={{ fontSize: 15, fontWeight: 600 }}>{item.name}</div>
            <div style={{ opacity: 0.6 }}>{item.name}</div>
          </Flexbox> */}
            {/* <Card key={item.id} className="w-[300px]  overflow-hidden cursor-pointer" onClick={() => onSelect(item)}>
                <CardHeader>
                    <CardTitle className=" flex items-center gap-2">
                        <div className={"rounded-full w-[30px] h-[30px] " + gradients[parseInt(item.id, 16) % gradients.length]}></div>
                        <span>{item.name}</span>
                    </CardTitle>
                    <CardDescription className="">{item.description}</CardDescription>        
                </CardHeader>
            </Card> */}
            <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>
                {/* {(item.id == "06b1d374-ba97-46e6-8782-c56dec8dcc17" || item.id == "ed8e21f6-9757-43d0-b076-8c6e81bb0580") && <img src={robot2} className="w-[42px]" alt=""/>}
                {item.id == "ca214b41-2b73-4585-b172-bf1e546cf6ec" && <img src={robot3} className="w-[42px]" alt=""/>}
                {(item.id != "06b1d374-ba97-46e6-8782-c56dec8dcc17" && item.id != "ed8e21f6-9757-43d0-b076-8c6e81bb0580" && item.id != "ca214b41-2b73-4585-b172-bf1e546cf6ec") && <img src={robot} className="w-[42px]" alt=""/>} */}
                {/* <img src={robot} className="w-[42px]" alt=""/> */}
                <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>绘画类</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)} />
                </div>
                <div className="w-[690px] overflow-y-auto bg-[#000000] scrollbar-hide skillSheet">
                    {/* {
                        options.length ? options.map((flow, i) => (
                            <CardComponent key={i}
                                id={i + 1}
                                data={flow}
                                title={flow.name}
                                description={flow.desc}
                                type="sheet"
                                icon={flow.flow_type === 'flow' ? SkillIcon : AssistantIcon}
                                footer={
                                    <Badge className={`absolute right-0 bottom-0 rounded-none rounded-br-md ${flow.flow_type === 'flow' && 'bg-gray-950'}`}>
                                        {flow.flow_type === 'flow' ? '技能' : 'NPC'}
                                    </Badge>
                                }
                                onClick={() => { onSelect(flow); setOpen(false) }}
                            />
                        )) : <div className="flex flex-col items-center justify-center pt-40 w-full">
                            <p className="text-sm text-muted-foreground mb-3">{t('build.empty')}</p>
                            <Button className="w-[200px]" onClick={() => navigate('/build/assist')}>{t('build.onlineSA')}</Button>
                        </div>
                    } */}
                    <SpotlightCard items={options} renderItem={render} className="mt-[14px] skillSheetSpotlightCard"/>
                </div>
            </div>
        </SheetContent>
    </Sheet>
};