import _defineProperty from "@babel/runtime/helpers/defineProperty";
/** @jsx jsx */
import React, { PureComponent } from 'react';
import { jsx } from '@emotion/react';
import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
import { N0 } from '@atlaskit/theme/colors';
import Tooltip from '@atlaskit/tooltip';
import { buttonStyle, buttonWrapperStyle } from './styles';
class Color extends PureComponent {
  constructor(...args) {
    super(...args);
    _defineProperty(this, "onMouseDown", e => {
      e.preventDefault();
    });
    _defineProperty(this, "onClick", e => {
      const {
        onClick,
        value,
        label
      } = this.props;
      e.preventDefault();
      onClick(value, label);
    });
  }
  render() {
    const {
      autoFocus,
      tabIndex,
      value,
      label,
      isSelected,
      borderColor,
      /** this is not new usage - old code extracted from editor-core */
      /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
      checkMarkColor = N0,
      /**
       * When hexToPaletteColor prop is set,
       * it will be used to get background color style based on
       * value (which will be hexcode) prop
       */
      hexToPaletteColor
    } = this.props;
    const colorStyle = hexToPaletteColor ? hexToPaletteColor(value) : value;
    return jsx(Tooltip, {
      content: label
    }, jsx("span", {
      css: buttonWrapperStyle
    }, jsx("button", {
      type: "button",
      css: buttonStyle,
      "aria-label": label,
      role: "radio",
      "aria-checked": isSelected,
      onClick: this.onClick,
      onMouseDown: this.onMouseDown,
      tabIndex: tabIndex,
      className: `${isSelected ? 'selected' : ''}`,
      style: {
        backgroundColor: colorStyle || 'transparent',
        border: `1px solid ${borderColor}`
      },
      autoFocus: autoFocus
    }, isSelected && jsx(EditorDoneIcon, {
      primaryColor: checkMarkColor,
      label: ""
    }))));
  }
}
export default Color;