import { useParseFloat } from "@/utils/lib/helpers";
import { FC } from "react";
import { Control, useFormContext, useWatch } from "react-hook-form";
import MoneyFormat from "../common/money";
import { TSinvoiceSchema } from "../forms/schema/invoice";

type props = {
  control: Control<TSinvoiceSchema>;
  discount?: number;
};

const InvoiceTotal: FC<props> = ({ control, discount = 0 }) => {
  const { setValue } = useFormContext();
  const productValues = useWatch({
    control,
    name: "lines",
  });
  const total_amount: number = productValues.reduce(
    (acc, item) => acc + useParseFloat(item.total_amount),
    0
  );
  const line_discount: number = productValues.reduce(
    (acc, item) => acc + useParseFloat(item.discount),
    0
  );
  const total_discount = line_discount;
  const sub_total = total_amount;
  const after_discount_amount =
    sub_total - total_discount - useParseFloat(discount);
  setValue("total_amount", sub_total);
  setValue("line_total_discount", line_discount);
  setValue("after_discount_amount", after_discount_amount);
  return (
    <div className="flex justify-right">
      <div>
        <div className="flex">
          <span className="block w-24">Sub Total: </span>
          <div>
            <MoneyFormat
              amount={sub_total}
              iconClass="mt-1"
              moneyClass="font-medium"
            />
          </div>
        </div>
        <div className="flex">
          <span className="block w-24">Discount: </span>
          -
          <MoneyFormat
            amount={total_discount + useParseFloat(discount)}
            iconClass="mt-1"
            moneyClass="font-medium"
          />
        </div>
        <div className="flex border-t">
          <span className="block w-24">Total: </span>
          <MoneyFormat
            amount={after_discount_amount}
            iconClass="mt-1"
            moneyClass="font-medium"
          />
        </div>
      </div>
    </div>
  );
};

export default InvoiceTotal;