"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _chromatism = _interopRequireDefault(require("chromatism"));
var _reactIntlNext = require("react-intl-next");
var _tokens = require("@atlaskit/tokens");
var _Color = _interopRequireDefault(require("./Color"));
var _getColorMessage = _interopRequireDefault(require("./Palettes/getColorMessage"));
var _styles = require("./styles");
var _utils = require("./utils");
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

/**
 * For a given color pick the color from a list of colors with
 * the highest contrast
 *
 * @param color color string, supports HEX, RGB, RGBA etc.
 * @param useIconToken boolean, describes if a token should be used for the icon color
 * @return Highest contrast color in pool
 */
function getCheckMarkColor(color, useIconToken) {
  var tokenVal = (0, _utils.getTokenCSSVariableValue)(color);
  var colorValue = !!tokenVal ? tokenVal : color;

  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
  var contrastColor = ['#FFFFFF', '#42526E'].sort(function (a, b) {
    return _chromatism.default.difference(b, colorValue) - _chromatism.default.difference(a, colorValue);
  })[0];
  if (!useIconToken) {
    return contrastColor;
  }

  // Use of these token comes from guidance from designers in the Design System team
  // they are only intended for use with text colors (and there are different tokens
  // planned to be used when this extended to be used with other palettes).
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
  return contrastColor === '#FFFFFF' ? "var(--ds-icon-inverse, #FFFFFF)" : "var(--ds-icon, #292A2E)";
}
var ColorPalette = function ColorPalette(props) {
  var _props$cols = props.cols,
    cols = _props$cols === void 0 ? _utils.DEFAULT_COLOR_PICKER_COLUMNS : _props$cols,
    onClick = props.onClick,
    onKeyDown = props.onKeyDown,
    selectedColor = props.selectedColor,
    className = props.className,
    formatMessage = props.intl.formatMessage,
    paletteOptions = props.paletteOptions;
  var palette = paletteOptions.palette,
    hexToPaletteColor = paletteOptions.hexToPaletteColor,
    paletteColorTooltipMessages = paletteOptions.paletteColorTooltipMessages;
  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
    tokenTheme = _useThemeObserver.colorMode;
  var useIconToken = !!hexToPaletteColor;
  var colorsPerRow = _react.default.useMemo(function () {
    return (0, _utils.getColorsPerRowFromPalette)(palette, cols);
  }, [palette, cols]);
  return (0, _react2.jsx)(_react.default.Fragment, null, colorsPerRow.map(function (row) {
    return (0, _react2.jsx)("div", {
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
      css: _styles.colorPaletteWrapper
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
      ,
      className: className,
      key: "row-first-color-".concat(row[0].value),
      role: "radiogroup"
    }, row.map(function (_ref) {
      var value = _ref.value,
        label = _ref.label,
        border = _ref.border,
        message = _ref.message,
        decorator = _ref.decorator;
      if (paletteColorTooltipMessages) {
        if (tokenTheme === 'dark') {
          message = (0, _getColorMessage.default)(paletteColorTooltipMessages.dark, value.toUpperCase());
        }
        if (tokenTheme === 'light') {
          message = (0, _getColorMessage.default)(paletteColorTooltipMessages.light, value.toUpperCase());
        }
      }
      return (0, _react2.jsx)(_Color.default, {
        key: value,
        value: value,
        borderColor: border,
        label: message ? formatMessage(message) : label,
        onClick: onClick,
        onKeyDown: onKeyDown,
        isSelected: value === selectedColor,
        checkMarkColor: getCheckMarkColor(value, useIconToken),
        hexToPaletteColor: hexToPaletteColor,
        decorator: decorator
      });
    }));
  }));
};

// eslint-disable-next-line @typescript-eslint/ban-types
var _default_1 = (0, _reactIntlNext.injectIntl)(ColorPalette);
var _default = exports.default = _default_1;