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

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

  const handleNavigate = async (item: any) => {
    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 (
    <div className="w-full p-[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]">
                  {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>
                          </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)}
                          >
                            智能分析
                            <img
                              src="/icons/rightBlue.png"
                              alt=""
                              className="ml-[2px]"
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </DrawerHeader>
              <DrawerDescription>
                <></>
              </DrawerDescription>
            </DrawerContent>
          </Drawer>
        </div>

        {wishList.length > 0 ? (
          <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])}
            >
              智能分析
              <img src="/icons/rightBlue.png" alt="" className="ml-[2px]" />
            </div>
          </div>
        ) : (
          <></>
        )}
      </div>
    </div>
  );
}