import React from "react";
import Checkbox from "@components/Widgets/Checkbox/Checkbox";
import {
  Question, InputProps, optionTypes, SignupQuestionError,
} from "./common";

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

class OptionsWidget extends React.Component<OptionsWidgetProps> {
  handleListOptionsChange = (questions: Question[], index: number): React.ChangeEventHandler<HTMLInputElement> => (event) => {
    const { onChange } = this.props;
    const val = event.target.value;
    const lst = val.split(",").map((p) => p.trimLeft());
    // eslint-disable-next-line no-param-reassign
    questions[index].options = lst;
    onChange(questions);
  };

  handleTextOptionsChange = (questions: Question[], index: number): React.ChangeEventHandler<HTMLInputElement> => (event) => {
    const { onChange } = this.props;
    const val = event.target.value;
    // eslint-disable-next-line no-param-reassign
    questions[index].options = val as unknown as string[]; // TODO: Check type
    onChange(questions);
  };

  handleIntegerOptionsChange = (questions: Question[], 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 = lst.splice(0, 2);
    } else {
      // eslint-disable-next-line no-param-reassign
      questions[index].options = [];
    }

    onChange(questions);
  };

  handleRequiredChange = (questions: Question[], 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() {
    const { inputProps } = this.props;
    const { questions, index } = inputProps;
    return (
      <Checkbox
        checked={questions[index].required}
        onChange={this.handleRequiredChange(questions, index)}
      >Required?
      </Checkbox>
    );
  }

  render() {
    const { inputProps } = this.props;
    const {
      type, value, 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"
            value={questions[index].options}
            onChange={this.handleTextOptionsChange(questions, index)}
          />
          {this.requiredField()}
        </>
      );
    }

    if (type === "integer") {
      const lst = value as string[];
      const joinedValue = lst.join(",");
      return (
        <>
          <input
            type="text"
            placeholder="Minimum,Maximum"
            value={joinedValue}
            onChange={this.handleIntegerOptionsChange(questions, index)}
          />
          {this.requiredField()}
        </>
      );
    }

    if (type === "radiobutton") {
      const lst = value as string[];
      const joinedValue = lst.join(",");
      return (
        <>
          <input
            type="text"
            placeholder="Yes,no,maybe"
            value={joinedValue}
            onChange={this.handleListOptionsChange(questions, index)}
          />
          {this.requiredField()}
        </>
      );
    }

    if (type === "checkbox") {
      const lst = value as string[];
      const joinedValue = lst.join(",");
      return (
        <>
          <input
            type="text"
            placeholder="A,B,C"
            value={joinedValue}
            onChange={this.handleListOptionsChange(questions, index)}
          />
          {this.requiredField()}
        </>
      );
    }

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

export default OptionsWidget;
