"use client";
import PageHeader from "@/components/PageHeder";
import ActionButton from "@/components/action-button";
import FilterForm from "@/components/common/filter-form";
import { TSproductSchema } from "@/components/forms/schema/product";
import {
  productInFilter,
  productOutFilter,
} from "@/components/forms/schema/product-filter";
import ProductInReport from "@/components/products/product-in-report";
import ProductOutReport from "@/components/products/product-out-report";
import { Label, Radio } from "flowbite-react";
import { FC, useState } from "react";
import { z } from "zod";

export const productFilter = z.object({
  product_dropdown: z.nullable(z.number()).optional(),
  staff_dropdown: z.nullable(z.number()).optional(),
  purchase_by_dropdown: z.nullable(z.number()).optional(),
  vendor_dropdown: z.nullable(z.number()).optional(),
  purchase_date_range: z.coerce.number().optional(),
  out_date_range: z.coerce.number().optional(),
});

type props = {
  products: TSproductSchema;
  pagination: any;
  reports: any;
};

const ProductReport: FC<props> = ({ pagination, products, reports }) => {
  const [filterValue, setFilter] = useState("");
  const [inOut, setInOut] = useState("in");
  const filterOptions = inOut === "in" ? productInFilter : productOutFilter;
  return (
    <>
      <PageHeader>
        <div className="flex justify-between !p-0">
          <h2 className="text-xl font-semibold">
            Product {inOut === "in" ? "In" : "Out"} Reports
          </h2>
          <ActionButton type="back" href="/products" />
        </div>
      </PageHeader>
      <div className="block p-2 bg-white dark:bg-gray-800">
        <div className="flex mt-1 ml-1">
          <div
            className="flex items-center gap-2 mr-2"
            onClick={() => {
              setInOut("in");
            }}
          >
            <Radio id="in" value="in" checked={inOut === "in"} readOnly />
            <Label htmlFor="united-state">Product In</Label>
          </div>
          <div
            className="flex items-center gap-2"
            onClick={() => {
              setInOut("out");
            }}
          >
            <Radio
              id="out"
              name="countries"
              value="out"
              checked={inOut === "out"}
              readOnly
            />
            <Label htmlFor="out">Product Out</Label>
          </div>
        </div>

        <FilterForm key={inOut} schema={filterOptions} setFilter={setFilter} />
      </div>
      <div className="overflow-hidden shadow">
        {inOut === "in" ? (
          <ProductInReport
            initPagination={pagination}
            initProduct={products}
            initReports={reports}
            filterValue={filterValue}
          />
        ) : (
          <ProductOutReport
            initPagination={pagination}
            initProduct={products}
            initReports={reports}
            filterValue={filterValue}
          />
        )}
      </div>
    </>
  );
};

export default ProductReport;