"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _UUID = _interopRequireDefault(require("./UUID"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/**
  * <DynamicOptionList />
  */
class DynamicOptionList extends _react.default.Component {
  constructor(props) {
    super(props);
    this.state = {
      element: this.props.element,
      data: this.props.data,
      dirty: false
    };
  }

  _setValue(text) {
    return text.replace(/[^A-Z0-9]+/ig, '_').toLowerCase();
  }

  editOption(option_index, e) {
    const this_element = this.state.element;
    const val = this_element.options[option_index].value !== this._setValue(this_element.options[option_index].text) ? this_element.options[option_index].value : this._setValue(e.target.value);
    this_element.options[option_index].text = e.target.value;
    this_element.options[option_index].value = val;
    this.setState({
      element: this_element,
      dirty: true
    });
  }

  editValue(option_index, e) {
    const this_element = this.state.element;
    const val = e.target.value === '' ? this._setValue(this_element.options[option_index].text) : e.target.value;
    this_element.options[option_index].value = val;
    this.setState({
      element: this_element,
      dirty: true
    });
  } // eslint-disable-next-line no-unused-vars


  editOptionCorrect(option_index, e) {
    const this_element = this.state.element;

    if (this_element.options[option_index].hasOwnProperty('correct')) {
      delete this_element.options[option_index].correct;
    } else {
      this_element.options[option_index].correct = true;
    }

    this.setState({
      element: this_element
    });
    this.props.updateElement.call(this.props.preview, this_element);
  }

  updateOption() {
    const this_element = this.state.element; // to prevent ajax calls with no change

    if (this.state.dirty) {
      this.props.updateElement.call(this.props.preview, this_element);
      this.setState({
        dirty: false
      });
    }
  }

  addOption(index) {
    const this_element = this.state.element;
    this_element.options.splice(index + 1, 0, {
      value: '',
      text: '',
      key: _UUID.default.uuid()
    });
    this.props.updateElement.call(this.props.preview, this_element);
  }

  removeOption(index) {
    const this_element = this.state.element;
    this_element.options.splice(index, 1);
    this.props.updateElement.call(this.props.preview, this_element);
  }

  render() {
    if (this.state.dirty) {
      this.state.element.dirty = true;
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: "dynamic-option-list"
    }, /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("div", {
      className: "row"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "col-sm-6"
    }, /*#__PURE__*/_react.default.createElement("b", null, "Options")), this.props.canHaveOptionValue && /*#__PURE__*/_react.default.createElement("div", {
      className: "col-sm-2"
    }, /*#__PURE__*/_react.default.createElement("b", null, "Value")), this.props.canHaveOptionValue && this.props.canHaveOptionCorrect && /*#__PURE__*/_react.default.createElement("div", {
      className: "col-sm-4"
    }, /*#__PURE__*/_react.default.createElement("b", null, "Correct")))), this.props.element.options.map((option, index) => {
      const this_key = `edit_${option.key}`;
      const val = option.value !== this._setValue(option.text) ? option.value : '';
      return /*#__PURE__*/_react.default.createElement("li", {
        className: "clearfix",
        key: this_key
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: "row"
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: "col-sm-6"
      }, /*#__PURE__*/_react.default.createElement("input", {
        tabIndex: index + 1,
        className: "form-control",
        style: {
          width: '100%'
        },
        type: "text",
        name: `text_${index}`,
        placeholder: "Option text",
        value: option.text,
        onBlur: this.updateOption.bind(this),
        onChange: this.editOption.bind(this, index)
      })), this.props.canHaveOptionValue && /*#__PURE__*/_react.default.createElement("div", {
        className: "col-sm-2"
      }, /*#__PURE__*/_react.default.createElement("input", {
        className: "form-control",
        type: "text",
        name: `value_${index}`,
        value: val,
        onChange: this.editValue.bind(this, index)
      })), this.props.canHaveOptionValue && this.props.canHaveOptionCorrect && /*#__PURE__*/_react.default.createElement("div", {
        className: "col-sm-1"
      }, /*#__PURE__*/_react.default.createElement("input", {
        className: "form-control",
        type: "checkbox",
        value: "1",
        onChange: this.editOptionCorrect.bind(this, index),
        checked: option.hasOwnProperty('correct')
      })), /*#__PURE__*/_react.default.createElement("div", {
        className: "col-sm-3"
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: "dynamic-options-actions-buttons"
      }, /*#__PURE__*/_react.default.createElement("button", {
        onClick: this.addOption.bind(this, index),
        className: "btn btn-success"
      }, /*#__PURE__*/_react.default.createElement("i", {
        className: "fas fa-plus-circle"
      })), index > 0 && /*#__PURE__*/_react.default.createElement("button", {
        onClick: this.removeOption.bind(this, index),
        className: "btn btn-danger"
      }, /*#__PURE__*/_react.default.createElement("i", {
        className: "fas fa-minus-circle"
      }))))));
    })));
  }

}

exports.default = DynamicOptionList;