"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.RGBPicker = RGBPicker;
var _eui = require("@elastic/eui");
var _react = _interopRequireWildcard(require("react"));
var _useDebounce = _interopRequireDefault(require("react-use/lib/useDebounce"));
var _chromaJs = _interopRequireDefault(require("chroma-js"));
var _react2 = require("@emotion/react");
var _uiTheme = require("@kbn/ui-theme");
var _i18n = require("@kbn/i18n");
var _color_math = require("../../color/color_math");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/*
 * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
 * or more contributor license agreements. Licensed under the Elastic License
 * 2.0 and the Server Side Public License, v 1; you may not use this file except
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */

function RGBPicker({
  isDarkMode,
  color,
  getPaletteFn,
  selectColor,
  close
}) {
  const [customColorMappingColor, setCustomColorMappingColor] = (0, _react.useState)(color);
  const customColorHex = customColorMappingColor.type === 'categorical' ? getPaletteFn(customColorMappingColor.paletteId).getColor(customColorMappingColor.colorIndex, isDarkMode) : customColorMappingColor.colorCode;
  const [colorTextInput, setColorTextInput] = (0, _react.useState)(customColorHex);

  // check contrasts with WCAG 2.1 with a min contrast ratio of 3
  const lightContrast = (0, _color_math.hasEnoughContrast)(customColorHex, false, 3);
  const darkContrast = (0, _color_math.hasEnoughContrast)(customColorHex, true, 3);
  const errorMessage = [lightContrast === false ? 'light' : undefined, darkContrast === false ? 'dark' : undefined].filter(Boolean);
  const isColorTextInvalid = !_chromaJs.default.valid(colorTextInput);
  const colorHasLowContrast = !lightContrast || !darkContrast;

  // debounce setting the color from the rgb picker by 500ms
  (0, _useDebounce.default)(() => {
    if (color !== customColorMappingColor) {
      selectColor(customColorMappingColor);
    }
  }, 500, [color, customColorMappingColor]);
  const invalidColor = isColorTextInvalid ? _uiTheme.euiThemeVars.euiColorDanger : colorHasLowContrast ? _uiTheme.euiThemeVars.euiColorWarning : '';
  const invalidColorText = isColorTextInvalid ? _uiTheme.euiThemeVars.euiColorDangerText : colorHasLowContrast ? _uiTheme.euiThemeVars.euiColorWarningText : '';
  return /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
    direction: "column",
    gutterSize: "s",
    style: {
      padding: 8
    }
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(_eui.EuiColorPicker, {
    onChange: c => {
      setCustomColorMappingColor({
        type: 'colorCode',
        colorCode: c
      });
      setColorTextInput(c);
    },
    color: customColorHex,
    display: "inline",
    swatches: []
  })), /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement("div", {
    css: isColorTextInvalid || colorHasLowContrast ? (0, _react2.css)`
                  input {
                    background-image: linear-gradient(
                      to top,
                      ${invalidColor},
                      ${invalidColor} 2px,
                      transparent 2px,
                      transparent 100%
                    ) !important;
                    background-size: 100%;
                    padding-right: 32px;
                  }
                  .euiFormErrorText {
                    color: ${invalidColorText} !important;
                  }
                ` : undefined
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFormRow, null, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexGroup, {
    css: (0, _react2.css)`
                position: relative;
              `
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiFlexItem, null, /*#__PURE__*/_react.default.createElement(_eui.EuiFieldText, {
    placeholder: "#FF00FF",
    value: colorTextInput,
    compressed: true,
    onChange: e => {
      const textColor = e.currentTarget.value;
      setColorTextInput(textColor);
      if (_chromaJs.default.valid(textColor)) {
        setCustomColorMappingColor({
          type: 'colorCode',
          colorCode: (0, _chromaJs.default)(textColor).hex()
        });
      }
    },
    "aria-label": _i18n.i18n.translate('coloring.colorMapping.colorPicker.hexColorinputAriaLabel', {
      defaultMessage: 'hex color input'
    })
  })), (isColorTextInvalid || colorHasLowContrast) && /*#__PURE__*/_react.default.createElement("div", {
    css: (0, _react2.css)`
                    position: absolute;
                    right: 8px;
                    top: 6px;
                  `
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiToolTip, {
    position: "bottom",
    content: isColorTextInvalid ? _i18n.i18n.translate('coloring.colorMapping.colorPicker.invalidColorHex', {
      defaultMessage: 'Please use a valid color hex code'
    }) : colorHasLowContrast ? _i18n.i18n.translate('coloring.colorMapping.colorPicker.lowContrastColor', {
      defaultMessage: `This color has a low contrast in {themes} {errorModes, plural, one {mode} other {# modes}}`,
      values: {
        themes: errorMessage.join(','),
        errorModes: errorMessage.length
      }
    }) : undefined
  }, /*#__PURE__*/_react.default.createElement(_eui.EuiIcon, {
    tabIndex: 0,
    type: "warning",
    color: isColorTextInvalid ? _uiTheme.euiThemeVars.euiColorDangerText : colorHasLowContrast ? _uiTheme.euiThemeVars.euiColorWarningText : _uiTheme.euiThemeVars.euiColorPrimary
  }))))))));
}