import { useParams } from 'react-router';

import { useExpenseList } from '@/entity/expenses/list';
import { AddExpenseItemButton } from '@/features/expenses/items/AddExpenseItemButton';
import { Spinner } from '@/shared/ui/Spinner';
import { AppLayout } from '@/widgets/AppLayout';
import { ExpenseItemsTable } from '@/widgets/expenses/ExpenseItemsTable';

import type { ExpensePageParams } from '@/shared/router';

const ExpensePage = () => {
  // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion
  const { id } = useParams() as ExpensePageParams;

  const { data: expenseList, isPending } = useExpenseList(id);

  const renderContent = () => {
    if (isPending) {
      return <Spinner />;
    }

    if (expenseList?.items?.length && expenseList.items.length > 0) {
      return (
        <ExpenseItemsTable list={expenseList} />
      );
    }

    return <p>Списков расходов нет</p>;
  };

  return (
    <AppLayout>
      <div>
        <h1>Списки расходов</h1>

        <AddExpenseItemButton listId={id} />

        {renderContent()}

      </div>
    </AppLayout>
  );
};

export default ExpensePage;