/**
 * @ai-summary Selector for marking 93 octane availability on a saved station
 */

import React from 'react';
import {
  FormControl,
  InputLabel,
  MenuItem,
  Select,
  SelectChangeEvent,
  FormHelperText
} from '@mui/material';
import { OctanePreference } from '../types/stations.types';

interface OctanePreferenceSelectorProps {
  value: OctanePreference;
  onChange: (value: OctanePreference) => void;
  disabled?: boolean;
  helperText?: string;
  label?: string;
}

const LABEL_ID = 'octane-preference-select';

export const OctanePreferenceSelector: React.FC<OctanePreferenceSelectorProps> = ({
  value,
  onChange,
  disabled = false,
  helperText,
  label = '93 Octane'
}) => {
  const handleChange = (event: SelectChangeEvent) => {
    onChange(event.target.value as OctanePreference);
  };

  return (
    <FormControl size="small" fullWidth disabled={disabled}>
      <InputLabel id={LABEL_ID}>{label}</InputLabel>
      <Select
        labelId={LABEL_ID}
        value={value}
        label={label}
        onChange={handleChange}
      >
        <MenuItem value="none">Not set</MenuItem>
        <MenuItem value="with_ethanol">93 w/ Ethanol</MenuItem>
        <MenuItem value="ethanol_free">93 Ethanol Free</MenuItem>
      </Select>
      {helperText && <FormHelperText>{helperText}</FormHelperText>}
    </FormControl>
  );
};

export default OctanePreferenceSelector;
