"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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 _Table = _interopRequireDefault(require("../../components/Table"));

var _Text = _interopRequireDefault(require("../../components/Text"));

var _Tag = _interopRequireDefault(require("../../components/Tag"));

var _Story = _interopRequireDefault(require("../../components/Story"));

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

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

require("./colours.scss");

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("tr", {
      className: "color__item",
      kind: "horizontal"
    }, /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement("h5", null, /*#__PURE__*/_react.default.createElement(_Tag.default, null, "$", color.variable))), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_Story.default, null, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("pre", null, color.description)), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_Text.default, {
      kind: "code"
    }, "Former name: ", color.former)))), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement(_Text.default, {
      kind: "code"
    }, color.hex), /*#__PURE__*/_react.default.createElement("br", null)), /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement("div", {
      className: "color__field ".concat(color.rgba.r + color.rgba.g + color.rgba.b > 2.5 ? 'color__field__light' : ''),
      style: {
        backgroundColor: color.hex
      }
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "color__contrast"
    }, /*#__PURE__*/_react.default.createElement("span", null, "A")), /*#__PURE__*/_react.default.createElement("div", {
      className: "color__contrast color__contrast--light"
    }, /*#__PURE__*/_react.default.createElement("span", null, "A"))), /*#__PURE__*/_react.default.createElement("div", {
      className: "color__field__description"
    }, /*#__PURE__*/_react.default.createElement("div", null, ">", (0, _wcagContrast.score)((0, _wcagContrast.hex)(color.hex, '#000000'))), /*#__PURE__*/_react.default.createElement("div", null, (0, _wcagContrast.score)((0, _wcagContrast.hex)(color.hex, '#FFFFFF'))))));
  });
  return /*#__PURE__*/_react.default.createElement(_Table.default, {
    className: "color--list"
  }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("th", null, "Token"), /*#__PURE__*/_react.default.createElement("th", null, "Role"), /*#__PURE__*/_react.default.createElement("th", {
    colspan: 2
  }, "Value"))), /*#__PURE__*/_react.default.createElement("tbody", null, list));
};

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