"use client";
import { usePermission } from "@/utils/auth/permission";
import { cellIndex } from "@/utils/lib/helpers";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import axios from "axios";
import { Alert, Spinner } from "flowbite-react";
import Link from "next/link";
import { FC, useEffect, useState } from "react";
import { HiInformationCircle } from "react-icons/hi";
import ActionButton from "../action-button";
import DeleteRecord from "../common/delete-record";
import CustomPagination from "../common/pagination";
import DataTable from "../dataTable/data-table-fb";
import { TSproductSchema } from "../forms/schema/product";
import ProductEdit from "./product-edit";
import ProductReport from "./product-repoting";

type props = {
  filterValue?: string | null;
  initProduct?: TSproductSchema;
  initPagination?: any;
  initReports?: any;
};
const ProductList: FC<props> = ({
  filterValue,
  initPagination,
  initProduct,
  initReports = {},
}) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [pagination, setPagination] = useState<any>(initPagination);
  const [reports, setReports] = useState<any>(initReports);
  const [isOpen, setOpen] = useState(false);
  const [product_id, setProductId] = useState<string | null>(null);

  const onPageChange = (page: number) => setCurrentPage(page);

  let url = `/api/products?page=${currentPage}`;

  const getProducts = async () => {
    const {
      data: { data },
      data: {
        data: { pagination },
      },
      data: {
        data: { reports },
      },
    } = await axios.get(filterValue ? `${url}&${filterValue}` : url);
    setPagination(pagination);
    setReports(reports);
    return data?.data;
  };

  const {
    data: products,
    isLoading,
    isError,
    refetch,
    error = {} as any,
  } = useQuery({
    queryKey: ["products", { currentPage }],
    placeholderData: keepPreviousData,
    queryFn: () => getProducts(),
    retry: 0,
    initialData: initProduct,
  });

  useEffect(() => {
    setCurrentPage(1);
    refetch();
  }, [filterValue]);

  const columns = [
    {
      header: "SL",
      cell: ({ row }: any) => (
        <div className="font-bold">{cellIndex(row.index, pagination)}</div>
      ),
    },
    {
      header: "product name",
      accessorKey: "name",
      cell: ({ row }: any) => {
        const product = row.original;
        return <div>{`${product.name} `}</div>;
      },
    },
    {
      header: "Vat",
      accessorKey: "vat",
      cell: ({ row }: any) => {
        const product = row.original;
        return <>{product?.vat}%</>;
      },
    },
    {
      header: "Has Serial",
      cell: ({ row }: any) => {
        const product = row.original;
        return <>{product.has_serial === 1 ? "Yes" : "No"}</>;
      },
    },
    {
      header: "category",
      accessorKey: "category",
      cell: ({ row }: any) => {
        const product = row.original;
        return <>{product?.category?.name}</>;
      },
    },
    {
      header: "Unit Type",
      accessorKey: "unitType.name",
    },
    {
      header: "Stock In",
      accessorKey: "stock_in",
      cell: ({ row }: any) => {
        const product = row.original;
        const productIn = product?.stock_in_quantity;
        return (
          <Link href={`/products/in/${product?.id}`}>
            <span className="text-blue-500">{productIn}</span>
          </Link>
        );
      },
    },
    {
      header: "Stock Out",
      accessorKey: "stock_out",
      cell: ({ row }: any) => {
        const product = row.original;
        return (
          <Link href={`/products/out/${product?.id}`}>
            <span className="text-blue-500">{product?.stock_out_quantity}</span>
          </Link>
        );
      },
    },
    {
      header: "Stock Remaining",
      cell: ({ row }: any) => {
        const product = row.original;
        const remaining = product?.stock_in_remaining;
        return <>{remaining}</>;
      },
    },
    {
      header: "Actions",
      id: "testing",
      cell: ({ row }: any) => {
        const product = row.original;
        const product_id: string = String(product.id);
        const stockIn = product?.stock_in_quantity ?? 0;
        return (
          <>
            <div className=" flex">
              <div className="mr-2">
                {usePermission("products.edit") && (
                  <ActionButton
                    type="edit"
                    onClick={() => {
                      setOpen(true);
                      setProductId(product_id);
                    }}
                  ></ActionButton>
                )}
              </div>
              {usePermission("products.delete") && stockIn === 0 && (
                <DeleteRecord
                  name="product"
                  keys="products"
                  url={`/api/products/${product_id}`}
                />
              )}
            </div>
          </>
        );
      },
    },
  ];

  return (
    <>
      {isLoading && (
        <div className="text-center">
          <Spinner
            aria-label="Center-aligned spinner example"
            className="mt-20"
            size="xl"
          />
        </div>
      )}
      {isError && (
        <Alert color="failure" icon={HiInformationCircle}>
          <span className="font-medium">Info alert!</span>
          {error?.response?.data?.error?.message}
        </Alert>
      )}
      {isOpen && (
        <ProductEdit
          productId={product_id}
          setOpen={setOpen as () => void}
          isOpen={isOpen}
        />
      )}
      {products !== undefined && (
        <div className="user-list pb-20 shadow-md">
          {Object.keys(reports).length > 0 && (
            <ProductReport reports={reports} />
          )}
          <div className="border-b overflow-x-auto">
            {products?.length > 0 && (
              <DataTable data={products} columns={columns} loading={isOpen} />
            )}
          </div>
          <CustomPagination
            pagination={pagination}
            currentPage={currentPage}
            onPageChange={onPageChange}
          />
        </div>
      )}
    </>
  );
};
export default ProductList;