"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 { TSpaymentSchema } from "@/components/forms/schema/payment";
import ClientPaymentReports from "@/components/payments/client-payment-reports";
import ClientPayments from "@/components/payments/client-payments";
import { usePermission } from "@/utils/auth/permission";
import { FC, useState } from "react";

type props = {
  pagination: any;
  payment: TSpaymentSchema;
  clientId?: string;
  reports?: PaymentReports;
};

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

export default PaymentContent;