import React from "react";
import { Question, InputProps, optionTypes } from "./common";

interface TypeWidgetProps {
  inputProps: InputProps;
  onChange: (value: Question[]) => void;
}

class TypeWidget extends React.Component<TypeWidgetProps> {
  handleTypeChange = (questions: Question[], index: number) => (event) => {
    const { onChange } = this.props;
    const val = event.target.value;
    // eslint-disable-next-line no-param-reassign
    questions[index].type = val;
    onChange(questions);
  };

  render() {
    const { inputProps } = this.props;
    const { type, questions, index } = inputProps;
    const options = optionTypes.map((t) => (
      <option key={t} value={t}>{t}</option>
    ));
    return (
      <select onChange={this.handleTypeChange(questions, index)} value={type} name="type">
        {options}
      </select>
    );
  }
}

export default TypeWidget;
