import { _ as _defineProperty } from '../defineProperty-CEd-kZQW.js';
import React__default from 'react';
import PropTypes from 'prop-types';
import CKIcon from '../ck-icon/index.js';
import Tooltip from '../tooltip/index.js';
import cx from 'classnames';
import '../extends-C4cduGrv.js';
import '../objectWithoutProperties-TXwlfNxG.js';
import '../ck-icon/assets/icon-map/index.js';
import '../icon/index.js';
import '@fortawesome/react-fontawesome';
import '../icon/icons.js';
import '../icon/library.js';
import '@fortawesome/fontawesome-svg-core';
import '@fortawesome/pro-solid-svg-icons';
import '@fortawesome/pro-light-svg-icons';
import '@fortawesome/free-brands-svg-icons';
import '../slicedToArray-BB-AwwkK.js';
import '../auto-id.esm-Cly76abB.js';
import '../utils.esm-CKyxlHOy.js';
import '../warning-s9zGJbnw.js';
import '../portal.esm-CuKGPwhL.js';
import 'react-dom';
import '@reach/visually-hidden';
import '../portal/index.js';
import '../use-rerender-once/index.js';
import '../use-force-update/index.js';

var MAX_COLOR_ARRAY_LENGTH = 5;

var isColorsArray = function isColorsArray(props, propName, componentName) {
  var colorsArray = props[propName];

  if (!Array.isArray(colorsArray)) {
    return new Error("Invalid prop ".concat(propName, " passed to ").concat(componentName, ". Expected an array."));
  }

  if (colorsArray.length > MAX_COLOR_ARRAY_LENGTH) {
    return new Error("Invalid prop ".concat(propName, " passed to ").concat(componentName, ". Expected an array with length of 5 or less."));
  }
};

var SavedColorShape = {
  colors: isColorsArray,
  handleColorSelect: PropTypes.func,
  handleColorsEdit: PropTypes.func.isRequired
};

function SavedColorTile(_ref) {
  var color = _ref.color,
      handleColorSelect = _ref.handleColorSelect;
  var styles = {
    background: color
  };
  var buttonClasses = "h-6 w-6 rounded border border-transparent hover:border-gray-200 focus:outline-blue";
  var label = "Select color ".concat(color);
  return /*#__PURE__*/React__default.createElement("button", {
    className: buttonClasses,
    style: styles,
    onClick: function onClick() {
      return handleColorSelect(color);
    },
    "aria-label": label
  });
}

function SettingsTile(_ref2) {
  var colors = _ref2.colors,
      handleColorsEdit = _ref2.handleColorsEdit;
  var buttonClasses = "h-6 w-6 mr-2 grid place-content-center rounded border border-solid text-gray-700 hover:text-gray-900 focus:text-gray-900 bg-white hover:bg-gray-300 focus:outline-blue";
  var icon = colors !== null && colors !== void 0 && colors.length ? "settings-sliders" : "plus";
  return /*#__PURE__*/React__default.createElement(Tooltip, {
    label: "Edit saved colors"
  }, /*#__PURE__*/React__default.createElement("button", {
    "aria-label": "Edit saved colors",
    onClick: handleColorsEdit,
    className: buttonClasses
  }, /*#__PURE__*/React__default.createElement(CKIcon, {
    name: icon,
    size: "sm"
  })));
}

function SavedColorTiles(_ref3) {
  var colors = _ref3.colors,
      handleColorSelect = _ref3.handleColorSelect,
      handleColorsEdit = _ref3.handleColorsEdit;
  var tiles = colors.map(function (color, index) {
    return /*#__PURE__*/React__default.createElement(SavedColorTile, {
      color: color,
      key: index,
      tileIndex: index,
      handleColorSelect: handleColorSelect
    });
  });
  return /*#__PURE__*/React__default.createElement("div", {
    className: "grid grid-cols-6 gap-2"
  }, tiles, /*#__PURE__*/React__default.createElement(SettingsTile, {
    colors: colors,
    handleColorsEdit: handleColorsEdit
  }));
}

function ColorsUpdaterToolbar(_ref4) {
  var _ref4$colors = _ref4.colors,
      colors = _ref4$colors === void 0 ? [] : _ref4$colors,
      handleColorSelect = _ref4.handleColorSelect,
      handleColorsEdit = _ref4.handleColorsEdit,
      _ref4$className = _ref4.className,
      className = _ref4$className === void 0 ? "" : _ref4$className;
  var title = colors !== null && colors !== void 0 && colors.length ? "Saved colors" : "Click + to add saved colors";
  var classes = cx("border-t w-auto", _defineProperty({
    "mt-4 -mx-3": !(className !== null && className !== void 0 && className.length)
  }, className, className === null || className === void 0 ? void 0 : className.length));
  return /*#__PURE__*/React__default.createElement("div", {
    className: classes
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "pl-3 mr-3 w-auto"
  }, /*#__PURE__*/React__default.createElement("div", {
    className: "text-gray-800 text-xs font-semibold mt-3 mb-2"
  }, title), /*#__PURE__*/React__default.createElement(SavedColorTiles, {
    colors: colors,
    handleColorSelect: handleColorSelect,
    handleColorsEdit: handleColorsEdit
  })));
}

ColorsUpdaterToolbar.propTypes = {
  colors: PropTypes.array,
  handleColorSelect: PropTypes.func,
  handleColorsEdit: PropTypes.func.isRequired,
  className: PropTypes.string
};

export { SavedColorShape, ColorsUpdaterToolbar as default };
