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 ProductFiberForm from "./product-fiber-form";
import ProductSerial from "./product-serial";
import { twMerge } from "tailwind-merge";

type props = {
  defaultProduct: TSproductInSchema;
};
const ProductRowForm: 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 dark:text-gray-200 dark:bg-gray-800">
      <div className="grid grid-cols-2 md:grid-cols-9 mt-5">
        <div className=" dark:border-gray-500 col-span-2 border-t border-l">
          <div className="text-center font-medium block text-sm p-1">
            Product
          </div>
        </div>
        <div className="border-t border-l dark:border-gray-500 text-center font-medium col-span-1 text-sm p-1">
          Brand
        </div>
        <div className="border-t border-l dark:border-gray-500 text-center font-medium p-1 text-sm">
          Status
        </div>
        <div className="border-t border-l dark:border-gray-500 text-center font-medium p-1 text-sm">
          Quantity
        </div>
        <div className="border-t border-l dark:border-gray-500 text-center font-medium p-1 text-sm">
          Unit Cost
        </div>
        <div className="border-t border-l dark:border-gray-500 text-center font-medium p-1 text-sm">
          Unit Sale Price
        </div>
        <div className="border-t border-l dark:border-gray-500 text-center font-medium text-sm p-1">
          VAT(%)
        </div>
        <div className="border-t border-l border-r dark:border-gray-500 co-span-2 text-center font-medium text-sm p-1">
          Total
        </div>
      </div>
      {fields.map((field: any, index) => (
        <div key={field.id}>
          <div className=" dark:border-gray-500" key={field.id}>
            <div className="grid grid-cols-2 md:grid-cols-9 gap-0">
              <div className={twMerge("border-l dark:border-gray-500 col-span-2", index === 0 && "border-t")}>
                <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]?.["product_id"] && (
                      <p className="text-red-500">Product is required</p>
                    )}
                  </div>
                </div>
              </div>
              <div className={twMerge("px-1 border-l dark:border-gray-500 col-span-1", index === 0 && "border-t")}>
                <InputField
                  name={`product.${index}.brand`}
                  placeholder="brand"
                  size="sm"
                />
              </div>
              <div className={twMerge("px-1 pt-2 border-l dark:border-gray-500", index === 0 && "border-t")}>
                <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={twMerge("border-l dark:border-gray-500 px-1", index === 0 && "border-t")}>
                <InputField
                  name={`product.${index}.quantity`}
                  placeholder="Quantity"
                  inputType="number"
                  size="sm"
                />
              </div>
              <div className={twMerge("border-l dark:border-gray-500 px-1", index === 0 && "border-t")}>
                <InputField
                  name={`product.${index}.unit_price`}
                  placeholder="Unit cost"
                  inputType="number"
                  size="sm"
                />
              </div>
              <div className={twMerge("border-l dark:border-gray-500 px-1", index === 0 && "border-t")}>
                <InputField
                  name={`product.${index}.unit_sell_price`}
                  placeholder="unit sell price"
                  size="sm"
                />
              </div>
              <div className={twMerge("border-l dark:border-gray-500 px-1", index === 0 && "border-t")}>
                <InputField
                  name={`product.${index}.vat`}
                  placeholder="Vat"
                  size="sm"
                />
              </div>
              <div className={twMerge("border-l border-r dark:border-gray-500 flex relative", index === 0 && "border-t")}>
                <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 dark:border-gray-500 h-[31px] cursor-pointer bg-red-600"
                      onClick={() => remove(index)}
                    >
                      <HiMinus className="text-xl mt-1 text-white" />
                    </div>
                  ) : (
                    <div className="border dark:border-gray-500 h-[31px] bg-red-300">
                      <HiMinus className="text-xl text-gray-300 mt-1" />
                    </div>
                  )}
                  <div
                    className="border dark:border-gray-500 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>
                <ProductFiberForm index={index} />
              </div>
            )}
            <div className="pt-0">
              <ProductSerial {...{ control, index, field }} />
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default ProductRowForm;