import React__default from 'react';
import styled from 'styled-components';
import { getColorAlias, getFontSize, getSpacing, getColorAliasValue } from '../../utils/index.js';
import { Tag } from '../Tag/index.js';
import { skipTokens } from '@jet-pie/theme/variations/skip';

const List = styled.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.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: ${getColorAlias('contentDefault')};
      ${getFontSize('size16')};
      margin-bottom: ${getSpacing('s04')};
    }

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

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

    > div {
      margin-bottom: ${getSpacing('s04')};
    }
  }
`;
const ColorTile = styled.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 } = skipTokens;
    return (Object.keys(global).find((a) => {
        return global[a] === color;
    }) || '');
};
const ListItem = ({ name, color, isAlias }) => {
    const colorName = isAlias ? getColorName(color) : '';
    return (React__default.createElement(ListItemWrapper, null,
        React__default.createElement("div", null,
            React__default.createElement("span", null, name),
            React__default.createElement(Tag, { size: "large", variant: "neutral", label: getColorAliasValue(color).toUpperCase() }),
            colorName !== '' && (React__default.createElement("span", null,
                React__default.createElement("b", null, "Global Token:"),
                React__default.createElement(Tag, { size: "large", variant: "info", label: colorName })))),
        React__default.createElement(ColorTile, { color: color })));
};
function ColorList({ colors, isAlias }) {
    return (React__default.createElement(List, null, Object.entries(colors).map(([key, color]) => (React__default.createElement(ListItem, { key: key, name: key, color: String(color), isAlias: Boolean(isAlias) })))));
}

export { ColorList };
