import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";
import { X } from "lucide-react";
import { useWishList } from "@/hooks/useWishList";
import { useContext } from "react";
import {
  FileInfo,
  RealtimeClientContext,
} from "../Provider/RealtimeClientProvider";
import { fetchFile } from "@/apis/user";
import { useAbortController } from "@/hooks/useAbortController";
import { useSearchParams } from "react-router-dom";

import { toast } from "@/hooks/use-toast";
type Props = {
  handleLoading:(val:boolean) => void
}

export default function AntechamberWishList({handleLoading}:Props) {
  const { wishList } = useWishList();
  const { handleConnect } = useContext(RealtimeClientContext);
  const { getSignal } = useAbortController();
  const [searchParams] = useSearchParams();
  const token = searchParams.get("token") || "";

  const handleNavigate = async (item: any) => {
    handleLoading(true)
    const result = await fetchFile({
      params: { id: item.vId, location: item.personlocationCode },
      options: {
        signal: getSignal(),
        headers: { Authorization: `Bearer ${token}` },
      },
    });

    if (result.message) {
      toast({
        title: result.message,
      });
    }
    let resp = result.result as FileInfo;
    handleConnect({
      fileInfo: {
        type: resp.type,
        url: resp.url,
        tableName: resp.tableName,
        provinceName: resp.provinceName,
        subjectClaim: resp.subjectClaim,
      },
    });
  };

  return (
    <>
      {wishList.length > 0 ? (
        <div className="w-full px-[15px]">
          <div className="px-[12px] pt-[14px] pb-[16px] rounded-[13px] bg-[#fff]">
            <div className="flex items-center justify-between">
              <div className="w-[96px] h-[16px] object-contain">
                <img src="/icons/wish-list.png" alt="wish-list" />
              </div>
              <Drawer>
                <DrawerTrigger className="">
                  <div className="flex items-center text-[13px] text-[#1580FF]">
                    切换志愿表
                    <img
                      src="/icons/arrow.png"
                      alt="arrow"
                      className="w-[16px] h-[16px] object-contain ml-[2px]"
                    />
                  </div>
                </DrawerTrigger>
                <DrawerContent>
                  <DrawerHeader className="p-0">
                    <DrawerTitle>
                      <div className="py-[13px] relative bg-white rounded-[12px]">
                        <span className="text-[16px] text-[#333] font-[500]">
                          请选择志愿表
                        </span>
                        <DrawerClose>
                          <X className="absolute right-[13px] top-[10px] text-[#000] text-[16px]" />
                        </DrawerClose>
                      </div>
                    </DrawerTitle>
                    <div className="grid gap-[12px] px-[15px] pb-[15px] bg-[#F4F6FA] pt-[16px] max-h-[50vh] overflow-y-auto">
                      {wishList.map((item: any) => (
                        <div className="w-full bg-white" key={item.vId}>
                          <div className="py-[10px] pl-[16px] pr-[13px] rounded-[8px]  flex items-center">
                            <div className="flex flex-col">
                              <div className="flex items-center mb-[8px]">
                                <span className="text-[15px] font-[600] text-[#303030] mr-[5px]">
                                  {item.tableName}
                                </span>
                                <div className="text-[10px] px-[4px] py-[2px] rounded-[4px] text-[#636363] bg-[#fff]">
                                  {item.type}
                                </div>
                              </div>
                              <div className="text-[#303030] text-[11px] flex items-center">
                                <span>
                                  {item.locationName}·{item.score}
                                </span>
                                <span className="ml-[8px]">
                                  {item.subjectClaim.split(",").join("/")}
                                </span>
                              </div>
                            </div>
                            <div className="ml-auto">
                              <div className="text-[11px] text-[636363] font-[600] mb-[8px]">
                                {item.createTime}
                              </div>
                              <div
                                className="flex items-center justify-end text-[13px] text-[#1580FF]"
                                onClick={() => handleNavigate(item)}
                              >
                                <span>智能分析</span>
                                <img
                                  src="/icons/rightBlue.png"
                                  alt=""
                                  className="w-[10px] h-[10px]"
                                />
                              </div>
                            </div>
                          </div>
                        </div>
                      ))}
                    </div>
                  </DrawerHeader>
                  <DrawerDescription>
                    <></>
                  </DrawerDescription>
                </DrawerContent>
              </Drawer>
            </div>

            <div className="p-[7px] rounded-[8px] bg-[#F4F6FA] flex items-center mt-[12px]">
              <img
                src="/icons/wish-list-icon.png"
                alt="icon"
                className="w-[46px] h-[46px] object-contain mr-[8px]"
              />
              <div className="flex flex-col">
                <div className="flex items-center mb-[5px]">
                  <span className="text-[15px] font-[600] text-[#303030] mr-[5px]">
                    {wishList[0].tableName}
                  </span>
                  <div className="text-[10px] px-[4px] py-[2px] rounded-[4px] text-[#636363] bg-[#fff]">
                    {wishList[0].type}
                  </div>
                </div>
                <div className="text-[#303030] text-[11px] flex items-center">
                  <span>
                    {wishList[0].locationName}·{wishList[0].score}
                  </span>
                  <span className="ml-[8px]">
                    {wishList[0].subjectClaim.split(",").join("/")}
                  </span>
                </div>
              </div>
              <div
                className="flex items-center text-[13px] text-[#1580FF] ml-auto"
                onClick={() => handleNavigate(wishList[0])}
              >
                <span>智能分析</span>
                <img
                  src="/icons/rightBlue.png"
                  alt=""
                  className="w-[10px] h-[10px]"
                />
              </div>
            </div>
          </div>
        </div>
      ) : (
        <></>
      )}
    </>
  );
}
