"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _isNumber = _interopRequireDefault(require("lodash/isNumber"));

var _isString = _interopRequireDefault(require("lodash/isString"));

var _field = require("@panneau/field");

var _core = require("@panneau/core");

var styles = {
  "formGroup": "panneau-field-code-formGroup"
};
/**
 *  Class: CodeField
 *
 *  @param {string,number,array} value
 *  @return {string} newValue
 */

var propTypes = {
  language: _propTypes.default.string,
  theme: _propTypes.default.string,
  name: _propTypes.default.string,
  label: _core.PropTypes.label,
  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
  width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
  height: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
  extensions: _propTypes.default.arrayOf(_propTypes.default.string),
  editorProps: _propTypes.default.object,
  // eslint-disable-line
  isJson: _propTypes.default.bool,
  onChange: _propTypes.default.func
};
var defaultProps = {
  language: 'javascript',
  theme: 'github',
  name: null,
  label: null,
  value: null,
  width: '100%',
  height: 300,
  isJson: true,
  extensions: [],
  editorProps: {
    $blockScrolling: Infinity
  },
  onChange: null
};

var CodeField =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(CodeField, _Component);
  (0, _createClass2.default)(CodeField, null, [{
    key: "parse",
    value: function parse(value) {
      if (typeof value === 'undefined' || value === null) {
        return value;
      }

      return (0, _isString.default)(value) || (0, _isNumber.default)(value) ? value : JSON.stringify(value, null, 4);
    }
  }]);

  function CodeField(props) {
    var _this;

    (0, _classCallCheck2.default)(this, CodeField);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(CodeField).call(this, props));
    _this.AceEditor = null;
    _this.brace = null;
    _this.importCanceled = false;
    _this.onChange = _this.onChange.bind((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)));
    _this.state = {
      ready: false,
      textValue: props.language === 'json' && props.isJson ? CodeField.parse(props.value) : null
    };
    return _this;
  }

  (0, _createClass2.default)(CodeField, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this2 = this;

      var _this$props = this.props,
          language = _this$props.language,
          theme = _this$props.theme,
          extensions = _this$props.extensions;
      import(
      /* webpackChunkName: "vendor/react-ace" */
      'react-ace').then(function (AceEditor) {
        _this2.AceEditor = AceEditor.default;
      }).then(function () {
        return import(
        /* webpackChunkName: "vendor/brace/mode/[request]" */
        "brace/mode/".concat(language));
      }).then(function () {
        return import(
        /* webpackChunkName: "vendor/brace/theme/[request]" */
        "brace/theme/".concat(theme));
      }).then(function () {
        return Promise.all(extensions.map(function (ext) {
          return import(
          /* webpackChunkName: "vendor/brace/ext/[request]" */
          "brace/ext/".concat(ext));
        }));
      }).then(function () {
        if (_this2.importCanceled) {
          return;
        }

        _this2.setState({
          ready: true
        });
      });
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.importCanceled = true;
    }
  }, {
    key: "onChange",
    value: function onChange(newValue) {
      var _this$props2 = this.props,
          language = _this$props2.language,
          onChange = _this$props2.onChange,
          isJson = _this$props2.isJson,
          value = _this$props2.value;

      if (language === 'json' && isJson) {
        this.setState({
          textValue: newValue
        }, function () {
          var val;

          try {
            val = JSON.parse(newValue);
          } catch (e) {
            val = value;
          }

          if (onChange) {
            onChange(val);
          }
        });
      } else if (onChange) {
        onChange(newValue);
      }
    }
  }, {
    key: "renderField",
    value: function renderField() {
      var _this$props3 = this.props,
          language = _this$props3.language,
          theme = _this$props3.theme,
          value = _this$props3.value,
          isJson = _this$props3.isJson,
          width = _this$props3.width,
          height = _this$props3.height,
          editorProps = _this$props3.editorProps,
          props = (0, _objectWithoutProperties2.default)(_this$props3, ["language", "theme", "value", "isJson", "width", "height", "editorProps"]);
      var textValue = this.state.textValue;
      var AceEditor = this.AceEditor;
      var val = language === 'json' && isJson ? textValue : CodeField.parse(value);
      var editorWidth = (0, _isNumber.default)(width) ? "".concat(width, "px") : width;
      var editorHeight = (0, _isNumber.default)(height) ? "".concat(height, "px") : height;
      return _react.default.createElement(AceEditor, (0, _extends2.default)({}, props, {
        mode: language,
        theme: theme,
        value: val || '',
        width: editorWidth,
        height: editorHeight,
        editorProps: editorProps,
        onChange: this.onChange
      }));
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props4 = this.props,
          name = _this$props4.name,
          label = _this$props4.label,
          other = (0, _objectWithoutProperties2.default)(_this$props4, ["name", "label"]);
      var ready = this.state.ready;
      return _react.default.createElement(_field.FormGroup, (0, _extends2.default)({
        className: "".concat(styles.formGroup, " form-group-code"),
        name: name,
        label: label
      }, other), ready ? this.renderField() : null);
    }
  }]);
  return CodeField;
}(_react.Component);

CodeField.propTypes = propTypes;
CodeField.defaultProps = defaultProps;
var _default = CodeField;
exports.default = _default;