import React from "react";
import { SignupFormQuestion } from "@models/Signup";
import { InputProps, optionTypes } from "./common";

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

const TypeWidget = ({ onChange, inputProps }: TypeWidgetProps): JSX.Element => {
  const handleTypeChange = (questions: SignupFormQuestion[], index: number): React.ChangeEventHandler<HTMLSelectElement> => (event) => {
    const val = event.target.value as SignupFormQuestion["type"];
    // eslint-disable-next-line no-param-reassign
    questions[index].type = val;
    onChange(questions);
  };

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

export default TypeWidget;
