"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { useMutation } from "@tanstack/react-query";
import axios from "axios";
import { useRouter } from "next/navigation";
import { FC, useState } from "react";
import { Control, FormProvider, useForm, useWatch } from "react-hook-form";
import { toast } from "react-toastify";
import ActionButton from "../action-button";
import DropdownList from "../common/Dropdown";
import MoneyFormat from "../common/money";
import { Datepicker, Textarea } from "../forms/Inputs";
import {
  TSproductOutSchema,
  productOutSchema,
} from "../forms/schema/product-out";
import ProductOutRowForm from "./product-out-row-form";
import { Checkbox, Label } from "flowbite-react";
import { useParseFloat } from "@/utils/lib/helpers";

const ProductOutForm: FC = () => {
  const route = useRouter();
  const [products, setProduct] = useState<TSproductOutSchema | undefined>(
    undefined
  );
  const defaultProduct = {
    product_id: 0,
    productin_id: 0,
    brand: null,
    unit: null,
    quantity: 1,
    unit_price: 0,
    unit_sell_price: 0,
    vat: 0,
    discount: 0,
    status: "new",
    total_price: 0,
    has_serial: 0,
    fiber_meter_start: null,
    fiber_meter_end: null,
    fiberID: null,
    serial: [],
    product_category_id: 1,
  };
  const storeForm = useForm<TSproductOutSchema>({
    resolver: zodResolver(productOutSchema),
    mode: "onChange",
    defaultValues: {
      product: [defaultProduct],
    },
  });

  const {
    handleSubmit,
    control,
    setValue,
    formState: { errors },
  } = storeForm;

  const {
    mutate: submitProduct,
    isPending,
    error,
    isError,
    isSuccess,
  } = useMutation({
    mutationFn: async (storeData: TSproductOutSchema) => {
      const { data } = await axios({
        method: "post",
        url: `/api/product-out`,
        data: storeData,
      });
      return data?.data;
    },
    onSuccess: (data) => {
      route.push("/products");
      toast.success("Product Out Successful!");
    },
    onError: (error: any) => {
      toast.error(error?.response?.data?.error?.error?.message);
    },
  });

  const onSubmit = async (data: TSproductOutSchema) => {
    console.log(data);
    submitProduct(data);
  };
  const TotalAmount = ({
    control,
  }: {
    control: Control<TSproductOutSchema>;
  }) => {
    const productValues = useWatch({
      control,
      name: "product",
    });
    const total: number = productValues.reduce(
      (acc, item) =>
        acc + (Number.isNaN(item.total_price) ? 0 : item.total_price),
      0
    );
    const discount: number = productValues.reduce(
      (acc, item) =>
        acc + (useParseFloat(item.discount)),
      0
    );
    return (
      <div className="">
        <div className="flex justify-end">
          <span className="block">Sub Total: </span>
          <div className="text-right">
            <MoneyFormat amount={useParseFloat(total + discount)} />
          </div>
        </div>
        <div className="flex justify-end">
          <span className="block">Discount: </span>
          <div className="text-right">
            <MoneyFormat amount={discount} />
          </div>
        </div>
        <div className="flex border-t justify-end">
          <span className="block">Total: </span>
          <MoneyFormat moneyClass="text-right" amount={total} />
        </div>
      </div>
    );
  };

  const onError = async (data: any) => {
    console.log("error", data);
  };
  return (
    <>
      <div className="p-1 pt-0">
        <FormProvider {...storeForm}>
          <form onSubmit={handleSubmit(onSubmit, onError)}>
            <div className="grid grid-cols-1 bg-white">
              <div className="expense">
                <div className="grid gap-4 grid-cols-1 md:grid-cols-3">
                  <div>
                    <Datepicker name="out_date" labelText="Out Date" />
                  </div>
                  <div>
                    <label htmlFor="" className="mb-1 mt-1 block">
                      Staff
                    </label>
                    <DropdownList
                      idName="received_by"
                      name="staff"
                      getLabel={(staff) => staff?.name}
                      isMulti={false}
                      placeholder="Staff"
                    />
                  </div>
                  <div>
                    <label htmlFor="" className="mb-2 block">
                      Client
                    </label>
                    <DropdownList
                      idName="client_id"
                      name="client"
                      getLabel={(client) => client?.name}
                      isMulti={false}
                      placeholder="Client"
                    />
                  </div>
                </div>
              </div>
              <div className="flex gap-2 mt-3 cursor-pointer">
                <Label htmlFor="cable_invoice" className="block cursor-pointer">Create Invoice</Label>
                <div className="">
                  <Checkbox name="cable_invoice" id="cable_invoice" onChange={(event: any) => setValue("create_invoice", event?.target?.checked ? 1 : 0)} />
                </div>
              </div>
              <ProductOutRowForm defaultProduct={defaultProduct as any} />
              <div className="flex justify-end border-b">
                <div className="p-5 mr-14">
                  <TotalAmount control={control} />
                </div>
              </div>
              <div className="">
                <Textarea
                  labelText="Note"
                  name="note"
                  placeholder="Note"
                  errors={errors}
                  rows={2}
                />
              </div>
            </div>
            <div className="flex justify-end mt-5 mb-10">
              <ActionButton type="submit" isLoading={isPending} />
            </div>
          </form>
        </FormProvider>
      </div>
    </>
  );
};

export default ProductOutForm;