import { Badge, Modal, Table } from "flowbite-react";
import { FC, useEffect, useState } from "react";
import Button from "../Button";
import { useParseFloat } from "@/utils/lib/helpers";

type props = {
  product: any;
};
const ProductSerialView: FC<props> = ({ product }) => {
  const [open, setOpen] = useState(false);
  const [outCount, setOutCount] = useState(0);
  const [inCount, setInCount] = useState(0);

  useEffect(() => {
    const out = product?.serial?.filter((serial: any) => serial?.out_date !== null);
    const outCount = useParseFloat(out?.length);
    const inCount = useParseFloat(product?.serial?.length - outCount);
    setOutCount(outCount);
    setInCount(inCount);
  }, [product?.length]);

  console.log(product)

  return (
    <div className="relative">
      {product.serial?.length > 0 && (
        <div>
          <Badge onClick={() => setOpen(true)} color={"gray"} className="inline-block cursor-pointer">
            <div className="flex">
              {inCount > 0 && (
                <div className="text-green-600">{inCount}</div>
              )}
              {(inCount > 0 && outCount > 0) && (
                <> | </>
              )}
              {outCount > 0 && (
                <div className="text-red-600">{outCount}</div>
              )}
            </div>
          </Badge>
          <Modal show={open} onClose={() => setOpen(false)} size={"2xl"}>
            <Modal.Header className="p-2 px-5">
              {product?.product?.name} (Serial Details)
            </Modal.Header>
            <Modal.Body className="p-5">
              <div>
                <Table>
                  <Table.Head className="!p-0">
                    <Table.HeadCell className="!p-2 text-md text-center">
                      Serial
                    </Table.HeadCell>
                    <Table.HeadCell className="!p-2 text-md text-center">
                      Status
                    </Table.HeadCell>
                    <Table.HeadCell className="!p-2 text-md text-center">
                      Purchase Date
                    </Table.HeadCell>
                    <Table.HeadCell className="!p-2 text-md text-center">
                      Out Date
                    </Table.HeadCell>
                  </Table.Head>
                  <Table.Body className="divide-y">
                    {product?.serial?.map((serial: any, index: number) => (
                      <Table.Row
                        className="bg-white dark:border-gray-700 dark:bg-gray-800"
                        key={serial?.id}
                      >
                        <Table.Cell className="!p-2 text-sm text-gray-800 text-center">
                          {serial?.serial_number}
                        </Table.Cell>
                        <Table.Cell
                          className={`!p-2 text-sm font-semibold text-${serial?.out_date ? "red" : "green"}-600 text-center`}
                        >
                          {serial?.out_date ? "OUT" : "IN-STOCK"}
                        </Table.Cell>
                        <Table.Cell className="!p-2 text-sm text-center">
                          {serial?.purchase_date}
                        </Table.Cell>
                        <Table.Cell className="!p-2 text-sm text-center">
                          {serial?.out_date}
                        </Table.Cell>
                      </Table.Row>
                    ))}
                  </Table.Body>
                </Table>
              </div>
            </Modal.Body>
          </Modal>
        </div>
      )}
    </div>
  );
};

export default ProductSerialView;