"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ColorPicker = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _tinycolor = _interopRequireDefault(require("tinycolor2"));
var _color_manager = require("../color_manager");
var _color_palette = require("../color_palette");
/*
 * 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; you may not use this file except in compliance with the Elastic License
 * 2.0.
 */

const ColorPicker = ({
  colors = [],
  hasButtons = false,
  onAddColor,
  onChange,
  onRemoveColor,
  value = ''
}) => {
  const tc = (0, _tinycolor.default)(value);
  const isValidColor = tc.isValid();
  colors = colors.filter(color => {
    return (0, _tinycolor.default)(color).isValid();
  });
  let canRemove = false;
  let canAdd = false;
  if (isValidColor) {
    const match = colors.filter(color => _tinycolor.default.equals(value, color));
    canRemove = match.length > 0;
    canAdd = match.length === 0;
  }
  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_color_palette.ColorPalette, {
    onChange: onChange,
    value: value,
    colors: colors
  }), /*#__PURE__*/_react.default.createElement(_color_manager.ColorManager, {
    onChange: onChange,
    value: value,
    onAddColor: canAdd ? onAddColor : undefined,
    onRemoveColor: canRemove ? onRemoveColor : undefined,
    hasButtons: hasButtons
  }));
};
exports.ColorPicker = ColorPicker;
ColorPicker.propTypes = {
  colors: _propTypes.default.array,
  hasButtons: _propTypes.default.bool,
  onAddColor: _propTypes.default.func,
  onChange: _propTypes.default.func.isRequired,
  onRemoveColor: _propTypes.default.func,
  value: _propTypes.default.string
};