'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var Editable_tokens = require('./Editable.tokens.js');
var Editable_styles = require('./Editable.styles.js');
var base = require('./variations/_view/base.js');
var base$1 = require('./variations/_size/base.js');
var useForkRef = require('../../hooks/useForkRef.js');
var clearSelection = require('./utils/clearSelection.js');
var selectText = require('./utils/selectText.js');
var constants = require('../../utils/constants.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

var _excluded = ["textComponent", "value", "icon", "maxLength", "spellCheck", "placeholder", "name", "onChange", "onBlur", "onPaste"];
var editableRoot = function editableRoot(typographyVariants) {
  return function (Root) {
    return /*#__PURE__*/React.forwardRef(function (_ref, outerRef) {
      var _prevValueRef$current;
      var textComponent = _ref.textComponent,
        value = _ref.value,
        icon = _ref.icon,
        maxLength = _ref.maxLength,
        _ref$spellCheck = _ref.spellCheck,
        spellCheck = _ref$spellCheck === void 0 ? 'false' : _ref$spellCheck,
        placeholder = _ref.placeholder,
        name = _ref.name,
        onChange = _ref.onChange,
        onBlur = _ref.onBlur,
        onPaste = _ref.onPaste,
        props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
      var Component = textComponent;
      var _useState = React.useState(false),
        _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
        isEditing = _useState2[0],
        setIsEditing = _useState2[1];
      var inputRef = React.useRef(null);
      var innerRef = useForkRef.useForkRef(inputRef, outerRef);
      var prevValueRef = React.useRef(value || '');
      var handlePaste = function handlePaste(e) {
        if (!inputRef.current) {
          return;
        }
        e.preventDefault();
        var text = e.clipboardData.getData('text/plain').replace(/[\n\r]/gi, '');
        if (document.queryCommandSupported('insertText')) {
          document.execCommand('insertText', false, text);
        } else {
          try {
            navigator.clipboard.writeText(text);
          } catch (_unused) {
            inputRef.current.textContent = text;
          }
        }
        if (onPaste) {
          onPaste(e);
        }
      };
      var handleBlur = function handleBlur(e) {
        setIsEditing(false);
        clearSelection.clearSelection();

        // NOTE: Remove <br> tag inserted by Safari
        var editableElement = inputRef.current;
        if (editableElement && editableElement.innerHTML === '<br>') {
          editableElement.innerHTML = '';
        }
        if (onBlur) {
          onBlur(e);
        }
      };
      var handleFocus = function handleFocus() {
        setIsEditing(true);
        inputRef.current && selectText.selectText(inputRef.current);
      };
      var handleEditClick = function handleEditClick() {
        var _inputRef$current;
        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
      };
      var handleKeyDown = function handleKeyDown(e) {
        if ([constants.keyCodes.Enter, constants.keyCodes.Escape].includes(e.keyCode)) {
          var _inputRef$current2;
          (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
        }
      };
      var handleChange = function handleChange(e) {
        var _inputRef$current$tex;
        if (!inputRef.current) {
          return;
        }
        var contentLength = ((_inputRef$current$tex = inputRef.current.textContent) === null || _inputRef$current$tex === void 0 ? void 0 : _inputRef$current$tex.length) || 0;
        if (!maxLength || contentLength <= maxLength) {
          prevValueRef.current = inputRef.current.textContent || '';
          onChange && onChange(e);
        } else {
          inputRef.current.textContent = prevValueRef.current;
        }
      };
      React.useEffect(function () {
        if (!inputRef.current || typeof value === 'undefined' || value === inputRef.current.textContent) {
          return;
        }
        inputRef.current.textContent = value;
      }, [value, textComponent]);
      return /*#__PURE__*/React__default.default.createElement(Root, props, /*#__PURE__*/React__default.default.createElement(Component, {
        ref: innerRef,
        className: Editable_tokens.classes.editableTextBox,
        role: "textbox",
        spellCheck: spellCheck,
        contentEditable: true,
        onPaste: handlePaste,
        onInput: handleChange,
        onBlur: handleBlur,
        onFocus: handleFocus,
        onKeyDown: handleKeyDown,
        "aria-label": placeholder
      }), ((_prevValueRef$current = prevValueRef.current) === null || _prevValueRef$current === void 0 ? void 0 : _prevValueRef$current.length) === 0 && !isEditing && /*#__PURE__*/React__default.default.createElement(Component, null, /*#__PURE__*/React__default.default.createElement(Editable_styles.StyledPlacehpolder, {
        onClick: handleEditClick
      }, placeholder)), /*#__PURE__*/React__default.default.createElement(Editable_styles.StyledInput, {
        type: "hidden",
        value: prevValueRef.current,
        name: name
      }), /*#__PURE__*/React__default.default.createElement(Editable_styles.EditButton, {
        onClick: handleEditClick,
        isHidden: isEditing
      }, icon));
    });
  };
};
var editableConfig = function editableConfig(typographyVariants) {
  return {
    name: 'Editable',
    tag: 'span',
    layout: editableRoot(),
    base: Editable_styles.base,
    variations: {
      view: {
        css: base.base
      },
      size: {
        css: base$1.base
      }
    },
    defaults: {
      view: 'default',
      size: 'm'
    }
  };
};

exports.editableConfig = editableConfig;
exports.editableRoot = editableRoot;
