import { Meta, ColorPalette, ColorItem } from "@storybook/addon-docs";
import { theme } from "../theme";

<Meta title="Tokens/Colors" />

<ColorPalette>
  <ColorItem
    title="Red"
    subtitle="50-500"
    colors={Object.keys(theme.palette)
      .filter((k) => k.startsWith("R"))
      .reduce((prev, curr) => {
        prev[curr] = theme.palette[curr];
        return prev;
      }, {})}
  />
  <ColorItem
    title="Yellow"
    subtitle="50-500"
    colors={Object.keys(theme.palette)
      .filter((k) => k.startsWith("Y"))
      .reduce((prev, curr) => {
        prev[curr] = theme.palette[curr];
        return prev;
      }, {})}
  />
  <ColorItem
    title="Green"
    subtitle="50-500"
    colors={Object.keys(theme.palette)
      .filter((k) => k.startsWith("G"))
      .reduce((prev, curr) => {
        prev[curr] = theme.palette[curr];
        return prev;
      }, {})}
  />
  <ColorItem
    title="Teal"
    subtitle="50-500"
    colors={Object.keys(theme.palette)
      .filter((k) => k.startsWith("T"))
      .reduce((prev, curr) => {
        prev[curr] = theme.palette[curr];
        return prev;
      }, {})}
  />
  <ColorItem
    title="Blue"
    subtitle="50-500"
    colors={Object.keys(theme.palette)
      .filter((k) => k.startsWith("B"))
      .reduce((prev, curr) => {
        prev[curr] = theme.palette[curr];
        return prev;
      }, {})}
  />
  <ColorItem
    title="Purple"
    subtitle="50-500"
    colors={Object.keys(theme.palette)
      .filter((k) => k.startsWith("P"))
      .reduce((prev, curr) => {
        prev[curr] = theme.palette[curr];
        return prev;
      }, {})}
  />
  <ColorItem
    title="Neutral"
    subtitle="0-100"
    colors={Object.keys(theme.palette)
      .filter((k) => /\d$/.test(k) && parseInt(k.replace("N", "")) < 200)
      .reduce((prev, curr) => {
        prev[curr] = theme.palette[curr];
        return prev;
      }, {})}
  />
  <ColorItem
    title="Neutral"
    subtitle="100-900"
    colors={Object.keys(theme.palette)
      .filter((k) => /\d$/.test(k) && parseInt(k.replace("N", "")) >= 100)
      .reduce((prev, curr) => {
        prev[curr] = theme.palette[curr];
        return prev;
      }, {})}
  />
  <ColorItem
    title="Neutral"
    subtitle="Alpha (0-100)"
    colors={Object.keys(theme.palette)
      .filter(
        (k) =>
          /[^\d]$/.test(k) &&
          parseInt(k.replace("N", "").replace("A", "")) < 200
      )
      .reduce((prev, curr) => {
        prev[curr] = theme.palette[curr];
        return prev;
      }, {})}
  />
  <ColorItem
    title="Neutral"
    subtitle="Alpha (100-900)"
    colors={Object.keys(theme.palette)
      .filter(
        (k) =>
          /[^\d]$/.test(k) &&
          parseInt(k.replace("N", "").replace("A", "")) >= 100
      )
      .reduce((prev, curr) => {
        prev[curr] = theme.palette[curr];
        return prev;
      }, {})}
  />
</ColorPalette>
