"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var new_color_swatches_exports = {};
__export(new_color_swatches_exports, {
  NewColorSwatches: () => NewColorSwatches
});
module.exports = __toCommonJS(new_color_swatches_exports);
var import_react = __toESM(require("react"));
var import_data_hooks = require("./../../../../color-picker/common/data-hooks.js");
var import_add_color_button = require("../add-color-button/index.js");
var import_single_color_swatch = require("../single-color-swatch/index.js");
var import_new_color_swatches_scss = __toESM(require("./new-color-swatches-scss.js"));
const COLUMN_COUNT = 6;
const NewColorSwatches = ({
  colors,
  deletableColors,
  selectedColor,
  onAddClick,
  onColorSelected,
  onColorPreviewStart,
  onColorPreviewEnd,
  onColorDeleted,
  dataHook,
  setAddButtonRef,
  labelledById
}) => {
  const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(null);
  const deletableColorSet = new Set(deletableColors?.map((color) => color.toUpperCase()));
  const swatchRefs = (0, import_react.useRef)([]);
  const handleKeyDown = (event) => {
    if (focusedIndex === null) {
      return;
    }
    let newIndex = focusedIndex;
    switch (event.key) {
      case "ArrowRight":
        newIndex = (focusedIndex + 1) % colors.length;
        break;
      case "ArrowLeft":
        newIndex = (focusedIndex - 1 + colors.length) % colors.length;
        break;
      case "ArrowDown":
        newIndex = (focusedIndex + COLUMN_COUNT) % colors.length;
        break;
      case "ArrowUp":
        newIndex = (focusedIndex - COLUMN_COUNT + colors.length) % colors.length;
        break;
      default:
        return;
    }
    setFocusedIndex(newIndex);
    event.preventDefault();
    swatchRefs.current[newIndex]?.querySelector("button")?.focus();
  };
  const setColorSwatchRef = (0, import_react.useCallback)(
    (index) => (element) => swatchRefs.current[index] = element,
    []
  );
  return /* @__PURE__ */ import_react.default.createElement(
    "div",
    {
      role: "listbox",
      "aria-labelledby": labelledById,
      "aria-activedescendant": getColorSwatchId(focusedIndex ?? 0),
      "data-hook": dataHook,
      onKeyDown: handleKeyDown,
      tabIndex: 0,
      onFocus: () => {
        if (focusedIndex === null) {
          setFocusedIndex(0);
        }
      }
    },
    /* @__PURE__ */ import_react.default.createElement("div", { className: import_new_color_swatches_scss.default.container, "data-hook": import_data_hooks.SWATCHES }, colors.map((color, index) => /* @__PURE__ */ import_react.default.createElement(
      import_single_color_swatch.SingleColorSwatch,
      {
        index: getColorSwatchId(index),
        key: color,
        fill: color,
        selectedColor,
        onClick: onColorSelected,
        onMouseEnter: onColorPreviewStart,
        onMouseLeave: onColorPreviewEnd,
        onFocus: () => {
          setFocusedIndex(index);
        },
        onDelete: onColorDeleted && deletableColorSet.has(color.toUpperCase()) ? onColorDeleted : void 0,
        setRef: setColorSwatchRef(index)
      }
    )), !!onAddClick && /* @__PURE__ */ import_react.default.createElement(import_add_color_button.AddColorButton, { onAddClick, setRef: setAddButtonRef }))
  );
};
const getColorSwatchId = (index) => `color-swatch-${index}`;
//# sourceMappingURL=new-color-swatches.js.map
