/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import React from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';
import chromatism from 'chromatism';
import { injectIntl } from 'react-intl-next';
import { useThemeObserver } from '@atlaskit/tokens';
import Color from './Color';
import getColorMessage from './Palettes/getColorMessage';
import { colorPaletteWrapper } from './styles';
import { DEFAULT_COLOR_PICKER_COLUMNS, getColorsPerRowFromPalette, getTokenCSSVariableValue } from './utils';
/**
 * 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) {
  const tokenVal = getTokenCSSVariableValue(color);
  const colorValue = !!tokenVal ? tokenVal : color;

  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
  const contrastColor = ['#FFFFFF', '#42526E'].sort((a, b) => chromatism.difference(b, colorValue) - chromatism.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)";
}
const ColorPalette = props => {
  const {
    cols = DEFAULT_COLOR_PICKER_COLUMNS,
    onClick,
    onKeyDown,
    selectedColor,
    className,
    intl: {
      formatMessage
    },
    paletteOptions
  } = props;
  const {
    palette,
    hexToPaletteColor,
    paletteColorTooltipMessages
  } = paletteOptions;
  const {
    colorMode: tokenTheme
  } = useThemeObserver();
  const useIconToken = !!hexToPaletteColor;
  const colorsPerRow = React.useMemo(() => {
    return getColorsPerRowFromPalette(palette, cols);
  }, [palette, cols]);
  return jsx(React.Fragment, null, colorsPerRow.map(row => 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: colorPaletteWrapper
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: className,
    key: `row-first-color-${row[0].value}`,
    role: "radiogroup"
  }, row.map(({
    value,
    label,
    border,
    message,
    decorator
  }) => {
    if (paletteColorTooltipMessages) {
      if (tokenTheme === 'dark') {
        message = getColorMessage(paletteColorTooltipMessages.dark, value.toUpperCase());
      }
      if (tokenTheme === 'light') {
        message = getColorMessage(paletteColorTooltipMessages.light, value.toUpperCase());
      }
    }
    return jsx(Color, {
      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
const _default_1 = injectIntl(ColorPalette);
export default _default_1;