"use strict";

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

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

var _reactSelect = _interopRequireDefault(require("react-select"));

var _reactSignatureCanvas = _interopRequireDefault(require("react-signature-canvas"));

var _starRating = _interopRequireDefault(require("./star-rating"));

var _headerBar = _interopRequireDefault(require("./header-bar"));

var _datePicker = _interopRequireDefault(require("./date-picker"));

var _componentHeader = _interopRequireDefault(require("./component-header"));

var _componentLabel = _interopRequireDefault(require("./component-label"));

var _CustomSignature = _interopRequireDefault(require("../components/CustomSignature"));

var _CustomDragSignature = _interopRequireDefault(require("../components/CustomDragSignature"));

var _myxss = _interopRequireDefault(require("./myxss"));

var _store = _interopRequireDefault(require("../stores/store"));

var _CustomImageUpload = _interopRequireDefault(require("../components/ImageUpload/CustomImageUpload"));

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

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; }

const FormElements = {};

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

    _defineProperty(this, "displayImage", e => {
      const self = this;
      const target = e.target;
      self.setState({
        imageValidation: false
      });
      let file;
      let reader;

      if (target.files && target.files.length) {
        file = target.files[0]; // eslint-disable-next-line no-undef

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

        if (1024 * 1024 * 1 < file.size) {
          self.setState({
            imageValidation: true
          });
          return;
        }

        reader.onloadend = () => {
          self.setState({
            img: reader.result
          });
        };
      }
    });

    this.state = {
      hasClicked: false,
      img: "",
      imageValidation: false
    };
  }

  render() {
    // const headerClasses = `dynamic-input ${this.props.data.element}-input`;
    const {
      defaultValue
    } = this.props;
    const {
      base64
    } = this.props.data;
    let classNames = "static ml-10";

    if (this.props.data.bold) {
      classNames += " bold";
    }

    if (this.props.data.italic) {
      classNames += " italic";
    }

    let baseClasses = "SortableItem rfb-item";

    if (this.state.hasClicked) {
      baseClasses += " has-clicked";
    }

    if (this.props.data.pageBreakBefore) {
      baseClasses += " alwaysbreak";
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses,
      onClick: () => this.setState({
        hasClicked: !this.state.hasClicked
      })
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, _extends({}, this.props, {
      hasClicked: this.state.hasClicked
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group d-flex"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "image-upload-container w-75"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "align-items-center"
    }, /*#__PURE__*/_react.default.createElement("div", null, !!base64 && /*#__PURE__*/_react.default.createElement("img", {
      className: "mw-100",
      src: base64
    })), /*#__PURE__*/_react.default.createElement("h4", {
      className: `${classNames} mt-3`,
      dangerouslySetInnerHTML: {
        __html: _myxss.default.process(this.props.data.label)
      }
    }))), /*#__PURE__*/_react.default.createElement("div", {
      className: "d-flex w-25 text-right justify-content-end"
    }, /*#__PURE__*/_react.default.createElement("h5", {
      className: `${classNames} `,
      dangerouslySetInnerHTML: {
        __html: _myxss.default.process(this.props.data.content)
      }
    }))));
  }

}

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

    _defineProperty(this, "displayImage", e => {
      const self = this;
      const target = e.target;
      let file;
      let reader;

      if (target.files && target.files.length) {
        file = target.files[0]; // eslint-disable-next-line no-undef

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

        reader.onloadend = () => {
          self.setState({
            img: reader.result
          });
        };
      }
    });

    this.state = {
      hasClicked: false,
      img: ""
    };
  }

  render() {
    // const headerClasses = `dynamic-input ${this.props.data.element}-input`;
    const {
      defaultValue
    } = this.props;
    const fileInputStyle = this.state.img ? {
      display: "none"
    } : null;
    const {
      base64
    } = this.props.data;
    let classNames = "static ml-10";

    if (this.props.data.bold) {
      classNames += " bold";
    }

    if (this.props.data.italic) {
      classNames += " italic";
    }

    let baseClasses = "SortableItem rfb-item";

    if (this.state.hasClicked) {
      baseClasses += " has-clicked";
    }

    if (this.props.data.pageBreakBefore) {
      baseClasses += " alwaysbreak";
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses,
      onClick: () => this.setState({
        hasClicked: !this.state.hasClicked
      })
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, _extends({}, this.props, {
      hasClicked: this.state.hasClicked
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group d-flex"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "align-items-center w-100 text-center justify-content-center"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "w-100 text-left"
    }, !!base64 && /*#__PURE__*/_react.default.createElement("img", {
      className: "mw-100",
      src: base64
    })), /*#__PURE__*/_react.default.createElement("h4", {
      className: `${classNames} mt-3`,
      dangerouslySetInnerHTML: {
        __html: _myxss.default.process(this.props.data.content)
      }
    }))));
  }

}

class Paragraph extends _react.default.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasClicked: false
    };
  }

  render() {
    let classNames = "static";

    if (this.props.data.bold) {
      classNames += " bold";
    }

    if (this.props.data.italic) {
      classNames += " italic";
    }

    let baseClasses = "SortableItem rfb-item";

    if (this.props.data.pageBreakBefore) {
      baseClasses += " alwaysbreak";
    }

    if (this.state.hasClicked) {
      baseClasses += " has-clicked";
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses,
      onClick: () => this.setState({
        hasClicked: !this.state.hasClicked
      })
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, _extends({}, this.props, {
      hasClicked: this.state.hasClicked
    })), /*#__PURE__*/_react.default.createElement("p", {
      className: classNames,
      dangerouslySetInnerHTML: {
        __html: _myxss.default.process(this.props.data.content)
      }
    }));
  }

}

class Label extends _react.default.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasClicked: false
    };
  }

  render() {
    let classNames = "static";

    if (this.props.data.bold) {
      classNames += " bold";
    }

    if (this.props.data.italic) {
      classNames += " italic";
    }

    let baseClasses = "SortableItem rfb-item";

    if (this.props.data.pageBreakBefore) {
      baseClasses += " alwaysbreak";
    }

    if (this.state.hasClicked) {
      baseClasses += " has-clicked";
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses,
      onClick: () => this.setState({
        hasClicked: !this.state.hasClicked
      })
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, _extends({}, this.props, {
      hasClicked: this.state.hasClicked
    })), /*#__PURE__*/_react.default.createElement("label", {
      className: classNames,
      dangerouslySetInnerHTML: {
        __html: _myxss.default.process(this.props.data.content)
      }
    }));
  }

}

class LineBreak extends _react.default.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasClicked: false
    };
  }

  render() {
    let baseClasses = "SortableItem rfb-item";

    if (this.props.data.pageBreakBefore) {
      baseClasses += " alwaysbreak";
    }

    if (this.state.hasClicked) {
      baseClasses += " has-clicked";
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses,
      onClick: () => this.setState({
        hasClicked: !this.state.hasClicked
      })
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, _extends({}, this.props, {
      hasClicked: this.state.hasClicked
    })), /*#__PURE__*/_react.default.createElement("hr", null));
  }

}

class TextInput extends _react.default.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasClicked: false
    };
    this.inputField = /*#__PURE__*/_react.default.createRef();
  }

  render() {
    const props = {};
    props.type = "text";
    props.className = "form-control";
    props.name = this.props.data.field_name;

    if (this.props.mutable) {
      props.defaultValue = this.props.defaultValue;
      props.ref = this.inputField;
    }

    let baseClasses = "SortableItem rfb-item";

    if (this.props.data.pageBreakBefore) {
      baseClasses += " alwaysbreak";
    }

    if (this.state.hasClicked) {
      baseClasses += " has-clicked";
    }

    if (this.props.read_only) {
      props.disabled = "disabled";
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses,
      onClick: () => this.setState({
        hasClicked: !this.state.hasClicked
      })
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, _extends({}, this.props, {
      hasClicked: this.state.hasClicked
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement("input", props)));
  }

}

class NumberInput extends _react.default.Component {
  constructor(props) {
    super(props);
    this.inputField = /*#__PURE__*/_react.default.createRef();
    this.state = {
      hasClicked: false
    };
  }

  render() {
    const props = {};
    props.type = "number";
    props.className = "form-control";
    props.name = this.props.data.field_name;

    if (this.props.mutable) {
      props.defaultValue = this.props.defaultValue;
      props.ref = this.inputField;
    }

    if (this.props.read_only) {
      props.disabled = "disabled";
    }

    let baseClasses = "SortableItem rfb-item";

    if (this.props.data.pageBreakBefore) {
      baseClasses += " alwaysbreak";
    }

    if (this.state.hasClicked) {
      baseClasses += " has-clicked";
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses,
      onClick: () => this.setState({
        hasClicked: !this.state.hasClicked
      })
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, _extends({}, this.props, {
      hasClicked: this.state.hasClicked
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement("input", props)));
  }

}

class TextArea extends _react.default.Component {
  constructor(props) {
    super(props);
    this.inputField = /*#__PURE__*/_react.default.createRef();
    this.state = {
      hasClicked: false
    };
  }

  render() {
    const props = {};
    props.className = "form-control";
    props.name = this.props.data.field_name;

    if (this.props.read_only) {
      props.disabled = "disabled";
    }

    if (this.props.mutable) {
      props.defaultValue = this.props.defaultValue;
      props.ref = this.inputField;
    }

    let baseClasses = "SortableItem rfb-item";

    if (this.props.data.pageBreakBefore) {
      baseClasses += " alwaysbreak";
    }

    if (this.state.hasClicked) {
      baseClasses += " has-clicked";
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses,
      onClick: () => this.setState({
        hasClicked: !this.state.hasClicked
      })
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, _extends({}, this.props, {
      hasClicked: this.state.hasClicked
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement("textarea", props)));
  }

}

class Dropdown extends _react.default.Component {
  constructor(props) {
    super(props);
    this.inputField = /*#__PURE__*/_react.default.createRef();
    this.state = {
      hasClicked: false
    };
  }

  render() {
    const props = {};
    props.className = "form-control";
    props.name = this.props.data.field_name;

    if (this.props.mutable) {
      props.defaultValue = this.props.defaultValue;
      props.ref = this.inputField;
    }

    if (this.props.read_only) {
      props.disabled = "disabled";
    }

    let baseClasses = "SortableItem rfb-item";

    if (this.props.data.pageBreakBefore) {
      baseClasses += " alwaysbreak";
    }

    if (this.state.hasClicked) {
      baseClasses += " has-clicked";
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses,
      onClick: () => this.setState({
        hasClicked: !this.state.hasClicked
      })
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, _extends({}, this.props, {
      hasClicked: this.state.hasClicked
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("select", props, /*#__PURE__*/_react.default.createElement("option", {
      value: "nothingSelected",
      key: "default"
    }, "Select an Option"), this.props.data.options.map(option => {
      const this_key = `preview_${option.key}`;
      return /*#__PURE__*/_react.default.createElement("option", {
        value: option.value,
        key: this_key
      }, option.text);
    })))));
  }

}

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

    _defineProperty(this, "saveSignature", style => {
      const {
        value,
        defaultValue
      } = this.state;
      const obj = {
        value: defaultValue,
        style
      };
      value.push(obj);
      this.setState({
        isDragable: false,
        value,
        defaultValue: ''
      });
      this.inputField.current = value;
    });

    this.state = {
      defaultValue: '',
      hasClicked: false,
      show: false,
      isDragable: true,
      value: props.defaultValue || []
    };
    this.inputField = /*#__PURE__*/_react.default.createRef();
  }

  render() {
    const {
      defaultValue,
      isDragable,
      value
    } = this.state;
    const {
      read_only
    } = this.props;
    const props = {};
    props.type = "hidden";
    props.name = this.props.data.field_name;

    if (this.props.mutable) {
      props.defaultValue = defaultValue; // props.ref = this.inputField;
    }

    let baseClasses = "SortableItem rfb-item";

    if (this.props.data.pageBreakBefore) {
      baseClasses += " alwaysbreak";
    }

    if (this.state.hasClicked) {
      baseClasses += " has-clicked";
    }

    if (typeof window != 'undefined') {
      return /*#__PURE__*/_react.default.createElement("div", {
        className: baseClasses,
        onClick: () => this.setState({
          hasClicked: !this.state.hasClicked
        })
      }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, _extends({}, this.props, {
        hasClicked: this.state.hasClicked
      })), /*#__PURE__*/_react.default.createElement("div", {
        className: "form-group",
        style: {
          position: 'relative'
        }
      }, /*#__PURE__*/_react.default.createElement("button", {
        type: "button",
        disabled: read_only,
        className: "btn btn-primary",
        onClick: () => {
          this.setState({
            show: true
          });
        }
      }, /*#__PURE__*/_react.default.createElement("span", null, "Add Signature Field "), " ", /*#__PURE__*/_react.default.createElement("i", {
        className: "fas fa-edit ml-2"
      })), !!Array.isArray(value) && value.map((v, i) => v.value && /*#__PURE__*/_react.default.createElement("div", {
        className: "mydiv",
        style: { ...v.style
        }
      }, /*#__PURE__*/_react.default.createElement("img", {
        className: "signature-img",
        src: v.value,
        style: { ...v.style
        }
      }))), !!defaultValue && isDragable && /*#__PURE__*/_react.default.createElement(_CustomDragSignature.default, {
        index: 0,
        defaultValue: defaultValue,
        onSave: this.saveSignature,
        isDragable: isDragable,
        read_only: read_only
      }), /*#__PURE__*/_react.default.createElement("input", props)), this.state.show && /*#__PURE__*/_react.default.createElement(_CustomSignature.default, {
        onCancel: () => this.setState({
          show: false
        }),
        updateSignature: signature => {
          this.setState({
            defaultValue: signature,
            show: false,
            isDragable: true
          });
        }
      }));
    } else return null;
  }

}

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

    _defineProperty(this, "handleChange", e => {
      this.setState({
        value: e || []
      });
    });

    this.inputField = /*#__PURE__*/_react.default.createRef();
    const {
      defaultValue,
      data
    } = props;
    this.state = {
      value: this.getDefaultValue(defaultValue, data.options),
      hasClicked: false
    };
  }

  getDefaultValue(defaultValue, options) {
    if (defaultValue) {
      if (typeof defaultValue === "string") {
        const vals = defaultValue.split(",").map(x => x.trim());
        return options.filter(x => vals.indexOf(x.value) > -1);
      }

      return options.filter(x => defaultValue.indexOf(x.value) > -1);
    }

    return [];
  } // state = { value: this.props.defaultValue !== undefined ? this.props.defaultValue.split(',') : [] };


  render() {
    const options = this.props.data.options.map(option => {
      option.label = option.text;
      return option;
    });
    const props = {};
    props.isMulti = true;
    props.name = this.props.data.field_name;
    props.onChange = this.handleChange;
    props.options = options;

    if (!this.props.mutable) {
      props.value = options[0].text;
    } // to show a sample of what tags looks like


    if (this.props.mutable) {
      props.isDisabled = this.props.read_only;
      props.value = this.state.value;
      props.ref = this.inputField;
    }

    let baseClasses = "SortableItem rfb-item";

    if (this.props.data.pageBreakBefore) {
      baseClasses += " alwaysbreak";
    }

    if (this.state.hasClicked) {
      baseClasses += " has-clicked";
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses,
      onClick: () => this.setState({
        hasClicked: !this.state.hasClicked
      })
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, _extends({}, this.props, {
      hasClicked: this.state.hasClicked
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement(_reactSelect.default, props)));
  }

}

class Checkboxes extends _react.default.Component {
  constructor(props) {
    super(props);
    this.options = {};
    this.state = {
      hasClicked: false
    };
  }

  render() {
    const self = this;
    let classNames = "custom-control custom-checkbox";

    if (this.props.data.inline) {
      classNames += " option-inline";
    }

    let baseClasses = "SortableItem rfb-item";

    if (this.props.data.pageBreakBefore) {
      baseClasses += " alwaysbreak";
    }

    if (this.state.hasClicked) {
      baseClasses += " has-clicked";
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses,
      onClick: () => this.setState({
        hasClicked: !this.state.hasClicked
      })
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, _extends({}, this.props, {
      hasClicked: this.state.hasClicked
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement(_componentLabel.default, _extends({
      className: "form-label"
    }, this.props)), /*#__PURE__*/_react.default.createElement("div", null, this.props.data.options.map(option => {
      const this_key = `preview_${option.key}`;
      const props = {};
      props.name = `option_${option.key}`;
      props.type = "checkbox";
      props.value = option.value;

      if (self.props.mutable) {
        props.defaultChecked = self.props.defaultValue !== undefined && self.props.defaultValue.indexOf(option.key) > -1;
      }

      if (this.props.read_only) {
        props.disabled = "disabled";
      }

      return /*#__PURE__*/_react.default.createElement("div", {
        className: classNames,
        key: this_key
      }, /*#__PURE__*/_react.default.createElement("input", _extends({
        id: "fid_" + this_key,
        className: "custom-control-input",
        ref: c => {
          if (c && self.props.mutable) {
            self.options[`child_ref_${option.key}`] = c;
          }
        }
      }, props)), /*#__PURE__*/_react.default.createElement("label", {
        className: "custom-control-label",
        htmlFor: "fid_" + this_key
      }, option.text));
    }))));
  }

}

class RadioButtons extends _react.default.Component {
  constructor(props) {
    super(props);
    this.options = {};
    this.state = {
      hasClicked: false
    };
  }

  render() {
    const self = this;
    let classNames = "custom-control custom-radio";

    if (this.props.data.inline) {
      classNames += " option-inline";
    }

    let baseClasses = "SortableItem rfb-item";

    if (this.props.data.pageBreakBefore) {
      baseClasses += " alwaysbreak";
    }

    if (this.state.hasClicked) {
      baseClasses += " has-clicked";
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses,
      onClick: () => this.setState({
        hasClicked: !this.state.hasClicked
      })
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, _extends({}, this.props, {
      hasClicked: this.state.hasClicked
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement(_componentLabel.default, _extends({
      className: "form-label"
    }, this.props)), /*#__PURE__*/_react.default.createElement("div", null, this.props.data.options.map(option => {
      const this_key = `preview_${option.key}`;
      const props = {};
      props.name = self.props.data.field_name;
      props.type = "radio";
      props.value = option.value;

      if (self.props.mutable) {
        props.defaultChecked = self.props.defaultValue !== undefined && (self.props.defaultValue.indexOf(option.key) > -1 || self.props.defaultValue.indexOf(option.value) > -1);
      }

      if (this.props.read_only) {
        props.disabled = "disabled";
      }

      return /*#__PURE__*/_react.default.createElement("div", {
        className: classNames,
        key: this_key
      }, /*#__PURE__*/_react.default.createElement("input", _extends({
        id: "fid_" + this_key,
        className: "custom-control-input",
        ref: c => {
          if (c && self.props.mutable) {
            self.options[`child_ref_${option.key}`] = c;
          }
        }
      }, props)), /*#__PURE__*/_react.default.createElement("label", {
        className: "custom-control-label",
        htmlFor: "fid_" + this_key
      }, option.text));
    }))));
  }

}

class Image extends _react.default.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasClicked: false
    };
  }

  render() {
    const style = this.props.data.center ? {
      textAlign: "center"
    } : null;
    let baseClasses = "SortableItem rfb-item";

    if (this.props.data.pageBreakBefore) {
      baseClasses += " alwaysbreak";
    }

    if (this.state.hasClicked) {
      baseClasses += " has-clicked";
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses,
      onClick: () => this.setState({
        hasClicked: !this.state.hasClicked
      }),
      style: style
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, _extends({}, this.props, {
      hasClicked: this.state.hasClicked
    })), this.props.data.src && /*#__PURE__*/_react.default.createElement("img", {
      src: this.props.data.src,
      width: this.props.data.width,
      height: this.props.data.height
    }), !this.props.data.src && /*#__PURE__*/_react.default.createElement("div", {
      className: "no-image"
    }, "No Image"));
  }

}

class Rating extends _react.default.Component {
  constructor(props) {
    super(props);
    this.inputField = /*#__PURE__*/_react.default.createRef();
    this.state = {
      hasClicked: false
    };
  }

  render() {
    const props = {};
    props.name = this.props.data.field_name;
    props.ratingAmount = 5;

    if (this.props.mutable) {
      props.rating = this.props.defaultValue !== undefined ? parseFloat(this.props.defaultValue, 10) : 0;
      props.editing = true;
      props.disabled = this.props.read_only;
      props.ref = this.inputField;
    }

    let baseClasses = "SortableItem rfb-item";

    if (this.props.data.pageBreakBefore) {
      baseClasses += " alwaysbreak";
    }

    if (this.state.hasClicked) {
      baseClasses += " has-clicked";
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses,
      onClick: () => this.setState({
        hasClicked: !this.state.hasClicked
      })
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, _extends({}, this.props, {
      hasClicked: this.state.hasClicked
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement(_starRating.default, props)));
  }

}

class HyperLink extends _react.default.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasClicked: false
    };
  }

  render() {
    let baseClasses = "SortableItem rfb-item";

    if (this.props.data.pageBreakBefore) {
      baseClasses += " alwaysbreak";
    }

    if (this.state.hasClicked) {
      baseClasses += " has-clicked";
    }

    const inputVal = this.props.defaultValue;
    const httpLink = inputVal ? inputVal.toString().indexOf("http://") == -1 && inputVal.toString().indexOf("https://") == -1 ? `http://${inputVal}` : `${inputVal}` : '';
    return /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses,
      onClick: () => this.setState({
        hasClicked: !this.state.hasClicked
      })
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, _extends({}, this.props, {
      hasClicked: this.state.hasClicked
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group col-md-12"
    }, /*#__PURE__*/_react.default.createElement(_componentLabel.default, _extends({
      className: "col-md-12 pl-0"
    }, this.props)), /*#__PURE__*/_react.default.createElement("a", {
      target: "_blank",
      href: httpLink
    }, inputVal)));
  }

}

class Download extends _react.default.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasClicked: false
    };
  }

  render() {
    let baseClasses = "SortableItem rfb-item";

    if (this.props.data.pageBreakBefore) {
      baseClasses += " alwaysbreak";
    }

    if (this.state.hasClicked) {
      baseClasses += " has-clicked";
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses,
      onClick: () => this.setState({
        hasClicked: !this.state.hasClicked
      })
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, _extends({}, this.props, {
      hasClicked: this.state.hasClicked
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("a", {
      href: `${this.props.download_path}?id=${this.props.data.file_path}`
    }, this.props.data.content)));
  }

}

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

    _defineProperty(this, "displayImage", e => {
      const self = this;
      const target = e.target;
      let file;
      let reader;

      if (target.files && target.files.length) {
        file = target.files[0]; // eslint-disable-next-line no-undef

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

        reader.onloadend = () => {
          self.setState({
            img: reader.result
          });
        };
      }
    });

    _defineProperty(this, "clearImage", () => {
      this.setState({
        img: null,
        hasClicked: false
      });
    });

    this.state = {
      img: null,
      hasClicked: false
    };
  }

  render() {
    let baseClasses = "SortableItem rfb-item";
    const name = this.props.data.field_name;
    const fileInputStyle = this.state.img ? {
      display: "none"
    } : null;

    if (this.props.data.pageBreakBefore) {
      baseClasses += " alwaysbreak";
    }

    if (this.state.hasClicked) {
      baseClasses += " has-clicked";
    }

    let sourceDataURL;

    if (this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0) {
      if (this.props.defaultValue.indexOf(name > -1)) {
        sourceDataURL = this.props.defaultValue;
      } else {
        sourceDataURL = `data:image/png;base64,${this.props.defaultValue}`;
      }
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses,
      onClick: () => this.setState({
        hasClicked: !this.state.hasClicked
      })
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, _extends({}, this.props, {
      hasClicked: this.state.hasClicked
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), this.props.read_only === true && this.props.defaultValue && this.props.defaultValue.length > 0 ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
      src: sourceDataURL
    })) : /*#__PURE__*/_react.default.createElement("div", {
      className: "image-upload-container"
    }, /*#__PURE__*/_react.default.createElement("div", {
      style: fileInputStyle
    }, /*#__PURE__*/_react.default.createElement("input", {
      name: name,
      type: "file",
      accept: "image/*",
      capture: "camera",
      className: "image-upload",
      onChange: this.displayImage
    }), /*#__PURE__*/_react.default.createElement("div", {
      className: "image-upload-control"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "btn btn-default"
    }, /*#__PURE__*/_react.default.createElement("i", {
      className: "fas fa-camera"
    }), " Upload Photo"), /*#__PURE__*/_react.default.createElement("p", null, "Select an image from your computer or device."))), this.state.img && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
      src: this.state.img,
      height: "100",
      className: "image-upload-preview"
    }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("div", {
      className: "btn btn-image-clear",
      onClick: this.clearImage
    }, /*#__PURE__*/_react.default.createElement("i", {
      className: "fas fa-times"
    }), " Clear Photo")))));
  }

}

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

    _defineProperty(this, "changeValue", e => {
      const {
        target
      } = e;
      this.setState({
        value: target.value,
        hasClicked: false
      });
    });

    this.inputField = /*#__PURE__*/_react.default.createRef();
    this.state = {
      value: props.defaultValue !== undefined ? parseInt(props.defaultValue, 10) : parseInt(props.data.default_value, 10),
      hasClicked: false
    };
  }

  render() {
    const props = {};
    const name = this.props.data.field_name;
    props.type = "range";
    props.list = `tickmarks_${name}`;
    props.min = this.props.data.min_value;
    props.max = this.props.data.max_value;
    props.step = this.props.data.step;
    props.value = this.state.value;
    props.change = this.changeValue;

    if (this.props.mutable) {
      props.ref = this.inputField;
    }

    const datalist = [];

    for (let i = parseInt(props.min_value, 10); i <= parseInt(props.max_value, 10); i += parseInt(props.step, 10)) {
      datalist.push(i);
    }

    const oneBig = 100 / (datalist.length - 1);

    const _datalist = datalist.map((d, idx) => /*#__PURE__*/_react.default.createElement("option", {
      key: `${props.list}_${idx}`
    }, d));

    const visible_marks = datalist.map((d, idx) => {
      const option_props = {};
      let w = oneBig;

      if (idx === 0 || idx === datalist.length - 1) {
        w = oneBig / 2;
      }

      option_props.key = `${props.list}_label_${idx}`;
      option_props.style = {
        width: `${w}%`
      };

      if (idx === datalist.length - 1) {
        option_props.style = {
          width: `${w}%`,
          textAlign: "right"
        };
      }

      return /*#__PURE__*/_react.default.createElement("label", option_props, d);
    });
    let baseClasses = "SortableItem rfb-item";

    if (this.props.data.pageBreakBefore) {
      baseClasses += " alwaysbreak";
    }

    if (this.state.hasClicked) {
      baseClasses += " has-clicked";
    }

    return /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses,
      onClick: () => this.setState({
        hasClicked: !this.state.hasClicked
      })
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, _extends({}, this.props, {
      hasClicked: this.state.hasClicked
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement(_componentLabel.default, this.props), /*#__PURE__*/_react.default.createElement("div", {
      className: "range"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "clearfix"
    }, /*#__PURE__*/_react.default.createElement("span", {
      className: "float-left"
    }, this.props.data.min_label), /*#__PURE__*/_react.default.createElement("span", {
      className: "float-right"
    }, this.props.data.max_label))), /*#__PURE__*/_react.default.createElement("div", {
      className: "visible_marks"
    }, visible_marks), /*#__PURE__*/_react.default.createElement("input", {
      name: name,
      value: this.state.value,
      type: "hidden"
    }), /*#__PURE__*/_react.default.createElement("datalist", {
      id: props.list
    }, _datalist)));
  }

}

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

    _defineProperty(this, "displayImage", e => {
      const self = this;
      const target = e.target;
      let file;
      let reader;

      if (target.files && target.files.length) {
        file = target.files[0]; // eslint-disable-next-line no-undef

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

        reader.onloadend = () => {
          self.setState({
            sourceDataURL: reader.result,
            show: true,
            files: target.files
          });
        };
      }
    });

    _defineProperty(this, "clearImage", () => {
      this.setState({
        img: null,
        hasClicked: false,
        show: false
      });
    });

    _defineProperty(this, "toggleEditModal", value => {
      console.log('setShow --> ', value);
      this.setState({
        img: null,
        hasClicked: false,
        show: false,
        value
      });
    });

    this.inputField = /*#__PURE__*/_react.default.createRef();
    this.state = {
      value: props.defaultValue !== undefined ? props.defaultValue : '',
      hasClicked: false,
      sourceDataURL: '',
      img: '',
      show: false,
      files: ''
    };
  }

  render() {
    const {
      show,
      files,
      value
    } = this.state;
    const {
      read_only
    } = this.props;
    const fileInputStyle = this.state.img ? {
      display: "none"
    } : null;
    const name = this.props.data.field_name;
    let baseClasses = "SortableItem rfb-item";

    if (this.props.data.pageBreakBefore) {
      baseClasses += " alwaysbreak";
    }

    if (this.state.hasClicked) {
      baseClasses += " has-clicked";
    }

    let inputProps = {};
    inputProps.ref = this.inputField;
    inputProps.className = 'invisible-element';
    let fileName = '';

    if (value) {
      const splitName = value.split('/');
      fileName = splitName[splitName.length - 1];
    }

    console.log('filename -> ', value, fileName);
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
      className: baseClasses,
      onClick: () => this.setState({
        hasClicked: !this.state.hasClicked
      })
    }, /*#__PURE__*/_react.default.createElement(_componentHeader.default, _extends({}, this.props, {
      hasClicked: this.state.hasClicked
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "form-group"
    }, read_only === true ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("a", {
      href: value,
      target: "_blank"
    }, value)) : /*#__PURE__*/_react.default.createElement("div", {
      className: "image-upload-container"
    }, /*#__PURE__*/_react.default.createElement("div", {
      style: fileInputStyle,
      className: "form-group"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "custom-input-file-group"
    }, /*#__PURE__*/_react.default.createElement("input", {
      name: 'fileName',
      id: "fileName",
      multiple: true,
      type: "file",
      accept: ".png, .jpg, .jpeg, .docx, .pptx, .xlsx, .pdf",
      capture: "camera",
      className: "form-control file-input custom-file-input",
      onChange: this.displayImage
    }), /*#__PURE__*/_react.default.createElement("label", {
      htmlFor: "fileName",
      className: "custom-file-label"
    }, value ? fileName : 'Not File Choosen'), /*#__PURE__*/_react.default.createElement("input", _extends({
      name: name,
      value: value,
      hidden: true
    }, inputProps))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "Supported file format: JPEG, JPG, PNG, PDF, DOCX, PPTX, XLSX"), /*#__PURE__*/_react.default.createElement("p", null, "Max file size: 3MB"))), show && /*#__PURE__*/_react.default.createElement(_CustomImageUpload.default, {
      changeEditImage: this.changeEditImage,
      show: show,
      currentUser: _store.default.state.currentUser,
      setShow: this.toggleEditModal,
      files: files
    })))));
  }

}

FormElements.FileUpload = FileUpload;
FormElements.Header = Header;
FormElements.Footer = Footer;
FormElements.Paragraph = Paragraph;
FormElements.Label = Label;
FormElements.LineBreak = LineBreak;
FormElements.TextInput = TextInput;
FormElements.NumberInput = NumberInput;
FormElements.TextArea = TextArea;
FormElements.Dropdown = Dropdown;
FormElements.Signature = Signature;
FormElements.Checkboxes = Checkboxes;
FormElements.DatePicker = _datePicker.default;
FormElements.RadioButtons = RadioButtons;
FormElements.Image = Image;
FormElements.Rating = Rating;
FormElements.Tags = Tags;
FormElements.HyperLink = HyperLink;
FormElements.Download = Download;
FormElements.Camera = Camera;
FormElements.Range = Range;
var _default = FormElements;
exports.default = _default;