import { Meta } from '@storybook/addon-docs';
import { theme } from 'twin.macro';

<Meta title="System/Colors" />

export const themeColors = theme`colors`;
// export const breakpoints = theme`breakpoints`;
export const foo = console.log(theme``);

<style>
  {`
  .chip-grid {
    display: grid;
    grid-template-columns: ${theme`gridTemplateColumns.2`};
    grid-gap: ${theme`spacing.2`};
  }
  @media (min-width: ${theme`screens.md`}) {
    .chip-grid {
      grid-template-columns: ${theme`gridTemplateColumns.4`};
      grid-gap: ${theme`spacing.4`};
    }
  }
  .chip {
    border-radius: 0.25rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-flow: column nowrap;
    overflow: hidden;
  }
  .chip-swatch {
    height: ${theme`spacing.20`};
  }
  .chip-label {
    padding: ${theme`spacing.2`};
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
  }
  .chip-display-name {
    white-space: nowrap;
  }
  .chip-value {
    font-family: ${theme`fontFamily.mono`};
    font-size: ${theme`fontSize.xs`};
  }
  `}
</style>

# Color palette

export function Chip({ name, value, as: Component = 'li' }) {
  return (
    <Component className="chip">
      <span className="chip-swatch" style={{ backgroundColor: value }} />
      <div className="chip-label">
        <span className="chip-display-name">{name}</span>
        <span className="chip-value">{value}</span>
      </div>
    </Component>
  );
}

<ul>
  {Object.entries(themeColors).map(([color, colorDetails]) => (
    <li key={color}>
      <a href={`#${color}`}>{color}</a>
    </li>
  ))}
</ul>

<React.Fragment>
  {Object.entries(themeColors).map(([color, colorDetails]) => (
    <React.Fragment key={color}>
      <h2 tw="text-2xl mt-8 mb-4 first:mt-0">
        <a name={color} />
        {color}
      </h2>
      <ul className="chip-grid" tw="grid gap-2 grid-cols-4">
        {typeof colorDetails === 'string' ? (
          <Chip name={color} value={colorDetails} />
        ) : (
          Object.entries(colorDetails).map(([subcolor, value]) => (
            <Chip
              key={subcolor}
              name={subcolor === 'DEFAULT' ? color : `${color}-${subcolor}`}
              value={value}
            />
          ))
        )}
      </ul>
    </React.Fragment>
  ))}
</React.Fragment>