import { Input } from "../../components/ui/input";
import { Button } from "../../components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../../components/ui/select";
import { 
  PurchaseOrderStatus,
  getPurchaseOrderStatusLabel 
} from "../../types/status-codes";

interface FilterControlsProps {
  searchInput: string;
  setSearchInput: (value: string) => void;
  filterValues: {
    search: string;
    status: string;
    vendor: string;
    recordType: string;
  };
  handleStatusChange: (value: string) => void;
  handleVendorChange: (value: string) => void;
  handleRecordTypeChange: (value: string) => void;
  clearFilters: () => void;
  filterOptions: {
    vendors: string[];
    statuses: number[];
  };
  loading: boolean;
}

const STATUS_FILTER_OPTIONS = [
  { value: "all", label: "All Statuses" },
  {
    value: String(PurchaseOrderStatus.Created),
    label: getPurchaseOrderStatusLabel(PurchaseOrderStatus.Created),
  },
  {
    value: String(PurchaseOrderStatus.ElectronicallyReadySend),
    label: getPurchaseOrderStatusLabel(
      PurchaseOrderStatus.ElectronicallyReadySend
    ),
  },
  {
    value: String(PurchaseOrderStatus.Ordered),
    label: getPurchaseOrderStatusLabel(PurchaseOrderStatus.Ordered),
  },
  {
    value: String(PurchaseOrderStatus.ReceivingStarted),
    label: getPurchaseOrderStatusLabel(PurchaseOrderStatus.ReceivingStarted),
  },
  {
    value: String(PurchaseOrderStatus.Done),
    label: getPurchaseOrderStatusLabel(PurchaseOrderStatus.Done),
  },
  {
    value: String(PurchaseOrderStatus.Canceled),
    label: getPurchaseOrderStatusLabel(PurchaseOrderStatus.Canceled),
  },
];

const RECORD_TYPE_FILTER_OPTIONS = [
  { value: "all", label: "All Records" },
  { value: "po_only", label: "PO Only" },
  { value: "po_with_receiving", label: "PO with Receiving" },
  { value: "receiving_only", label: "Receiving Only" },
];

export default function FilterControls({
  searchInput,
  setSearchInput,
  filterValues,
  handleStatusChange,
  handleVendorChange,
  handleRecordTypeChange,
  clearFilters,
  filterOptions,
  loading,
}: FilterControlsProps) {
  return (
    <div className="mb-4 flex flex-wrap items-center gap-4">
      <Input
        placeholder="Search orders..."
        value={searchInput}
        onChange={(e) => setSearchInput(e.target.value)}
        className="max-w-xs"
        disabled={loading}
      />
      <Select
        value={filterValues.status}
        onValueChange={handleStatusChange}
        disabled={loading}
      >
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="Select status" />
        </SelectTrigger>
        <SelectContent>
          {STATUS_FILTER_OPTIONS.map((option) => (
            <SelectItem key={option.value} value={option.value}>
              {option.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      <Select
        value={filterValues.vendor}
        onValueChange={handleVendorChange}
        disabled={loading}
      >
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="Select supplier" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="all">All Suppliers</SelectItem>
          {filterOptions?.vendors?.map((vendor) => (
            <SelectItem key={vendor} value={vendor}>
              {vendor}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      <Select
        value={filterValues.recordType}
        onValueChange={handleRecordTypeChange}
        disabled={loading}
      >
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="Record Type" />
        </SelectTrigger>
        <SelectContent>
          {RECORD_TYPE_FILTER_OPTIONS.map((option) => (
            <SelectItem key={option.value} value={option.value}>
              {option.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      {(filterValues.search || filterValues.status !== "all" || filterValues.vendor !== "all" || filterValues.recordType !== "all") && (
        <Button 
          variant="outline" 
          size="sm" 
          onClick={clearFilters}
          disabled={loading}
          title="Clear filters"
          className="gap-1"
        >
          <span>Clear</span> ✕
        </Button>
      )}
    </div>
  );
} 