import { Group, SegmentedControl, Select, TextInput } from '@mantine/core';
import { LayoutGrid, Search, Table as TableIcon } from 'lucide-react';

import type { WarehouseFilter, WarehouseStatus, WarehouseType } from '@/types/warehouse';
import { statusOptions, warehouseTypeOptions } from './options';

export type WarehouseView = 'table' | 'card';

interface WarehouseFiltersProps {
  filter: WarehouseFilter;
  onChange: (next: WarehouseFilter) => void;
  view: WarehouseView;
  onViewChange: (view: WarehouseView) => void;
}

export function WarehouseFilters({ filter, onChange, view, onViewChange }: WarehouseFiltersProps) {
  return (
    <Group justify="space-between" wrap="wrap" gap="sm">
      <Group gap="sm" wrap="wrap">
        <TextInput
          placeholder="Search by name, code or location"
          leftSection={<Search size={16} />}
          value={filter.search ?? ''}
          onChange={(e) => onChange({ ...filter, search: e.currentTarget.value || undefined })}
          w={280}
        />
        <Select
          placeholder="All types"
          clearable
          data={warehouseTypeOptions}
          value={filter.type ?? null}
          onChange={(value) => onChange({ ...filter, type: (value as WarehouseType) || undefined })}
          w={190}
        />
        <Select
          placeholder="All statuses"
          clearable
          data={statusOptions}
          value={filter.status ?? null}
          onChange={(value) => onChange({ ...filter, status: (value as WarehouseStatus) || undefined })}
          w={160}
        />
      </Group>

      <SegmentedControl
        value={view}
        onChange={(value) => onViewChange(value as WarehouseView)}
        data={[
          { value: 'table', label: <TableIcon size={16} /> },
          { value: 'card', label: <LayoutGrid size={16} /> },
        ]}
      />
    </Group>
  );
}
