"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ColorPalette = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _eui = require("@elastic/eui");
var _tinycolor = _interopRequireDefault(require("tinycolor2"));
var _readable_color = require("../../lib/readable_color");
var _color_dot = require("../color_dot");
var _item_grid = require("../item_grid");
/*
 * 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 ColorPalette = ({
  colors = [],
  colorsPerRow = 6,
  onChange,
  value = ''
}) => {
  if (colors.length === 0) {
    return null;
  }
  colors = colors.filter(color => {
    return (0, _tinycolor.default)(color).isValid();
  });
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "canvasColorPalette"
  }, /*#__PURE__*/_react.default.createElement(_item_grid.ItemGrid, {
    items: colors,
    itemsPerRow: colorsPerRow
  }, color => {
    const match = _tinycolor.default.equals(color, value);
    const icon = match ? /*#__PURE__*/_react.default.createElement(_eui.EuiIcon, {
      type: "check",
      className: "selected-color",
      color: (0, _readable_color.readableColor)(value)
    }) : null;
    return /*#__PURE__*/_react.default.createElement(_eui.EuiLink, {
      style: {
        fontSize: 0
      },
      key: color,
      onClick: () => !match && onChange(color),
      className: "canvasColorPalette__dot",
      "aria-label": (0, _tinycolor.default)(color).toName() || color
    }, /*#__PURE__*/_react.default.createElement(_color_dot.ColorDot, {
      value: color
    }, icon));
  }));
};
exports.ColorPalette = ColorPalette;
ColorPalette.propTypes = {
  colors: _propTypes.default.array,
  colorsPerRow: _propTypes.default.number,
  onChange: _propTypes.default.func.isRequired,
  value: _propTypes.default.string
};