import React from 'react';
import { List, ListItem } from '../../components/List';
import Tooltip from '../../components/Tooltip';
import { Module, ModuleBody } from '../../components/Module';
import Item from '../../components/Item';
import Table from '../../components/Table';
import Text from '../../components/Text';
import Tag from '../../components/Tag';
import Story from '../../components/Story';
import { wfpColorsMeta } from '@wfp/themes';
import { hex, score } from 'wcag-contrast';
import './colours.scss';
export var ColourList = function ColourList(_ref) {
  var filter = _ref.filter;
  console.log(wfpColorsMeta);
  var filteredColors = Object.values(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.createElement("tr", {
      className: "color__item",
      kind: "horizontal"
    }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("h5", null, /*#__PURE__*/React.createElement(Tag, null, "$", color.variable))), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Story, null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("pre", null, color.description)), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Text, {
      kind: "code"
    }, "Former name: ", color.former)))), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(Text, {
      kind: "code"
    }, color.hex), /*#__PURE__*/React.createElement("br", null)), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.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.createElement("div", {
      className: "color__contrast"
    }, /*#__PURE__*/React.createElement("span", null, "A")), /*#__PURE__*/React.createElement("div", {
      className: "color__contrast color__contrast--light"
    }, /*#__PURE__*/React.createElement("span", null, "A"))), /*#__PURE__*/React.createElement("div", {
      className: "color__field__description"
    }, /*#__PURE__*/React.createElement("div", null, ">", score(hex(color.hex, '#000000'))), /*#__PURE__*/React.createElement("div", null, score(hex(color.hex, '#FFFFFF'))))));
  });
  return /*#__PURE__*/React.createElement(Table, {
    className: "color--list"
  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Token"), /*#__PURE__*/React.createElement("th", null, "Role"), /*#__PURE__*/React.createElement("th", {
    colspan: 2
  }, "Value"))), /*#__PURE__*/React.createElement("tbody", null, list));
};
export default ColourList;