"client";
import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { FC, useEffect, useMemo, useState } from "react";
import { useFormContext } from "react-hook-form";
import { Checkbox, InputField } from "../forms/Inputs";
import Spinner from "../spinner";
import { MdClose } from "react-icons/md";

type props = {
  control: any;
  index: number;
  field: any;
};

const ProductOutSerial: FC<props> = ({ control, index, field }) => {
  const [serial, setSerial] = useState<any[]>([]);
  const { getValues, register, setValue, watch } = useFormContext();
  const product_in_id = getValues(`product.${index}.productin_id`);

  const getProductSerial = async () => {
    const { data } = await axios.get(`/api/product-ins/${product_in_id}`);
    return data?.data;
  };

  const {
    data: productSerial,
    isLoading,
    refetch,
  } = useQuery({
    queryKey: ["product-serial", { product_in_id }],
    queryFn: () => getProductSerial(),
    retry: 0,
    enabled: false,
  });
  useEffect(() => {
    if (product_in_id) {
      setSerial([]);
      refetch();
    }
  }, [product_in_id]);

  const updateSerial = (event: any, value: any) => {
    if (event?.target?.checked) {
      setSerial((serial: any) => [...serial, value]);
    } else {
      setSerial((serial) => serial?.filter((item) => item !== value));
    }
  };

  useEffect(() => {
    setValue(`product.${index}.serial`, serial);
  }, [serial]);

  const searchTerm = watch("search_serial", "");

  const filteredProductSerial = useMemo(() => {
    if (!productSerial) return [];

    return productSerial.filter(item =>
      item?.serial_number?.toLowerCase().includes(searchTerm.toLowerCase())
    );
  }, [searchTerm, productSerial]);

  return (
    <>
      {isLoading && (
        <div className="p-2 relative">
          <div className="absolute flex items-center justify-center">
            <Spinner />
          </div>
        </div>
      )}
      {filteredProductSerial && (
        <div className="flex gap-2 flex-wrap mt-2 md:mt-0 lg:mt-0 border-l border-r border-b">
          <div className="w-48 relative ml-1 mb-2">
            <div>
              <InputField size="sm" labelText="" placeholder="Search serial" name="search_serial" />
              {searchTerm?.length > 0 && (
                <div className="absolute top-4 right-3 cursor-pointer" onClick={() => setValue("search_serial", "")}>
                  <MdClose />
                </div>
              )}
            </div>
          </div>
          {filteredProductSerial?.map((item: any, serialIndex: number) => (
            <div key={`${field.id + serialIndex}`} >
              <div className="flex gap-2 p-2">
                <Checkbox
                  className="mt-1"
                  name={`product.${index}.serial`}
                  id={`serial-${index}-${serialIndex}`}
                  onChange={(e) => updateSerial(e, item.id)}
                />
                <label
                  htmlFor={`serial-${index}-${serialIndex}`}
                  className="cursor-pointer block"
                >
                  {item?.serial_number}
                </label>
              </div>
            </div>
          ))}
        </div>
      )}


    </>
  );
};

export default ProductOutSerial;