"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ColorPaletteArrowKeyNavigationProvider = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
 * This component is a wrapper for color picker which listens to keydown events of children
 * and handles arrow key navigation
 */
var ColorPaletteArrowKeyNavigationProvider = exports.ColorPaletteArrowKeyNavigationProvider = function ColorPaletteArrowKeyNavigationProvider(_ref) {
  var children = _ref.children,
    selectedRowIndex = _ref.selectedRowIndex,
    selectedColumnIndex = _ref.selectedColumnIndex,
    isOpenedByKeyboard = _ref.isOpenedByKeyboard,
    isPopupPositioned = _ref.isPopupPositioned,
    handleClose = _ref.handleClose,
    closeOnTab = _ref.closeOnTab,
    editorRef = _ref.editorRef;
  var wrapperRef = (0, _react.useRef)(null);
  var currentSelectedColumnIndex = (0, _react.useRef)(selectedColumnIndex === -1 ? 0 : selectedColumnIndex);
  var currentSelectedRowIndex = (0, _react.useRef)(selectedRowIndex === -1 ? 0 : selectedRowIndex);
  var _useState = (0, _react.useState)(editorRef.current),
    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
    listenerTargetElement = _useState2[0];
  var incrementRowIndex = function incrementRowIndex(rowElements, columnElements) {
    if (currentSelectedRowIndex.current === rowElements.length - 1) {
      currentSelectedRowIndex.current = 0;
    } else {
      currentSelectedRowIndex.current = currentSelectedRowIndex.current + 1;
    }
  };
  var decrementRowIndex = function decrementRowIndex(rowElements, columnElements) {
    if (currentSelectedRowIndex.current === 0) {
      currentSelectedRowIndex.current = rowElements.length - 1;
    } else {
      currentSelectedRowIndex.current = currentSelectedRowIndex.current - 1;
    }
  };
  (0, _react.useLayoutEffect)(function () {
    var incrementColumnIndex = function incrementColumnIndex(rowElements, columnElements) {
      if (currentSelectedColumnIndex.current === columnElements.length - 1) {
        incrementRowIndex(rowElements, columnElements);
        currentSelectedColumnIndex.current = 0;
      } else {
        currentSelectedColumnIndex.current = currentSelectedColumnIndex.current + 1;
      }
    };
    var decrementColumnIndex = function decrementColumnIndex(rowElements, columnElements) {
      if (currentSelectedColumnIndex.current === 0) {
        decrementRowIndex(rowElements, columnElements);
        currentSelectedColumnIndex.current = columnElements.length - 1;
      } else {
        currentSelectedColumnIndex.current = currentSelectedColumnIndex.current - 1;
      }
    };
    var focusColorSwatch = function focusColorSwatch() {
      var _focusableElements$cu;
      var colorSwatchesRowElements = getColorSwatchesRows(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
      var currentSelectedColorSwatchRowElement = colorSwatchesRowElements[currentSelectedRowIndex.current];
      var focusableElements = getFocusableElements(currentSelectedColorSwatchRowElement);
      if (!focusableElements || (focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.length) === 0) {
        return;
      }
      (_focusableElements$cu = focusableElements[currentSelectedColumnIndex.current]) === null || _focusableElements$cu === void 0 || _focusableElements$cu.focus();
    };

    /**
     * To handle the key events on the list
     * @param event
     */
    var handleKeyDown = function handleKeyDown(event) {
      if (event.key === 'Tab' && closeOnTab) {
        handleClose(event);
        return;
      }
      var colorSwatchesRowElements = getColorSwatchesRows(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
      var currentSelectedColorSwatchRowElement = colorSwatchesRowElements[currentSelectedRowIndex.current];
      var focusableElements = getFocusableElements(currentSelectedColorSwatchRowElement);
      switch (event.key) {
        case 'ArrowDown':
          incrementRowIndex(colorSwatchesRowElements, focusableElements);
          focusColorSwatch();
          event.preventDefault();
          break;
        case 'ArrowUp':
          decrementRowIndex(colorSwatchesRowElements, focusableElements);
          focusColorSwatch();
          event.preventDefault();
          break;
        case 'ArrowLeft':
          decrementColumnIndex(colorSwatchesRowElements, focusableElements);
          focusColorSwatch();
          event.preventDefault();
          break;
        case 'ArrowRight':
          incrementColumnIndex(colorSwatchesRowElements, focusableElements);
          focusColorSwatch();
          event.preventDefault();
          break;
        case 'Escape':
          handleClose(event);
          break;
        default:
          return;
      }
    };
    listenerTargetElement && listenerTargetElement.addEventListener('keydown', handleKeyDown);
    // set focus to current selected color swatch if only opened by keyboard
    if (isOpenedByKeyboard && isPopupPositioned) {
      // Using timeout because, we need to wait till color palette is rendered
      //  and visible on screen, then only focus color swatch, otherwise focus will be
      //  moved to body
      setTimeout(function () {
        focusColorSwatch();
      });
    }
    return function () {
      listenerTargetElement && listenerTargetElement.removeEventListener('keydown', handleKeyDown);
    };
  }, [currentSelectedColumnIndex, isOpenedByKeyboard, isPopupPositioned, wrapperRef, handleClose, closeOnTab, listenerTargetElement]);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "custom-key-handler-wrapper",
    ref: wrapperRef
  }, children);
};
function getColorSwatchesRows(rootNode) {
  if (!rootNode) {
    return [];
  }
  var colorSwatchesRowElements = rootNode.querySelectorAll('div[role=radiogroup]') || [];
  return Array.from(colorSwatchesRowElements);
}
function getFocusableElements(rootNode) {
  if (!rootNode) {
    return [];
  }
  var focusableModalElements = rootNode.querySelectorAll('button[role=radio]:not([disabled])') || [];
  return Array.from(focusableModalElements);
}