"use strict";

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

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

var _reactTextareaAutosize = _interopRequireDefault(require("react-textarea-autosize"));

var _dynamic = _interopRequireDefault(require("next/dynamic"));

var _draftJs = require("draft-js");

var _draftjsToHtml = _interopRequireDefault(require("draftjs-to-html"));

var _dynamicOptionList = _interopRequireDefault(require("./dynamic-option-list"));

var _requests = require("./stores/requests");

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

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

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const FileRobotImageEditor = (0, _dynamic.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require("react-filerobot-image-editor"))).then(mod => mod), {
  ssr: false
}); // we are adding this line because of windows undefined error

let htmlToDraft = null;

if (typeof window === "object") {
  htmlToDraft = require("html-to-draftjs").default;
} // import { Editor } from "react-draft-wysiwyg";
// window = (typeof window != 'undefined' ? window : {});
// let DraftEditor;
// import('react-draft-wysiwyg').then(mod => DraftEditor = mod.Editor);


const Editor = (0, _dynamic.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require("react-draft-wysiwyg"))).then(mod => mod.Editor), {
  ssr: false
});
const toolbar = {
  options: ["inline", "list", "textAlign", "fontSize", "link", "history"],
  inline: {
    inDropdown: false,
    className: undefined,
    options: ["bold", "italic", "underline", "superscript", "subscript"]
  }
};

class FormElementsEdit extends _react.default.Component {
  constructor(props) {
    super(props);

    _defineProperty(this, "uploadImageValidaion", "");

    _defineProperty(this, "imageValidation", (files, callback) => {
      const self = this;
      self.setState({
        isFileValid: false
      });

      if (files && files.length) {
        const file = files[0];
        const img = new Image();

        img.onload = () => {
          callback(img.src, file);
        }; // eslint-disable-next-line no-undef


        let reader = new FileReader();
        reader.readAsDataURL(file);

        if (1024 * 1024 * 1 < file.size) {
          self.uploadImageValidaion = "Image should be less the 1 mb";
          self.setState({
            isFileValid: true
          });
          return;
        }

        reader.onloadend = () => {
          img.src = reader.result;
        };
      }
    });

    this.state = {
      element: this.props.element,
      data: this.props.data,
      dirty: false,
      isFileValid: false,
      previewVisible: false,
      base64: ''
    };
  }

  editElementProp(elemProperty, targProperty, e) {
    // elemProperty could be content or label
    // targProperty could be value or checked
    const this_element = this.state.element;

    if (targProperty == "files") {
      let base64 = "";

      const base64Callback = (b64, file) => {
        base64 = b64;
        this_element["file"] = {
          name: file.name
        };
        this.setState({
          element: this_element,
          base64,
          dirty: true,
          previewVisible: true
        }, () => {
          if (targProperty === "checked") {
            this.updateElement();
          }
        });
      };

      this.imageValidation(e.target[targProperty], base64Callback);
    } else {
      this_element[elemProperty] = e.target[targProperty];
      this.setState({
        element: this_element,
        dirty: true,
        previewVisible: false
      }, () => {
        if (targProperty === "checked") {
          this.updateElement();
        }
      });
    }
  }

  changeEditImage(editedImageObject, designState) {
    const this_element = this.state.element;
    this_element['base64'] = designState.imageBase64;
    this.setState({
      element: this_element,
      dirty: true,
      previewVisible: false
    });
  }

  onEditorStateChange(index, property, editorContent) {
    // const html = draftToHtml(convertToRaw(editorContent.getCurrentContent())).replace(/<p>/g, '<div>').replace(/<\/p>/g, '</div>');
    const html = (0, _draftjsToHtml.default)((0, _draftJs.convertToRaw)(editorContent.getCurrentContent())); // .replace(/<p>/g, "")
    // .replace(/<\/p>/g, "")
    // .replace(/&nbsp;/g, " ")
    // .replace(/(?:\r\n|\r|\n)/g, " ");

    const this_element = this.state.element;
    this_element[property] = html;
    this.setState({
      element: this_element,
      dirty: true
    });
  }

  updateElement() {
    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
      });
    }
  }

  convertFromHTML(content) {
    let newContent = {};

    if (typeof window === "object" && htmlToDraft) {
      newContent = htmlToDraft(content);
    }

    if (!newContent.contentBlocks || !newContent.contentBlocks.length) {
      // to prevent crash when no contents in editor
      return _draftJs.EditorState.createEmpty();
    }

    const contentState = _draftJs.ContentState.createFromBlockArray(newContent);

    return _draftJs.EditorState.createWithContent(contentState);
  }

  addOptions() {
    const optionsApiUrl = document.getElementById("optionsApiUrl").value;

    if (optionsApiUrl) {
      (0, _requests.get)(optionsApiUrl).then(data => {
        this.props.element.options = [];
        const {
          options
        } = this.props.element;
        data.forEach(x => {
          // eslint-disable-next-line no-param-reassign
          x.key = _UUID.default.uuid();
          options.push(x);
        });
        const this_element = this.state.element;
        this.setState({
          element: this_element,
          dirty: true
        });
      });
    }
  }

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

    const this_checked = this.props.element.hasOwnProperty("required") ? this.props.element.required : false;
    const this_isEmail_checked = this.props.element.hasOwnProperty("isEmail") ? this.props.element.isEmail : false;
    const this_isMobile_checked = this.props.element.hasOwnProperty("isMobile") ? this.props.element.isMobile : false;
    const this_read_only = this.props.element.hasOwnProperty("readOnly") ? this.props.element.readOnly : false;
    const this_default_today = this.props.element.hasOwnProperty("defaultToday") ? this.props.element.defaultToday : false;
    const this_show_time_select = this.props.element.hasOwnProperty("showTimeSelect") ? this.props.element.showTimeSelect : false;
    const this_show_time_select_only = this.props.element.hasOwnProperty("showTimeSelectOnly") ? this.props.element.showTimeSelectOnly : false;
    const this_checked_inline = this.props.element.hasOwnProperty("inline") ? this.props.element.inline : false;
    const this_checked_bold = this.props.element.hasOwnProperty("bold") ? this.props.element.bold : false;
    const this_checked_italic = this.props.element.hasOwnProperty("italic") ? this.props.element.italic : false;
    const this_checked_center = this.props.element.hasOwnProperty("center") ? this.props.element.center : false;
    const this_checked_page_break = this.props.element.hasOwnProperty("pageBreakBefore") ? this.props.element.pageBreakBefore : false;
    const this_checked_alternate_form = this.props.element.hasOwnProperty("alternateForm") ? this.props.element.alternateForm : false;
    const {
      canHavePageBreakBefore,
      canHaveAlternateForm,
      canHaveDisplayHorizontal,
      canHaveOptionCorrect,
      canHaveOptionValue,
      canHavePatternsToValidate,
      canHaveLengthToValidate,
      canHaveMobileToValidate,
      canHaveEmailToValidate
    } = this.props.element;
    const this_files = this.props.files.length ? this.props.files : [];

    if (this_files.length < 1 || this_files.length > 0 && this_files[0].id !== "") {
      this_files.unshift({
        id: "",
        file_name: ""
      });
    }

    let editorStateContent, editorStateLabel;

    if (this.props.element.hasOwnProperty("content")) {
      editorStateContent = this.convertFromHTML(this.props.element.content);
    }

    if (this.props.element.hasOwnProperty("label")) {
      editorStateLabel = this.convertFromHTML(this.props.element.label);
    }

    let modalClass = "modal";

    if (this.state.previewVisible) {
      modalClass += " show d-block";
    }

    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
      className: "clearfix"
    }, /*#__PURE__*/_react.default.createElement("h4", {
      className: "float-left"
    }, this.props.element.text), /*#__PURE__*/_react.default.createElement("i", {
      className: "float-right fas fa-times dismiss-edit",
      onClick: this.props.manualEditModeOff
    })), this.props.element.hasOwnProperty("content") && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label"
    }, "Text to display:"), /*#__PURE__*/_react.default.createElement(Editor, {
      toolbar: toolbar,
      defaultEditorState: editorStateContent,
      onBlur: this.updateElement.bind(this),
      wrapperClassName: "demo-wrapper",
      editorClassName: "demo-editor",
      onEditorStateChange: this.onEditorStateChange.bind(this, 0, "content"),
      stripPastedStyles: true
    })), this.props.element.hasOwnProperty("file_path") && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "fileSelect"
    }, "Choose file:"), /*#__PURE__*/_react.default.createElement("select", {
      id: "fileSelect",
      className: "form-control",
      defaultValue: this.props.element.file_path,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, "file_path", "value")
    }, this_files.map(file => {
      const this_key = `file_${file.id}`;
      return /*#__PURE__*/_react.default.createElement("option", {
        value: file.id,
        key: this_key
      }, file.file_name);
    }))), this.props.element.hasOwnProperty("href") && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement(_reactTextareaAutosize.default, {
      type: "text",
      className: "form-control",
      defaultValue: this.props.element.href,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, "href", "value")
    })), this.props.element.hasOwnProperty("fileupload") && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "fileInput"
    }, "Upload image:"), /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-file"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "fileInput",
      style: {
        cursor: "pointer"
      },
      className: "custom-file-input",
      type: "file",
      accept: "image/*",
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, "base64", "files")
    }), /*#__PURE__*/_react.default.createElement("label", {
      style: {
        cursor: "pointer"
      },
      className: "custom-file-label",
      htmlFor: "fileInput"
    }, !!this.props.element && !!this.props.element.file && this.props.element.file.name)), this.state.isFileValid && /*#__PURE__*/_react.default.createElement("p", {
      className: "error"
    }, this.uploadImageValidaion), /*#__PURE__*/_react.default.createElement("p", null, "Supported file format: JPEG, JPG, PNG, SVG. Max file size: 1MB.")), this.props.element.hasOwnProperty("src") && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "srcInput"
    }, "Link to:"), /*#__PURE__*/_react.default.createElement("input", {
      id: "srcInput",
      type: "text",
      className: "form-control",
      defaultValue: this.props.element.src,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, "src", "value")
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "do-center",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_checked_center,
      value: true,
      onChange: this.editElementProp.bind(this, "center", "checked")
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "do-center"
    }, "Center?"))), /*#__PURE__*/_react.default.createElement("div", {
      className: "row"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "col-sm-3"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "elementWidth"
    }, "Width:"), /*#__PURE__*/_react.default.createElement("input", {
      id: "elementWidth",
      type: "text",
      className: "form-control",
      defaultValue: this.props.element.width,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, "width", "value")
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "col-sm-3"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "elementHeight"
    }, "Height:"), /*#__PURE__*/_react.default.createElement("input", {
      id: "elementHeight",
      type: "text",
      className: "form-control",
      defaultValue: this.props.element.height,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, "height", "value")
    })))), this.props.element.hasOwnProperty("label") && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", null, "Display Label"), /*#__PURE__*/_react.default.createElement(Editor, {
      toolbar: toolbar,
      defaultEditorState: editorStateLabel,
      onBlur: this.updateElement.bind(this),
      onEditorStateChange: this.onEditorStateChange.bind(this, 0, "label"),
      stripPastedStyles: true
    }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "is-required",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_checked,
      value: true,
      onChange: this.editElementProp.bind(this, "required", "checked")
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "is-required"
    }, "Required")), /*#__PURE__*/_react.default.createElement("br", null), canHaveEmailToValidate && /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "isEmail",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_isEmail_checked,
      value: true,
      onChange: this.editElementProp.bind(this, "isEmail", "checked")
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "isEmail"
    }, "Validate Email")), canHaveMobileToValidate && /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "isMobile",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_isMobile_checked,
      value: true,
      onChange: this.editElementProp.bind(this, "isMobile", "checked")
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "isMobile"
    }, "Validate Mobile")), canHavePatternsToValidate && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "inputPattern"
    }, "Regular Expression Pattern"), /*#__PURE__*/_react.default.createElement("div", {
      className: "row"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "col-sm-12"
    }, /*#__PURE__*/_react.default.createElement("input", {
      className: "form-control",
      style: {
        width: "100%"
      },
      type: "text",
      id: "inputPattern",
      placeholder: "Enter regex pattern",
      defaultValue: this.props.element.inputPattern,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, "inputPattern", "value")
    })))), canHaveLengthToValidate && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "inputMin"
    }, "Min length"), /*#__PURE__*/_react.default.createElement("div", {
      className: "row"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "col-sm-12"
    }, /*#__PURE__*/_react.default.createElement("input", {
      className: "form-control",
      style: {
        width: "100%"
      },
      type: "number",
      id: "inputMin",
      placeholder: "Enter min allowed number",
      defaultValue: this.props.element.inputMin,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, "inputMin", "value")
    })))), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "inputMax"
    }, "Max length"), /*#__PURE__*/_react.default.createElement("div", {
      className: "row"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "col-sm-12"
    }, /*#__PURE__*/_react.default.createElement("input", {
      className: "form-control",
      style: {
        width: "100%"
      },
      type: "number",
      id: "inputMax",
      placeholder: "Enter max allowed number",
      defaultValue: this.props.element.inputMax,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, "inputMax", "value")
    }))))), this.props.element.hasOwnProperty("readOnly") && /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "is-read-only",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_read_only,
      value: true,
      onChange: this.editElementProp.bind(this, "readOnly", "checked")
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "is-read-only"
    }, "Read only")), this.props.element.hasOwnProperty("defaultToday") && /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "is-default-to-today",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_default_today,
      value: true,
      onChange: this.editElementProp.bind(this, "defaultToday", "checked")
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "is-default-to-today"
    }, "Default to Today?")), this.props.element.hasOwnProperty("showTimeSelect") && /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "show-time-select",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_show_time_select,
      value: true,
      onChange: this.editElementProp.bind(this, "showTimeSelect", "checked")
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "show-time-select"
    }, "Show Time Select?")), this_show_time_select && this.props.element.hasOwnProperty("showTimeSelectOnly") && /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "show-time-select-only",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_show_time_select_only,
      value: true,
      onChange: this.editElementProp.bind(this, "showTimeSelectOnly", "checked")
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "show-time-select-only"
    }, "Show Time Select Only?")), (this.state.element.element === "RadioButtons" || this.state.element.element === "Checkboxes") && canHaveDisplayHorizontal && /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "display-horizontal",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_checked_inline,
      value: true,
      onChange: this.editElementProp.bind(this, "inline", "checked")
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "display-horizontal"
    }, "Display horizonal"))), this.state.element.element === "Signature" && this.props.element.readOnly ? /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "variableKey"
    }, "Variable Key:"), /*#__PURE__*/_react.default.createElement("input", {
      id: "variableKey",
      type: "text",
      className: "form-control",
      defaultValue: this.props.element.variableKey,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, "variableKey", "value")
    }), /*#__PURE__*/_react.default.createElement("p", {
      className: "help-block"
    }, "This will give the element a key that can be used to replace the content with a runtime value.")) : /*#__PURE__*/_react.default.createElement("div", null), canHavePageBreakBefore && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label"
    }, "Print Options"), /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "page-break-before-element",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_checked_page_break,
      value: true,
      onChange: this.editElementProp.bind(this, "pageBreakBefore", "checked")
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "page-break-before-element"
    }, "Page Break Before Element?"))), canHaveAlternateForm && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label"
    }, "Alternate/Signature Page"), /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "display-on-alternate",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_checked_alternate_form,
      value: true,
      onChange: this.editElementProp.bind(this, "alternateForm", "checked")
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "display-on-alternate"
    }, "Display on alternate/signature Page?"))), this.props.element.hasOwnProperty("step") && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group-range"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "rangeStep"
    }, "Step"), /*#__PURE__*/_react.default.createElement("input", {
      id: "rangeStep",
      type: "number",
      className: "form-control",
      defaultValue: this.props.element.step,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, "step", "value")
    }))), this.props.element.hasOwnProperty("min_value") && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group-range"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "rangeMin"
    }, "Min"), /*#__PURE__*/_react.default.createElement("input", {
      id: "rangeMin",
      type: "number",
      className: "form-control",
      defaultValue: this.props.element.min_value,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, "min_value", "value")
    }), /*#__PURE__*/_react.default.createElement("input", {
      type: "text",
      className: "form-control",
      defaultValue: this.props.element.min_label,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, "min_label", "value")
    }))), this.props.element.hasOwnProperty("max_value") && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group-range"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "rangeMax"
    }, "Max"), /*#__PURE__*/_react.default.createElement("input", {
      id: "rangeMax",
      type: "number",
      className: "form-control",
      defaultValue: this.props.element.max_value,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, "max_value", "value")
    }), /*#__PURE__*/_react.default.createElement("input", {
      type: "text",
      className: "form-control",
      defaultValue: this.props.element.max_label,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, "max_label", "value")
    }))), this.props.element.hasOwnProperty("default_value") && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group-range"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "defaultSelected"
    }, "Default Selected"), /*#__PURE__*/_react.default.createElement("input", {
      id: "defaultSelected",
      type: "number",
      className: "form-control",
      defaultValue: this.props.element.default_value,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, "default_value", "value")
    }))), this.props.element.hasOwnProperty("static") && this.props.element.static && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label"
    }, "Text Style"), /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "do-bold",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_checked_bold,
      value: true,
      onChange: this.editElementProp.bind(this, "bold", "checked")
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "do-bold"
    }, "Bold")), /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-control custom-checkbox"
    }, /*#__PURE__*/_react.default.createElement("input", {
      id: "do-italic",
      className: "custom-control-input",
      type: "checkbox",
      checked: this_checked_italic,
      value: true,
      onChange: this.editElementProp.bind(this, "italic", "checked")
    }), /*#__PURE__*/_react.default.createElement("label", {
      className: "custom-control-label",
      htmlFor: "do-italic"
    }, "Italic"))), this.props.element.showDescription && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "questionDescription"
    }, "Description"), /*#__PURE__*/_react.default.createElement(_reactTextareaAutosize.default, {
      type: "text",
      className: "form-control",
      id: "questionDescription",
      defaultValue: this.props.element.description,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, "description", "value")
    })), this.props.showCorrectColumn && this.props.element.canHaveAnswer && !this.props.element.hasOwnProperty("options") && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "correctAnswer"
    }, "Correct Answer"), /*#__PURE__*/_react.default.createElement("input", {
      id: "correctAnswer",
      type: "text",
      className: "form-control",
      defaultValue: this.props.element.correct,
      onBlur: this.updateElement.bind(this),
      onChange: this.editElementProp.bind(this, "correct", "value")
    })), this.props.element.canPopulateFromApi && this.props.element.hasOwnProperty("options") && /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("label", {
      className: "control-label",
      htmlFor: "optionsApiUrl"
    }, "Populate Options from API"), /*#__PURE__*/_react.default.createElement("div", {
      className: "row"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "col-sm-6"
    }, /*#__PURE__*/_react.default.createElement("input", {
      className: "form-control",
      style: {
        width: "100%"
      },
      type: "text",
      id: "optionsApiUrl",
      placeholder: "http://localhost:8080/api/optionsdata"
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "col-sm-6"
    }, /*#__PURE__*/_react.default.createElement("button", {
      onClick: this.addOptions.bind(this),
      className: "btn btn-success"
    }, "Populate")))), this.props.element.hasOwnProperty("options") && /*#__PURE__*/_react.default.createElement(_dynamicOptionList.default, {
      showCorrectColumn: this.props.showCorrectColumn,
      canHaveOptionCorrect: canHaveOptionCorrect,
      canHaveOptionValue: canHaveOptionValue,
      data: this.props.preview.state.data,
      updateElement: this.props.updateElement,
      preview: this.props.preview,
      element: this.props.element,
      key: this.props.element.options.length
    }), this.state.previewVisible && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
      className: `${modalClass} `
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "modal-dialog modal-lg "
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "modal-content border border-light p-3 mb-4"
    }, /*#__PURE__*/_react.default.createElement("div", {
      style: {
        height: 500
      }
    }, /*#__PURE__*/_react.default.createElement(FileRobotImageEditor, {
      source: this.state.base64 || "",
      closeAfterSave: true,
      defaultSavedImageName: 'uploadedImage',
      avoidChangesNotSavedAlertOnLeave: true,
      onSave: (editedImageObject, designState) => this.changeEditImage(this, editedImageObject, designState),
      onClose: () => this.setState({
        previewVisible: false
      }),
      Crop: {
        ratio: 'custom'
      },
      onBeforeSave: () => false,
      tabsIds: ['Adjust', 'Resize'] // or {['Adjust', 'Annotate', 'Watermark']}
      ,
      defaultTabId: 'Adjust' // or 'Annotate'
      ,
      defaultToolId: 'Crop' // or 'Text'

    })))))));
  }

}

exports.default = FormElementsEdit;
FormElementsEdit.defaultProps = {
  className: "edit-element-fields"
};