import { createSignal, Match, Resource, Switch } from 'solid-js';
import { BudgetUpdate } from '../../types/budgetUpdate';
import { BudgetUpdatesTable } from '../../components/BudgetUpdatesTable/BudgetUpdatesTable';
import { Category } from '../../types/category';
import './BudgetUpdatesTableView.css';

export function BudgetUpdatesTableView({ budgetUpdates, categories }: Props) {
  const [newCategoryId, setCategoryId] = createSignal<number>();

  const filteredAndSortedBudgetUpdates: BudgetUpdate[] = budgetUpdates()
    ?.filter((bu) => bu.categoryId === newCategoryId())
    ?.sort((bu1, bu2) => bu2.date.diff(bu1.date))
    ?? [];

  return (
    <div>
      <form action="none">
        <label for="category">Category</label>
        <select id="category" onChange={(e) => setCategoryId(Number(e.target.value))}>
          {(categories() ?? []).map((c) =>
            <option value={c.id}>{c.name}</option>)}
        </select>
      </form>
      <BudgetUpdatesTable budgetUpdates={filteredAndSortedBudgetUpdates as BudgetUpdate[]} />
    </div>
  );
}

type Props = {
  budgetUpdates: Resource<BudgetUpdate[] | null>;
  categories: Resource<Category[] | null>;
}