import { FC, useEffect } from "react";
import { useFormContext, useWatch } from "react-hook-form";
import { toast } from "react-toastify";
import { InputField } from "../forms/Inputs";

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

const ProductSerial: FC<props> = ({ control, index, field }) => {
  const products = useWatch({
    name: "product",
    control,
  });
  const {
    getValues,
    formState: { errors = {} as any },
    clearErrors,
  } = useFormContext();
  const has_serial = getValues(`product.${index}.has_serial`);
  const quantity = isNaN(getValues(`product.${index}.quantity`))
    ? 0
    : getValues(`product.${index}.quantity`);
  const serialNumber = Array.from(
    { length: quantity },
    (value, items) => items
  );
  useEffect(() => {
    if (errors.product?.[index]?.serial?.["root"]?.["message"]) {
      toast.error(errors.product?.[index]?.serial?.["root"]?.["message"]);
      clearErrors(`product.${index}.serial.root`);
    }
  }, [errors]);
  return (
    <div className="border-l border-r  w-full border-b grid grid-cols-2 md:grid-cols-8 gap-2 px-1 pb-2">
      {has_serial == 1 &&
        serialNumber.map((item, serialIndex) => (
          <div key={`${field.id + serialIndex}`} >
            <InputField
              name={`product.${index}.serial.${serialIndex}`}
              placeholder={`product serial ${serialIndex + 1}`}
              size="sm"
            />
          </div>
        ))}
    </div>
  );
};

export default ProductSerial;