"use strict";

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

var _typeof = require("@babel/runtime/helpers/typeof");

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

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

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

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

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

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

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

var _reactDraftWysiwyg = require("react-draft-wysiwyg");

var _classnames = _interopRequireDefault(require("classnames"));

var _uiIcons = require("@teamleader/ui-icons");

var _box = _interopRequireWildcard(require("../box"));

var _validationText = _interopRequireDefault(require("../validationText"));

var _InlineStylingOptions = _interopRequireDefault(require("./InlineStylingOptions"));

var _ListStylingOptions = _interopRequireDefault(require("./ListStylingOptions"));

var _LinkOptions = _interopRequireDefault(require("./LinkOptions"));

var _decorators = require("./decorators");

var _theme = _interopRequireDefault(require("./theme.css"));

var _translations = _interopRequireDefault(require("./translations"));

var _excluded = ["className", "error", "onInputFocus", "onFocus", "onInputBlur", "onBlur", "success", "warning", "helpText", "width", "locale", "inputClassName", "autoFocus", "onKeyDown"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }

var toolbar = {
  options: ['inline', 'list', 'link'],
  inline: {
    options: ['bold', 'italic'],
    bold: {
      icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconTextBoldMediumOutline, null)
    },
    italic: {
      icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconTextItalicMediumOutline, null)
    },
    component: _InlineStylingOptions.default
  },
  list: {
    component: _ListStylingOptions.default,
    options: ['unordered', 'ordered'],
    unordered: {
      icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconListMediumOutline, null)
    },
    ordered: {
      icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconListNumeredMediumOutline, null)
    }
  },
  link: {
    component: _LinkOptions.default,
    defaultTargetOption: '_self',
    showOpenOptionOnHover: true,
    options: ['link'],
    link: {
      icon: /*#__PURE__*/_react.default.createElement(_uiIcons.IconLinkMediumOutline, null)
    }
  }
};
var customStyleMap = {
  BOLD: {
    fontFamily: 'Inter',
    fontWeight: 700
  }
};
var availableLocales = ['en', 'es', 'it', 'nl', 'fr', 'de'];
/** @type {React.ComponentType<any>} */

var WysiwygEditor = function WysiwygEditor(_ref) {
  var _cx;

  var className = _ref.className,
      error = _ref.error,
      onInputFocus = _ref.onInputFocus,
      onFocus = _ref.onFocus,
      onInputBlur = _ref.onInputBlur,
      onBlur = _ref.onBlur,
      success = _ref.success,
      warning = _ref.warning,
      helpText = _ref.helpText,
      width = _ref.width,
      _ref$locale = _ref.locale,
      locale = _ref$locale === void 0 ? 'en' : _ref$locale,
      inputClassName = _ref.inputClassName,
      autoFocus = _ref.autoFocus,
      onKeyDown = _ref.onKeyDown,
      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      isFocused = _useState2[0],
      setIsFocused = _useState2[1];

  var _useState3 = (0, _react.useState)(true),
      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
      isPlaceholderShown = _useState4[0],
      setIsPlaceholderShown = _useState4[1];

  var editorRef = (0, _react.useRef)();
  (0, _react.useEffect)(function () {
    if (autoFocus) {
      var _editorRef$current;

      // eslint-disable-next-line no-unused-expressions
      editorRef === null || editorRef === void 0 ? void 0 : (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.focusEditor();
    }
  }, [autoFocus]);
  (0, _react.useEffect)(function () {
    var _editorRef$current2;

    if (!onKeyDown || !(editorRef !== null && editorRef !== void 0 && (_editorRef$current2 = editorRef.current) !== null && _editorRef$current2 !== void 0 && _editorRef$current2.wrapper)) {
      return;
    }

    var handleKeyDown = function handleKeyDown(event) {
      return onKeyDown(event);
    };

    editorRef.current.wrapper.addEventListener('keydown', handleKeyDown);
    return function () {
      var _editorRef$current3;

      if (!onKeyDown && !(editorRef !== null && editorRef !== void 0 && (_editorRef$current3 = editorRef.current) !== null && _editorRef$current3 !== void 0 && _editorRef$current3.wrapper)) {
        return;
      }

      editorRef.current.wrapper.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  var handleBlur = function handleBlur(event) {
    var _event$relatedTarget, _event$relatedTarget$;

    var editorInput = document.querySelector("[aria-label='rdw-editor']"); // Only blur when editorInput is blurred and the newly focussed target is not part of the wysiwyg

    if (event.target === editorInput && !((_event$relatedTarget = event.relatedTarget) !== null && _event$relatedTarget !== void 0 && (_event$relatedTarget$ = _event$relatedTarget.dataset) !== null && _event$relatedTarget$ !== void 0 && _event$relatedTarget$.wysiwyg)) {
      setIsFocused(false);
      onBlur && onBlur(event);
    }

    if (onInputBlur) {
      onInputBlur(event);
    }
  };

  var handleFocus = function handleFocus(event) {
    var editorInput = document.querySelector("[aria-label='rdw-editor']"); // Only focus when focussed target is part of the wysiwyg and the editor isn't focussed yet

    if ((event.target.dataset.wysiwyg || event.target === editorInput) && !isFocused) {
      setIsFocused(true);
      onFocus && onFocus(event);
    }

    if (onInputFocus) {
      onInputFocus(event);
    }
  };

  var handleContentStateChange = function handleContentStateChange(_ref2) {
    var _ref2$blocks = (0, _slicedToArray2.default)(_ref2.blocks, 1),
        type = _ref2$blocks[0].type;

    if (type === 'unstyled') {
      setIsPlaceholderShown(true);
      return;
    }

    setIsPlaceholderShown(false);
  };

  var wrapperClassNames = (0, _classnames.default)(_theme.default['wrapper'], (_cx = {}, (0, _defineProperty2.default)(_cx, _theme.default['has-focus'], isFocused), (0, _defineProperty2.default)(_cx, _theme.default['has-error'], error), (0, _defineProperty2.default)(_cx, _theme.default['has-success'], success), (0, _defineProperty2.default)(_cx, _theme.default['has-warning'], warning), (0, _defineProperty2.default)(_cx, _theme.default['has-placeholder'], isPlaceholderShown), _cx), className);
  var inputClassNames = (0, _classnames.default)(_theme.default['input'], inputClassName);
  var boxProps = (0, _box.pickBoxProps)(others);
  return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({
    style: {
      width: width,
      flex: width && '0 0 auto'
    }
  }, boxProps), /*#__PURE__*/_react.default.createElement(_reactDraftWysiwyg.Editor, (0, _extends2.default)({
    toolbar: toolbar,
    wrapperClassName: wrapperClassNames,
    editorClassName: inputClassNames,
    toolbarClassName: _theme.default['toolbar'],
    onFocus: handleFocus,
    onBlur: handleBlur,
    onContentStateChange: handleContentStateChange,
    customStyleMap: customStyleMap,
    customDecorators: [_decorators.linkDecorator],
    localization: availableLocales.includes(locale) ? {
      locale: locale,
      translations: _translations.default[locale]
    } : {
      locale: 'en',
      translations: _translations.default['en']
    },
    ref: editorRef
  }, others)), /*#__PURE__*/_react.default.createElement(_validationText.default, {
    error: error,
    help: helpText,
    success: success,
    warning: warning
  }));
};

var _default = WysiwygEditor;
exports.default = _default;