import { TitleIconBg } from "@/components/bs-comp/cardComponent";
import { SettingIcon } from "@/components/bs-icons/setting";
import { ToolIcon } from "@/components/bs-icons/tool";
import {
    AccordionContent,
    AccordionItem,
    AccordionTrigger,
} from "@/components/bs-ui/accordion";
import { Badge } from "@/components/bs-ui/badge";
import { Button } from "@/components/bs-ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/bs-ui/tooltip";
import { useTranslation } from "react-i18next";
import gongjuIcon3 from "../../../assets/npc/gongjuIcon3.png"
import gongjuBianji from "../../../assets/npc/gongjuBianji.png"

export default function ToolItem({
    type,
    select,
    data,
    onEdit = (id) => { },
    onSelect,
}) {
    const { t } = useTranslation();

    return <AccordionItem key={data.id} value={data.id} className="data-[state=open]:border-[1px] data-[state=open]:border-[#FFD025]/40 data-[state=open]:rounded-md">
        <AccordionTrigger>
            <div className="group w-full flex gap-2 text-start relative pr-4">
                <TitleIconBg className="w-8 h-8 min-w-8" id={data.id} >
                    <img src={gongjuIcon3} alt="" />    
                </TitleIconBg>
                <div className="flex-1 min-w-0">
                    <div className="w-full text-sm font-medium leading-none flex items-center gap-2 text-[#FFFFFF]">{data.name}
                        {
                            type === 'edit' && <div
                                className="flex items-center justify-center w-[26px] h-[26px] bg-[#2A2A2A] group-hover:opacity-100 opacity-0 cursor-pointer"
                                style={{borderRadius:"50px"}}
                                onClick={(e) => onEdit(data.id)}
                            >
                                {/* <SettingIcon /> */}
                                <img src={gongjuBianji} className="w-[14px]" alt="" />
                            </div>
                        }
                    </div>
                    <p className="text-sm mt-2 text-[#666666]">{data.description}</p>
                </div>
            </div>
        </AccordionTrigger>
        <AccordionContent className="">
            <div className="px-6 mb-4">
                {data.children.map(api => (
                    <div key={api.name} className="relative p-4 rounded-sm  border-t">
                        <h1 className="text-sm font-medium leading-none text-[#FFFFFF]">{api.name}</h1>
                        <p className="text-sm mt-2 text-[#666666]">{api.desc}</p>
                        {
                            api.api_params.length > 0 && <p className="text-sm text-muted-foreground mt-2 flex gap-2">
                                <TooltipProvider>
                                    <Tooltip delayDuration={100}>
                                        <TooltipTrigger asChild>
                                            <span className="cursor-pointer text-[#FFD025]">{t("build.params")}</span>
                                        </TooltipTrigger>
                                        <TooltipContent side="right" className="bg-gray-50 border shadow-md p-4 text-gray-950 max-w-[520px]">
                                            <p className="flex gap-2 items-center"><Badge>{JSON.parse(api.extra)?.method || 'http'}</Badge><span className="text-xl">{api.name}</span></p>
                                            <p className="text-sm mt-2 text-gray-500">{api.desc}</p>
                                            {
                                                api.api_params.map(param => (
                                                    <div key={param.name}>
                                                        <p className="flex gap-2 items-center mt-4 mb-2">
                                                            <span className="text-base">{param.name}</span>
                                                            <span>{param.schema.type}</span>
                                                            {param.required && <span className="text-red-500">必填</span>}
                                                        </p>
                                                        <p className="text-gray-500">{param.description}</p>
                                                    </div>
                                                ))
                                            }
                                        </TooltipContent>
                                    </Tooltip>
                                </TooltipProvider>
                                :
                                {
                                    api.api_params.map(param => (
                                        <div>
                                            <span className=" rounded-xl bg-[#2E2406] px-2 py-1 text-xs font-medium text-[#FFFFFF]">{param.name}</span>
                                            {/* <span>{param.schema.type}</span> */}
                                        </div>
                                    ))
                                }
                            </p>
                        }
                        {
                            select && (select.some(_ => _.id === api.id) ?
                                <Button size="sm" className="absolute right-4 bottom-2 h-6 bg-[#FFD025]" disabled>{t("build.added")}</Button>
                                : <Button size="sm" className="absolute right-4 bottom-2 h-6 bg-[#FFD025]" onClick={() => onSelect(api)}>{t("build.add")}</Button>)
                        }
                    </div>
                ))}
            </div>
        </AccordionContent>
    </AccordionItem >
}