"use client";

import type { DiningTableCategory } from "@/lib/api/dining-table-categories";
import { useMemo } from "react";
import { FilterSearchInput } from "../ui/filter-search-input";
import { FilterSearchSelect } from "../ui/filter-search-select";

export const ALL_CATEGORIES = "Semua Kategori";

type SemuaMejaFiltersProps = {
  search: string;
  category: string;
  categories: DiningTableCategory[];
  onSearchChange: (value: string) => void;
  onCategoryChange: (value: string) => void;
};

function buildCategoryOptions(categories: DiningTableCategory[]) {
  const uniqueNames = Array.from(
    new Set(
      categories
        .map((item) => item.name)
        .filter((name) => name.trim().length > 0 && name !== "-"),
    ),
  ).sort((a, b) => a.localeCompare(b, "id"));

  return [ALL_CATEGORIES, ...uniqueNames];
}

export function SemuaMejaFilters({
  search,
  category,
  categories,
  onSearchChange,
  onCategoryChange,
}: SemuaMejaFiltersProps) {
  const categoryOptions = useMemo(
    () => buildCategoryOptions(categories),
    [categories],
  );

  return (
    <div className="flex flex-wrap items-center gap-4">
      <FilterSearchInput
        value={search}
        onChange={onSearchChange}
        placeholder="Cari meja..."
        searchButtonLabel="Cari meja"
      />
      <FilterSearchSelect
        value={category}
        options={categoryOptions}
        onChange={onCategoryChange}
        searchPlaceholder="Cari kategori..."
        disabled={categories.length === 0}
      />
    </div>
  );
}