"use client";
import { usePermission } from "@/utils/auth/permission";
import { keepPreviousData, useQuery } from "@tanstack/react-query";
import axios from "axios";
import { FC, useEffect, useState } from "react";
import DeleteRecord from "../common/delete-record";
import MoneyFormat from "../common/money";
import CustomPagination from "../common/pagination";
import DataTable from "../dataTable/data-table-fb";
import { TSproductInSchema } from "../forms/schema/product-in";
import { TSproductOutSchema } from "../forms/schema/product-out";
import Spinner from "../spinner";
import ProductSerialView from "./product-serial-view";

type props = {
  initProductStock: TSproductInSchema | TSproductOutSchema;
  initPagination: any;
  mode: string;
  productId: string;
  initReports: any;
  filterValue?: string | null;
};
const ProductView: FC<props> = ({
  initProductStock,
  initPagination,
  mode = "In",
  productId,
  initReports,
  filterValue,
}) => {
  const [currentPage, setCurrentPage] = useState(1);
  const [pagination, setPagination] = useState<any>(initPagination);
  const [reports, setReports] = useState<any>(initReports);

  let url = `/api/product-details/${productId}?page=${currentPage}&mode=${mode}`;

  const onPageChange = (page: number) => setCurrentPage(page);
  const getProductStock = 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: productStock,
    isRefetching,
    isError,
    error = {} as any,
    refetch,
  } = useQuery({
    queryKey: ["product-details", { currentPage }],
    placeholderData: keepPreviousData,
    queryFn: () => getProductStock(),
    retry: 0,
    initialData: initProductStock,
    refetchOnWindowFocus: false,
  });

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

  const columns = [
    {
      header: "Product",
      accessorKey: "product",
      cell: ({ row }: any) => {
        const productIn = row.original;
        return (
          <div>
            <p>
              {productIn?.product?.name} ({productIn?.status})
            </p>
          </div>
        );
      },
    },
    {
      header: ({ table }: any) => {
        const head = mode === "In" ? "Purchaser" : "Out";
        return head;
      },
      accessorKey: "name",
      cell: ({ row }: any) => {
        const product = row.original;
        return (
          <div>
            Date : {mode === "In" ? product?.purchase_date : product?.out_date}
            <br />
            By :
            {mode === "In"
              ? product?.purchaseBy?.name
              : product?.receivedBy?.name}
          </div>
        );
      },
    },
    {
      header: "vendor",
      cell: ({ row }: any) => {
        const product = row.original;
        return <>{product?.vendor?.name}</>;
      },
    },
    {
      header: ({ table }: any) => {
        const head = mode === "In" ? "Stock In" : "Stock Out";
        return head;
      },
      accessorKey: "quantity",
      cell: ({ row }: any) => {
        const products = row.original;
        return <>{products?.quantity}</>;
      },
    },
    {
      header: "remaining",
      accessorKey: "quantity_remaining",
      cell: ({ row }: any) => {
        const products = row.original;
        return <>{products?.quantity_remaining}</>;
      },
    },
    {
      header: "Unit Price",
      accessorKey: "unit_price",
      cell: ({ row }: any) => {
        const product = row.original;
        return (
          <>
            <MoneyFormat amount={product?.unit_price} />
          </>
        );
      },
    },
    {
      header: "Total Price",
      accessorKey: "total_price",
      cell: ({ row }: any) => {
        const product = row.original;
        return (
          <>
            <MoneyFormat amount={product?.total_price} />
          </>
        );
      },
    },
    {
      header: "Selling Price",
      accessorKey: "unit_sell_price",
      cell: ({ row }: any) => {
        const product = row.original;
        return (
          <>
            <MoneyFormat amount={product?.unit_sell_price} />
          </>
        );
      },
    },
    {
      header: "Note/Serial",
      cell: ({ row }: any) => {
        const product = row.original;
        return <ProductSerialView product={product} />;
      },
    },
    {
      header: "Entry By",
      cell: ({ row }: any) => {
        const product = row.original;
        return <>{product?.staff?.name}</>;
      },
    },
    {
      header: "Actions",
      id: "testing",
      cell: ({ row }: any) => {
        const product = row.original;
        const product_id: string = String(product.id);
        const url =
          mode === "In"
            ? `/api/product-ins/${product_id}`
            : `/api/product-out/${product_id}`;
        return (
          <>
            <div className=" flex">
              {usePermission("products-in.delete") && (
                <DeleteRecord name="Product" url={url} keys="product-details" />
              )}
            </div>
          </>
        );
      },
    },
  ];

  return (
    <div className="overflow-hidden">
      <div>
        <div className="border-t border-b p-3">
          <div className="grid gap-6 grid-cols-1 md:grid-cols-4">
            <div>
              Total Price:
              <div className="font-bold inline-block ml-2">
                {mode === "In" ? (
                  <MoneyFormat
                    amount={reports?.product_in_current_total_price}
                  />
                ) : (
                  <MoneyFormat
                    amount={reports?.product_out_current_total_price}
                  />
                )}
              </div>
            </div>
            <div>
              Total quantity:
              <span className="font-bold inline-block ml-2">
                {mode === "In" ? (
                  <p>{reports?.product_in_current_quantity}</p>
                ) : (
                  <p>{reports?.product_out_current_quantity}</p>
                )}
              </span>
            </div>
          </div>
        </div>
        {isRefetching && (
          <div className="flex relative justify-center">
            <Spinner size="lg" className="absolute z-10" />
          </div>
        )}
        <div className="overflow-hidden pb-10">
          <div className="border-b overflow-x-auto">
            {productStock?.length > 0 && (
              <DataTable data={productStock} columns={columns} />
            )}
          </div>
          <CustomPagination
            currentPage={currentPage}
            onPageChange={onPageChange}
            pagination={pagination}
          />
        </div>
      </div>
    </div>
  );
};

export default ProductView;