"use client";

import type { Branch } from "@/lib/api/branches";
import { useMemo } from "react";
import { FilterSearchInput } from "../ui/filter-search-input";
import { FilterSearchSelect } from "../ui/filter-search-select";

export const ALL_BRANCHES = "Semua Cabang";
export const ALL_STATUSES = "Semua Status";

export const ORDER_STATUS_FILTER_OPTIONS = [
  ALL_STATUSES,
  "Pesanan Masuk",
  "Lunas",
  "Dibatalkan",
] as const;

export type OrderStatusFilter =
  (typeof ORDER_STATUS_FILTER_OPTIONS)[number];

type DaftarPesananFiltersProps = {
  search: string;
  branch: string;
  status: OrderStatusFilter;
  branches: Branch[];
  onSearchChange: (value: string) => void;
  onBranchChange: (value: string) => void;
  onStatusChange: (value: OrderStatusFilter) => void;
};

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

  return [ALL_BRANCHES, ...uniqueNames];
}

export function DaftarPesananFilters({
  search,
  branch,
  status,
  branches,
  onSearchChange,
  onBranchChange,
  onStatusChange,
}: DaftarPesananFiltersProps) {
  const branchOptions = useMemo(
    () => buildBranchOptions(branches),
    [branches],
  );

  return (
    <div className="flex flex-wrap items-center gap-4">
      <FilterSearchInput
        value={search}
        onChange={onSearchChange}
        placeholder="Cari no pesanan..."
        searchButtonLabel="Cari no pesanan"
      />
      <FilterSearchSelect
        value={branch}
        options={branchOptions}
        onChange={onBranchChange}
        searchPlaceholder="Cari cabang..."
      />
      <FilterSearchSelect
        value={status}
        options={ORDER_STATUS_FILTER_OPTIONS}
        onChange={(value) => onStatusChange(value as OrderStatusFilter)}
        searchPlaceholder="Cari status..."
      />
    </div>
  );
}