import { useParseFloat } from "@/utils/lib/helpers";
import { Button, Modal } from "flowbite-react";
import html2canvas from "html2canvas";
import { jsPDF } from "jspdf";
import { useSession } from "next-auth/react";
import { FC, useRef, useState } from "react";
import { MdPrint } from "react-icons/md";
import { TSinvoiceSchema } from "../forms/schema/invoice";
import Spinner from "../spinner";
interface props {
  invoice: TSinvoiceSchema;
  isShow?: boolean;
  setShow?: (x: boolean) => void;
}
export const dateFormat = () => {
  const date = new Date();
  const day = date.getDate();
  const month = date.toLocaleString("en-US", { month: "long" });
  const year = date.getFullYear().toString().slice(-2);
  const formattedDate = `${day}-${month}-${year}`;
  return formattedDate;
};

const InvoicePrint: FC<props> = ({
  invoice,
  isShow = false,
  setShow = () => {},
}) => {
  const [loading, setLoading] = useState(false);
  const pdfRef = useRef(null);
  const handleGeneratePDF = async () => {
    setLoading(true);
    const inputData: any = pdfRef.current;
    try {
      const canvas = await html2canvas(inputData);
      const imgData = canvas.toDataURL("image/png");
      const document_height = pdfRef?.current?.clientHeight ?? 400;
      const mm_height = (document_height - 100) / 3;
      const client_name =
        invoice?.client?.name.replace(/\s+/g, "-").toLowerCase() ?? "#";
      const pdf_name = `${invoice?.trackID}-${client_name}-${dateFormat()}`;
      const pdf = new jsPDF({
        orientation: "p",
        unit: "mm",
        format: [95, mm_height],
        compress: true,
      });
      pdf.setProperties({
        title: pdf_name,
      });

      const height = pdf.internal.pageSize.getHeight();
      pdf.addImage(imgData, "PNG", 14, 0, 75, height);
      //pdf.output("dataurlnewwindow");
      pdf.save(`${pdf_name}.pdf`);
      setLoading(false);
      setShow(false);
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <>
      <Modal onClose={() => setShow(false)} show={isShow} size={"sm"}>
        <Modal.Header className="border-b dark:border-gray-500 border-gray-900-0 px-2 pb-0 pt-2">
          <Button
            size={"sm"}
            color={"white"}
            className=""
            onClick={() => handleGeneratePDF()}
          >
            {loading ? <Spinner /> : <MdPrint className="text-2xl" />}
          </Button>
        </Modal.Header>
        <Modal.Body className="px-2 pb-6 pt-0 relative">
          <div ref={pdfRef} className="dark:text-gray-200">
            <PDF invoice={invoice} />
          </div>
        </Modal.Body>
      </Modal>
    </>
  );
};

export const PDF: FC<props> = ({ invoice }) => {
  const { data: session }: any = useSession();
  return (
    <div className="flex justify-center dark:text-gray-200">
      <div className={`py-4 px-4 invoice  font-bold w-full`}>
        <div className="flex flex-col items-center text-center text-md font-bold">
          <div>
            <div className="company mb-1 pb-1">
              <h2 className="text-lg text-gray-900 dark:text-gray-200">
                {session?.company?.name}
              </h2>
              <h4 className="text-gray-900 text-md font-medium dark:text-gray-200">
                {session?.company?.address}
              </h4>
              <p className="text-gray-900 text-md font-medium dark:text-gray-200">
                Phone: {session?.company?.phone}
              </p>
            </div>
            {invoice?.client && (
              <div className="client border-t dark:border-gray-500 border-gray-900 mt-1 pt-1 text-gray-900 dark:text-gray-200 text-md font-medium">
                <h1>Client: {invoice?.client?.name}</h1>
                {invoice?.client?.phone && (
                  <p>Phone: {invoice?.client?.phone}</p>
                )}
              </div>
            )}
          </div>
        </div>
        <div className="flex justify-between text-md font-bold mt-3 pb-2 mb-1 text-md font-medium">
          <div>
            <p> #{invoice?.trackID}</p>
          </div>
          <div>
            <p>{dateFormat()}</p>
          </div>
        </div>
        <div className="grid gap-2 grid-cols-5 font-medium pb-1 text-md border-t dark:border-gray-500 border-gray-900">
          <div className="col-span-2 py-1">Item</div>
          <div className="py-1 text-center">Qty</div>
          <div className="py-1">Price</div>
          <div className="flex justify-end py-1">Amt</div>
        </div>
        <div className="border-t dark:border-gray-500 border-gray-900 mt-1 font-medium text-md">
          {invoice?.lines?.map((line: any) => (
            <div
              key={line.uuid}
              className="grid gap-2 grid-cols-5 border-b dark:border-gray-500 border-gray-900 pb-2"
            >
              <div className="col-span-2 py-1">{line?.description}</div>
              <div className="py-1 text-center">{line.quantity}</div>
              <div className="py-1 text-left -ml-1">
                {useParseFloat(line?.amount)}
              </div>
              <div className="flex justify-end py-1">
                {useParseFloat(line?.total_amount)}
              </div>
            </div>
          ))}
        </div>
        <div className="mt-1 text-md font-medium pb-2">
          <div className="flex justify-end mb-1">
            <div className="mr-4">Sub Total:</div>
            <div className="w-[60px]  text-right">
              {useParseFloat(invoice?.total_amount)}
            </div>
          </div>
          <div className="flex justify-end">
            <div className="mr-4"> Discount:</div>
            <div className="w-[60px]  text-right">
              {useParseFloat(invoice?.total_discount)}
            </div>
          </div>
          <div className="border-t dark:border-gray-500 border-gray-900 mt-3 text-md font-medium">
            <TotalPaid invoice={invoice} />
          </div>
          <div className="flex justify-center font-semibold text-md mt-4">
            <p>Thank You</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export const TotalPaid: FC<props> = ({ invoice }) => {
  return (
    <>
      {invoice.after_discount_amount > invoice?.amount_paid && (
        <>
          <div className="flex justify-end pb-2">
            <div className="pb-1 mr-4"> Total:</div>
            <div className="w-[60px]  text-right">
              {useParseFloat(invoice?.after_discount_amount)}
            </div>
          </div>
          <div className="flex border-t dark:border-gray-500 justify-end border-gray-900 pb-2">
            <div className="pt-1 mr-4"> Amount Paid:</div>
            <div className="pb-1 w-[60px]  text-right">
              {useParseFloat(invoice?.amount_paid)}
            </div>
          </div>
          <div className="flex border-t dark:border-gray-500 justify-end border-gray-900">
            <div className="pt-1 mr-4"> Amount Due:</div>
            <div className="pt-1 w-[60px]  text-right">
              {useParseFloat(invoice?.amount_due)}
            </div>
          </div>
        </>
      )}
      {invoice.after_discount_amount === invoice?.amount_paid && (
        <div className="flex justify-end">
          <div className="mr-4"> Amount Paid:</div>
          <div className="w-[60px]  text-right">
            {useParseFloat(invoice?.after_discount_amount)}
          </div>
        </div>
      )}
    </>
  );
};

export default InvoicePrint;