"use client";
import PageHeader from "@/components/PageHeder";
import ActionButton from "@/components/action-button";
import FilterForm from "@/components/common/filter-form";
import ExpenseTypeForm from "@/components/expense-type/expense-type-form";
import ExpenseForm from "@/components/expenses/expense-form";
import ExpenseList from "@/components/expenses/expense-list";
import { expenseFilter } from "@/components/forms/schema/expense-filter";
import { usePermission } from "@/utils/auth/permission";
import { FC, useState } from "react";

const ExpenseContent: FC = () => {
  const [isOpen, setOpen] = useState(false);
  const [filterValue, setFilter] = useState(null);
  const [isOpenExpenseType, setExpenseType] = useState(false);
  return (
    <div>
      <PageHeader>
        <div className="flex justify-between !p-0">
          <h2 className="text-xl font-semibold">Expenses</h2>
          {usePermission("expenses.create") && (
            <div className="flex">
              <ActionButton
                type="add"
                className="mr-2"
                onClick={() => setOpen(true)}
              >
                Add
              </ActionButton>
              <ExpenseForm isOpen={isOpen} setOpen={setOpen} />
              <ExpenseTypeForm
                isOpen={isOpenExpenseType}
                setOpen={setExpenseType}
              />
            </div>
          )}
        </div>
      </PageHeader>
      <div>
        <FilterForm schema={expenseFilter} setFilter={setFilter} grids={7} />
      </div>
      <div className="overflow-hidden shadow">
        <ExpenseList filterValue={filterValue} />
      </div>
    </div>
  );
};

export default ExpenseContent;