web2.0-frontend/src/components/Widgets/SignupQuestionsWidget/OptionsWidget.tsx

import React from "react";
import Checkbox from "@components/Widgets/Checkbox/Checkbox";
import { SignupFormQuestion } from "@models/Signup";
import { Lang } from "../../../i18n";
import {
  InputProps, optionTypes, SignupQuestionError,
} from "./common";

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

class OptionsWidget extends React.Component<OptionsWidgetProps> {
  handleListOptionsChange = (questions: SignupFormQuestion[], index: number, lang: Lang): React.ChangeEventHandler<HTMLInputElement> => (event) => {
    const { onChange } = this.props;
    const val = event.target.value;
    const lst = val.split(";").map((p) => p.trimLeft());

    if (lang === "fi") {
      // eslint-disable-next-line no-param-reassign
      questions[index].options = {
        ...questions[index].options,
        enumNames_fi: lst,
        enum: lst,
      };
    }
    if (lang === "en") {
      // eslint-disable-next-line no-param-reassign
      questions[index].options = {
        ...questions[index].options,
        enumNames_en: lst,
      };
    }
    onChange(questions);
  };

  handleInfoTextOptionsChange = (questions: SignupFormQuestion[], index: number, lang: Lang): React.ChangeEventHandler<HTMLInputElement> => (event) => {
    const { onChange } = this.props;
    const val = event.target.value;

    if (lang === "fi") {
      // eslint-disable-next-line no-param-reassign
      questions[index].description_fi = val;
    }
    if (lang === "en") {
      // eslint-disable-next-line no-param-reassign
      questions[index].description_en = val;
    }
    onChange(questions);
  };

  handleIntegerOptionsChange = (questions: SignupFormQuestion[], index: number): React.ChangeEventHandler<HTMLInputElement> => (event) => {
    const { onChange } = this.props;
    const val = event.target.value;
    if (val !== "") {
      const lst = val.split(";").map((p) => p.trimLeft());
      // Ignore everything else but the two first values
      // eslint-disable-next-line no-param-reassign
      questions[index].options.enum = lst.splice(0, 2);
    } else {
      // eslint-disable-next-line no-param-reassign
      questions[index].options.enum = [];
    }

    onChange(questions);
  };

  handleRequiredChange = (questions: SignupFormQuestion[], index: number): React.ChangeEventHandler<HTMLInputElement> => (event) => {
    const { onChange } = this.props;
    const val: boolean = event.target.checked;
    // eslint-disable-next-line no-param-reassign
    questions[index].required = val;
    onChange(questions);
  };

  requiredField(): JSX.Element {
    const { inputProps } = this.props;
    const { questions, index } = inputProps;
    return (
      <Checkbox
        checked={questions[index].required}
        onChange={this.handleRequiredChange(questions, index)}
      >
        Required?
      </Checkbox>
    );
  }

  render(): JSX.Element {
    const { inputProps } = this.props;
    const {
      value, type, questions, index,
    } = inputProps;
    if (!optionTypes.includes(type)) {
      throw new SignupQuestionError(`Question widget type "${type}" not in types array.`);
    }

    if (type === "text" || type === "email" || type === "name") {
      return this.requiredField();
    }

    if (type === "info") {
      return (
        <>
          <input
            type="text"
            placeholder="Write something informative in Finnish"
            value={questions[index].description_fi}
            onChange={this.handleInfoTextOptionsChange(questions, index, "fi")}
            required
          />
          <input
            type="text"
            placeholder="Write something informative in English"
            value={questions[index].description_en}
            onChange={this.handleInfoTextOptionsChange(questions, index, "en")}
            required
          />
        </>
      );
    }

    if (type === "integer") {
      return (
        <>
          <input
            type="text"
            placeholder="Minimum;Maximum"
            value={value.enum.join(";")}
            onChange={this.handleIntegerOptionsChange(questions, index)}
          />
          {this.requiredField()}
        </>
      );
    }

    if (type === "radiobutton") {
      return (
        <>
          <input
            type="text"
            placeholder="Kyllä;ei;ehkä"
            value={value.enumNames_fi.join(";")}
            onChange={this.handleListOptionsChange(questions, index, "fi")}
            required
          />
          <input
            type="text"
            placeholder="Yes;no;maybe"
            value={value.enumNames_en.join(";")}
            onChange={this.handleListOptionsChange(questions, index, "en")}
            required
          />
        </>
      );
    }

    if (type === "checkbox") {
      return (
        <>
          <input
            type="text"
            placeholder="Yksi;Kaksi;Kolme"
            value={value.enumNames_fi.join(";")}
            onChange={this.handleListOptionsChange(questions, index, "fi")}
            required
          />
          <input
            type="text"
            placeholder="One;Two;Three"
            value={value.enumNames_en.join(";")}
            onChange={this.handleListOptionsChange(questions, index, "en")}
            required
          />
          {this.requiredField()}
        </>
      );
    }

    throw new SignupQuestionError(`Unrecognized question widget type "${type}"`);
  }
}

export default OptionsWidget;