import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useLayoutEffect, useRef, useState } from 'react';
/**
 * This component is a wrapper for color picker which listens to keydown events of children
 * and handles arrow key navigation
 */
export var 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 = useRef(null);
  var currentSelectedColumnIndex = useRef(selectedColumnIndex === -1 ? 0 : selectedColumnIndex);
  var currentSelectedRowIndex = useRef(selectedRowIndex === -1 ? 0 : selectedRowIndex);
  var _useState = useState(editorRef.current),
    _useState2 = _slicedToArray(_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;
    }
  };
  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.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);
}