'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var styled = require('styled-components');
var index = require('../../utils/index.js');
var index$1 = require('../Tag/index.js');
var skip = require('@jet-pie/theme/variations/skip');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

const List = styled__default['default'].div `
  font-family: Ubuntu;
  margin: 2rem 1rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 16px;
  grid-column-gap: 32px;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  @media (max-width: 600px) {
    grid-template-columns: 1fr;
  }
`;
const ListItemWrapper = styled__default['default'].div `
  display: flex;
  width: 100%;
  padding: 14px 0;
  flex-grow: 1;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid lightgrey;
  justify-content: space-between;
  div {
    display: flex;
    flex-direction: column;

    span:nth-child(1) {
      color: ${index.getColorAlias('contentDefault')};
      ${index.getFontSize('size16')};
      margin-bottom: ${index.getSpacing('s04')};
    }

    span:nth-child(2) {
      color: ${index.getColorAlias('contentSubdued')};
      ${index.getFontSize('size16')};
    }

    span:nth-child(3) {
      color: ${index.getColorAlias('contentDefault')};
      display: flex;
      ${index.getFontSize('size16')};
      margin-bottom: ${index.getSpacing('s04')};
      b {
        margin-right: ${index.getSpacing('s02')};
        text-decoration: underline;
      }
    }

    > div {
      margin-bottom: ${index.getSpacing('s04')};
    }
  }
`;
const ColorTile = styled__default['default'].span `
  width: 120px;
  height: 120px;
  border-radius: ${(props) => props.theme.radius.roundedC};
  background: ${(props) => props.color};
  border: 1px solid lightgrey;
`;
const getColorName = (color) => {
    const { global } = skip.skipTokens;
    return (Object.keys(global).find((a) => {
        return global[a] === color;
    }) || '');
};
const ListItem = ({ name, color, isAlias }) => {
    const colorName = isAlias ? getColorName(color) : '';
    return (React__default['default'].createElement(ListItemWrapper, null,
        React__default['default'].createElement("div", null,
            React__default['default'].createElement("span", null, name),
            React__default['default'].createElement(index$1.Tag, { size: "large", variant: "neutral", label: index.getColorAliasValue(color).toUpperCase() }),
            colorName !== '' && (React__default['default'].createElement("span", null,
                React__default['default'].createElement("b", null, "Global Token:"),
                React__default['default'].createElement(index$1.Tag, { size: "large", variant: "info", label: colorName })))),
        React__default['default'].createElement(ColorTile, { color: color })));
};
function ColorList({ colors, isAlias }) {
    return (React__default['default'].createElement(List, null, Object.entries(colors).map(([key, color]) => (React__default['default'].createElement(ListItem, { key: key, name: key, color: String(color), isAlias: Boolean(isAlias) })))));
}

exports.ColorList = ColorList;
