import ErrorMessages from "@/components/common/error-messages";
import ExpenseCategoryForm from "@/components/expense-categories/expense-category-form";
import ExpenseCategoryList from "@/components/expense-categories/expense-category-list";
import getData from "@/utils/fetch";
import { Metadata } from "next";
import ExpenseCategoryContent from "./content";
export const metadata: Metadata = {
  title: "expense category",
};

export default async function ExpenseCategory(context: any) {
  const { searchParams } = context;
  const categoryId = searchParams?.id;
  console.log(categoryId, "cat id");
  let singleCategory = undefined;
  if (categoryId) {
    singleCategory = await editForm(categoryId);
  }
  const categoryResponse = await getData("/api/v1/expense-categories");
  if (!categoryResponse?.success) {
    return <ErrorMessages message={categoryResponse?.message} />;
  }
  const {
    data: { data: expenseCategory },
    data: { pagination },
  } = categoryResponse;
  return (
    <div>
      <ExpenseCategoryContent />
      <div className="overflow-hidden shadow">
        <ExpenseCategoryList
          initExpenseCategory={expenseCategory}
          initPagination={pagination}
        />
        {singleCategory && (
          <ExpenseCategoryForm expenseCategory={singleCategory} mode="edit" />
        )}
      </div>
    </div>
  );
}

const editForm = async (id: string) => {
  const { data: category } = await getData(`/api/v1/expense-categories/${id}`);
  console.log(category);
  return category;
};