/**
 * @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 EditorDoneIcon from '@atlaskit/icon/core/check-mark';
import Tooltip from '@atlaskit/tooltip';
import { buttonStyle, buttonWrapperStyle } from './styles';
const Color = props => {
  const {
    autoFocus,
    tabIndex,
    value,
    label,
    isSelected,
    borderColor,
    /**
     * When hexToPaletteColor prop is set,
     * it will be used to get background color style based on
     * value (which will be hexcode) prop
     */
    hexToPaletteColor,
    decorator
  } = props;
  const colorStyle = hexToPaletteColor ? hexToPaletteColor(value) : value;
  const onMouseDown = e => {
    e.preventDefault();
  };
  const onClick = e => {
    const {
      onClick,
      value,
      label
    } = props;
    e.preventDefault();
    onClick(value, label);
  };
  const onKeyDown = e => {
    const {
      onKeyDown,
      value,
      label
    } = props;
    if (!onKeyDown) {
      return undefined;
    }
    e.preventDefault();
    onKeyDown(value, label, e);
  };
  return jsx(Tooltip, {
    content: label
  }, jsx("span", {
    css: buttonWrapperStyle
  }, jsx("button", {
    type: "button"
    // 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: buttonStyle,
    "aria-label": label,
    role: "radio",
    "aria-checked": isSelected,
    onClick: onClick,
    onKeyDown: onKeyDown,
    onMouseDown: onMouseDown,
    tabIndex: tabIndex
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    ,
    className: `${isSelected ? 'selected' : ''}`,
    style: {
      backgroundColor: colorStyle || "var(--ds-background-input, #FFFFFF)",
      border: `${"var(--ds-border-width, 1px)"} solid ${borderColor}`
    },
    autoFocus: autoFocus
  }, !decorator && isSelected && jsx(EditorDoneIcon, {
    label: ""
  }), decorator)));
};
export default Color;