import React, { useEffect, useState } from 'react';
import {FormSelect, FormSelectProps} from 'react-bootstrap';

interface SelectProps extends Omit<FormSelectProps, 'onChange'> {
  data: { id: string | number, name: string | number, disabled?: boolean }[];
  value: string;
  onChange: (value: string, e: React.ChangeEvent<HTMLSelectElement>) => void;
}

const Select = ({data, value, onChange, ...props}: SelectProps) => {
  const [internalValue, setInternalValue] = useState(value || "");

  const handleOnChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    onChange(e.target.value, e);
  }

  useEffect(() => {
    setInternalValue(value);
  }, [value])

  return (
    <FormSelect onChange={handleOnChange} value={internalValue} {...props}>
      {
        data.map(item => (
          <option
            key={item.id}
            value={item.id}
            disabled={item.disabled}
          >
            {item.name}
          </option>
        ))
      }
    </FormSelect>
  );
};

export default Select;
export {Select, SelectProps};