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

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

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

  handleTextOptionsChange = (questions: Question[], index: number) => (event) => {
    const { onChange } = this.props;
    const val = event.target.value;
    questions[index].options = val;
    onChange(questions);
  }

  handleIntegerOptionsChange = (questions: Question[], index: number) => (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
      questions[index].options = lst.splice(0, 2);
    } else {
      questions[index].options = []
    }

    onChange(questions);
  }

  handleRequiredChange = (questions: Question[], index: number) => (event) => {
    const { onChange } = this.props;
    const val: boolean = event.target.checked;
    console.log(val);
    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;