"use client";

import { Input } from "@/components/ui/input";
import { cn } from "@/lib/utils";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { TableCell } from "@/components/ui/table";

const CELL_CLASS = "p-2";
const CONTROL_CLASS = "h-8 bg-background text-xs";

/**
 * The two controls every master-list filter row is built from.
 *
 * Twenty-five `renderFilterCell` functions each spelled out the same
 * `TableCell` + `Input` and `TableCell` + `Select` bodies, down to the class
 * names — so a change to the filter row's height or background was a
 * twenty-five-file edit.
 */

export function MasterTextFilterCell({
  cellKey,
  value,
  placeholder,
  onChange,
  inputClassName,
}: {
  cellKey: string;
  value: string;
  placeholder: string;
  onChange: (value: string) => void;
  /** For the few columns with their own presentation, e.g. uppercase codes. */
  inputClassName?: string;
}) {
  return (
    <TableCell key={cellKey} className={CELL_CLASS}>
      <Input
        value={value}
        onChange={(event) => onChange(event.target.value)}
        placeholder={placeholder}
        className={cn(CONTROL_CLASS, inputClassName)}
      />
    </TableCell>
  );
}

export function MasterSelectFilterCell({
  cellKey,
  value,
  placeholder,
  options,
  onChange,
}: {
  cellKey: string;
  value: string;
  placeholder: string;
  options: readonly { value: string; label: string }[];
  onChange: (value: string) => void;
}) {
  return (
    <TableCell key={cellKey} className={CELL_CLASS}>
      <Select value={value} onValueChange={onChange}>
        <SelectTrigger className={CONTROL_CLASS}>
          <SelectValue placeholder={placeholder} />
        </SelectTrigger>
        <SelectContent>
          {options.map((option) => (
            <SelectItem key={option.value} value={option.value}>
              {option.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </TableCell>
  );
}