/**
 * @ai-summary Multi-select dropdown for maintenance subtype selection
 * @ai-context Material-UI Autocomplete with proper mobile touch targets
 */

import React from 'react';
import { Autocomplete, TextField, Chip } from '@mui/material';
import { MaintenanceCategory, getSubtypesForCategory } from '../types/maintenance.types';

interface SubtypeCheckboxGroupProps {
  category: MaintenanceCategory;
  selected: string[];
  onChange: (subtypes: string[]) => void;
}

export const SubtypeCheckboxGroup: React.FC<SubtypeCheckboxGroupProps> = ({
  category,
  selected,
  onChange,
}) => {
  const availableSubtypes = getSubtypesForCategory(category);

  return (
    <Autocomplete
      multiple
      options={Array.from(availableSubtypes)}
      value={selected}
      onChange={(_, newValue) => onChange(newValue)}
      disableCloseOnSelect
      renderInput={(params) => (
        <TextField
          {...params}
          label="Select Subtypes"
          placeholder={selected.length === 0 ? 'Choose one or more...' : ''}
          sx={{
            '& .MuiOutlinedInput-root': {
              minHeight: 56,
            },
          }}
        />
      )}
      renderTags={(value, getTagProps) =>
        value.map((option, index) => (
          <Chip
            label={option}
            {...getTagProps({ index })}
            key={option}
            sx={{
              height: 32,
              fontSize: { xs: 13, sm: 14 },
            }}
          />
        ))
      }
      sx={{
        '& .MuiAutocomplete-option': {
          minHeight: 44,
          fontSize: { xs: 14, sm: 16 },
        },
      }}
    />
  );
};
