import { FC, useEffect, useState } from "react";
import { useFieldArray, useFormContext } from "react-hook-form";
import { HiMinus, HiPlus } from "react-icons/hi";
import DropdownList from "../common/Dropdown";
import { InputField, Select } from "../forms/Inputs";
import { TSproductSchema } from "../forms/schema/product";
import { TSproductInSchema } from "../forms/schema/product-in";
import ProductSerial from "./product-serial";

type props = {
  defaultProduct: TSproductInSchema;
};
const ProductInstrumentForm: FC<props> = ({ defaultProduct }) => {
  const [selectedProduct, setSelectedProduct] = useState<TSproductSchema[]>([]);
  const {
    control,
    setValue,
    getValues,
    formState: { errors = {} as any },
  } = useFormContext();
  const { fields, remove, insert } = useFieldArray({
    name: "product",
    control,
  });

  useEffect(() => {
    if (selectedProduct?.length > 0) {
      selectedProduct?.map((product, index) => {
        setValue(`product.${index}.has_serial`, product.has_serial);
        setValue(`product.${index}.vat`, product.vat);
      });
    }
  }, [selectedProduct]);
  const setProduct = (index: number, product: any) => {
    const newProduct = [...selectedProduct];
    newProduct[index] = product;
    setValue(
      `product.${index}.product_category_id`,
      product.product_category_id
    );
    setSelectedProduct(newProduct);
  };
  return (
    <div className="p-5 pt-0 pr-8 bg-white -mt-5 pb-10">
      <div className="grid grid-cols-2 md:grid-cols-9 mt-5">
        <div className="border col-span-2">
          <div className="text-center font-medium block text-sm p-1">
            Product
          </div>
        </div>
        <div className="border text-center font-medium col-span-1 text-sm p-1">
          Brand
        </div>
        <div className="border text-center font-medium p-1 text-sm">Status</div>
        <div className="border text-center font-medium p-1 text-sm">
          Quantity
        </div>
        <div className="border text-center font-medium p-1 text-sm">
          Unit Cost
        </div>
        <div className="border text-center font-medium p-1 text-sm">
          Unit Sale Price
        </div>
        <div className="border text-center font-medium text-sm p-1">VAT(%)</div>
        <div className="border co-span-2 text-center font-medium text-sm p-1">
          Total
        </div>
      </div>
      {fields.map((field: any, index) => (
        <div className="border" key={field.id}>
          <div className="grid grid-cols-2 md:grid-cols-9">
            <div className=" border col-span-2">
              <div className="relative">
                <div className="py-2 h-full text-md absolute -left-4 font-bold z-5">
                  <span className="mt-2 block">{index + 1}</span>
                </div>
                <div className="py-2 px-1 overflow-visible w-full">
                  <DropdownList
                    idName={`product.${index}.product_id`}
                    name="product"
                    getLabel={(product) => product?.name}
                    isMulti={false}
                    isClearable={false}
                    height={20}
                    setOriginalValue={(product) => setProduct(index, product)}
                  />
                  {errors?.["product"]?.[index] && (
                    <p className="text-red-500">Product is required</p>
                  )}
                </div>
              </div>
            </div>
            <div className="px-1 border col-span-1">
              <InputField
                name={`product.${index}.brand`}
                placeholder="brand"
                size="sm"
              />
            </div>
            <div className="px-1 pt-2 border">
              <Select
                size="sm"
                name={`product.${index}.status`}
                defaultValue={"new"}
                options={[
                  { value: "new", label: "New" },
                  { value: "old", label: "Old" },
                  { value: "replace", label: "Replace" },
                ]}
              />
            </div>
            <div className="border px-1">
              <InputField
                name={`product.${index}.quantity`}
                placeholder="Quantity"
                inputType="number"
                size="sm"
              />
            </div>
            <div className="border px-1">
              <InputField
                name={`product.${index}.unit_price`}
                placeholder="Unit cost"
                inputType="number"
                size="sm"
              />
            </div>
            <div className="border px-1">
              <InputField
                name={`product.${index}.unit_sell_price`}
                placeholder="unit sell price"
                size="sm"
              />
            </div>
            <div className="border px-1">
              <InputField
                name={`product.${index}.vat`}
                placeholder="Vat"
                size="sm"
              />
            </div>
            <div className="border flex relative">
              <div className="col-span-8 px-1">
                <InputField
                  readonly={true}
                  name={`product.${index}.total_price`}
                  placeholder="Total"
                  inputType="number"
                  size="sm"
                />
              </div>
              <div className="absolute -right-6 -top-0.5">
                {index > 0 ? (
                  <div
                    className="border h-[31px] cursor-pointer bg-red-600"
                    onClick={() => remove(index)}
                  >
                    <HiMinus className="text-xl mt-1 text-white" />
                  </div>
                ) : (
                  <div className="border h-[31px] bg-red-300">
                    <HiMinus className="text-xl text-gray-300 mt-1" />
                  </div>
                )}
                <div
                  className="border h-[30px] cursor-pointer bg-green-600"
                  onClick={() => insert(index + 1, defaultProduct)}
                >
                  <HiPlus className="text-xl mt-1 text-white" />
                </div>
              </div>
            </div>
          </div>
          {getValues(`product.${index}.product_category_id`) === 2 && (
            <div className="fiber">
              <p>fiber test</p>
            </div>
          )}
          <div className="p-2 pt-0 grid grid-cols-2 gap-2 md:grid-cols-8">
            <ProductSerial {...{ control, index, field }} />
          </div>
        </div>
      ))}
    </div>
  );
};

export default ProductInstrumentForm;