"use client";
import PageHeader from "@/components/PageHeder";
import ActionButton from "@/components/action-button";
import FilterForm from "@/components/common/filter-form";
import { clientInvoiceFilter } from "@/components/forms/schema/client-invoice-filter";
import { TSinvoiceSchema } from "@/components/forms/schema/invoice";
import ClientInvoices from "@/components/invoices/client-invoice";
import ClientInvoiceReports from "@/components/invoices/client-invoice-reports";
import { usePermission } from "@/utils/auth/permission";
import { FC, useState } from "react";

type props = {
  pagination: any;
  invoice: TSinvoiceSchema;
  clientId?: string;
  reports?: InvoiceReports;
};

const InvoiceContent: FC<props> = ({
  pagination,
  invoice,
  clientId,
  reports: clientReport,
}) => {
  const [filterValue, setFilter] = useState<string | null>("#");
  const [reports, setReports] = useState<InvoiceReports | undefined>(
    clientReport
  );
  return (
    <>
      <div>
        <PageHeader>
          <div className="flex justify-between !p-0">
            <h2 className="text-xl font-semibold">Client Invoice History</h2>
            {usePermission("invoices.create") && (
              <div className="flex">
                <div>
                  <div className="flex">
                    <ActionButton
                      title="Invoices"
                      type="back"
                      href={"/invoices"}
                      className="mr-2"
                    ></ActionButton>
                    <ActionButton
                      type="back"
                      title="Clients"
                      href={"/clients"}
                    ></ActionButton>
                  </div>
                </div>
              </div>
            )}
          </div>
        </PageHeader>
      </div>
      <div>
        <ClientInvoiceReports reports={reports} invoice={invoice as any} />
      </div>
      <div className="block border-t">
        <FilterForm
          schema={clientInvoiceFilter}
          setFilter={setFilter}
          grids={4}
        />
      </div>
      <div className="overflow-hidden shadow">
        <ClientInvoices
          initPagination={pagination}
          initInvoices={invoice}
          filterValue={filterValue}
          clientId={clientId}
          setReports={setReports}
        />
      </div>
    </>
  );
};

export default InvoiceContent;