"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.ColourList = void 0;

var _react = _interopRequireDefault(require("react"));

var _List = require("../../components/List");

var _Tooltip = _interopRequireDefault(require("../../components/Tooltip"));

var _Module = require("../../components/Module");

var _Item = _interopRequireDefault(require("../../components/Item"));

var _themes = require("@wfp/themes");

var _wcagContrast = require("wcag-contrast");

require("./colours.scss");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var ColourList = function ColourList(_ref) {
  var filter = _ref.filter;
  console.log(_themes.wfpColorsMeta);
  var filteredColors = Object.values(_themes.wfpColorsMeta).filter(function (ui_colors) {
    return ui_colors.category === filter;
  });
  var list = filteredColors.map(function (color) {
    var computedColor = getComputedStyle(document.body).getPropertyValue("--".concat(color.name));
    return /*#__PURE__*/_react.default.createElement(_Item.default, {
      className: "color__item",
      kind: "horizontal",
      additional: color.hex,
      title: color.variable,
      subContent: color.description,
      image: /*#__PURE__*/_react.default.createElement("div", {
        className: "color__field",
        style: {
          backgroundColor: color.hex
        }
      })
    }, /*#__PURE__*/_react.default.createElement("div", null, "Former name: ", color.former));
  });
  return /*#__PURE__*/_react.default.createElement("ul", {
    className: "color--list"
  }, list);
};

exports.ColourList = ColourList;
var _default = ColourList;
exports.default = _default;