import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs/blocks';
import { buildNewPalette } from '../theme/hugo/newTokens';

export const lightTokens = buildNewPalette('light');
export const darkTokens = buildNewPalette('dark');

export const tokenSections = {
  Background: {
    Layout: [
      {
        title: 'Background / Layout / Default',
        subtitle: 'light / dark',
        colors: {
          'grey[50]': lightTokens.background.layout.default,
          'blackInk[950]': darkTokens.background.layout.default,
        },
      },
      {
        title: 'Background / Layout / Tertiary',
        subtitle: 'light / dark',
        colors: {
          white: lightTokens.background.layout.tertiary,
          'blackInk[900]': darkTokens.background.layout.tertiary,
        },
      },
      {
        title: 'Background / Layout / Brand',
        subtitle: 'light / dark',
        colors: {
          'brand[50]': lightTokens.background.layout.brand,
          'brand[950]': darkTokens.background.layout.brand,
        },
      },
      {
        title: 'Background / Layout / Inverted',
        subtitle: 'light / dark',
        colors: {
          'blackInk[800]': lightTokens.background.layout.inverted,
          'blackInk[50]': darkTokens.background.layout.inverted,
        },
      },
    ],
    Elements: [
      {
        title: 'Background / Elements / Default',
        subtitle: 'light / dark',
        colors: {
          white: lightTokens.background.elements.default,
          'blackInk[900]': darkTokens.background.elements.default,
        },
      },
      {
        title: 'Background / Elements / Overlay',
        subtitle: 'light / dark',
        colors: {
          white: lightTokens.background.elements.overlay,
          'blackInk[800]': darkTokens.background.elements.overlay,
        },
      },
      {
        title: 'Background / Elements / Grey',
        subtitle: 'light / dark',
        colors: {
          'grey[100]': lightTokens.background.elements.grey,
          'blackInk[700]': darkTokens.background.elements.grey,
        },
      },
      {
        title: 'Background / Elements / Brand',
        subtitle: 'light / dark',
        colors: {
          'brand[50]': lightTokens.background.elements.brand,
          'brand[950]': darkTokens.background.elements.brand,
        },
      },
      {
        title: 'Background / Elements / Inverted',
        subtitle: 'light / dark',
        colors: {
          'grey[950]': lightTokens.background.elements.inverted,
          'grey[950] ': darkTokens.background.elements.inverted,
        },
      },
      {
        title: 'Background / Elements / Disabled',
        subtitle: 'light / dark',
        colors: {
          'grey[150]': lightTokens.background.elements.disabled,
          'blackInk[800]': darkTokens.background.elements.disabled,
        },
      },
    ],
    Feedback: [
      {
        title: 'Background / Feedback / Success',
        subtitle: 'light / dark',
        colors: {
          'green[50]': lightTokens.background.feedback.success,
          'green[900]': darkTokens.background.feedback.success,
        },
      },
      {
        title: 'Background / Feedback / Error',
        subtitle: 'light / dark',
        colors: {
          'red[50]': lightTokens.background.feedback.error,
          'red[900]': darkTokens.background.feedback.error,
        },
      },
      {
        title: 'Background / Feedback / Info',
        subtitle: 'light / dark',
        colors: {
          'skyBlue[50]': lightTokens.background.feedback.info,
          'skyBlue[900]': darkTokens.background.feedback.info,
        },
      },
      {
        title: 'Background / Feedback / Warning',
        subtitle: 'light / dark',
        colors: {
          'yellow[50]': lightTokens.background.feedback.warning,
          'yellow[900]': darkTokens.background.feedback.warning,
        },
      },
      {
        title: 'Background / Feedback / Highlight',
        subtitle: 'light / dark',
        colors: {
          'purple[50]': lightTokens.background.feedback.highlight,
          'purple[900]': darkTokens.background.feedback.highlight,
        },
      },
    ],
  },
  Borders: {
    Neutral: [
      {
        title: 'Border / Neutral / Default',
        subtitle: 'light / dark',
        colors: {
          'grey[200]': lightTokens.border.neutral.default,
          'blackInk[700]': darkTokens.border.neutral.default,
        },
      },
      {
        title: 'Border / Neutral / Brand',
        subtitle: 'light / dark',
        colors: {
          'brand[200]': lightTokens.border.neutral.brand,
          'brand[800]': darkTokens.border.neutral.brand,
        },
      },
      {
        title: 'Border / Neutral / Inverted',
        subtitle: 'light / dark',
        colors: {
          'grey[950]': lightTokens.border.neutral.inverted,
          'grey[950] ': darkTokens.border.neutral.inverted,
        },
      },
      {
        title: 'Border / Neutral / Divider',
        subtitle: 'light / dark',
        colors: {
          'grey[100]': lightTokens.border.neutral.divider,
          'blackInk[700]': darkTokens.border.neutral.divider,
        },
      },
    ],
    States: [
      {
        title: 'Border / States / Success',
        subtitle: 'light / dark',
        colors: {
          'green[200]': lightTokens.border.states.success,
          'green[800]': darkTokens.border.states.success,
        },
      },
      {
        title: 'Border / States / Error',
        subtitle: 'light / dark',
        colors: {
          'red[200]': lightTokens.border.states.error,
          'red[800]': darkTokens.border.states.error,
        },
      },
      {
        title: 'Border / States / Info',
        subtitle: 'light / dark',
        colors: {
          'skyBlue[200]': lightTokens.border.states.info,
          'skyBlue[800]': darkTokens.border.states.info,
        },
      },
      {
        title: 'Border / States / Warning',
        subtitle: 'light / dark',
        colors: {
          'yellow[200]': lightTokens.border.states.warning,
          'yellow[800]': darkTokens.border.states.warning,
        },
      },
      {
        title: 'Border / States / Secondary',
        subtitle: 'light / dark',
        colors: {
          'purple[200]': lightTokens.border.states.secondary,
          'purple[800]': darkTokens.border.states.secondary,
        },
      },
      {
        title: 'Border / States / Highlight',
        subtitle: 'light / dark',
        colors: {
          'purple[200]': lightTokens.border.states.highlight,
          'purple[800]': darkTokens.border.states.highlight,
        },
      },
    ],
  },
  Text: {
    Neutral: [
      {
        title: 'Text / Neutral / Default',
        subtitle: 'light / dark',
        colors: {
          'grey[950]': lightTokens.text.neutral.default,
          'grey[50]': darkTokens.text.neutral.default,
        },
      },
      {
        title: 'Text / Neutral / Brand',
        subtitle: 'light / dark',
        colors: {
          'brand[900]': lightTokens.text.neutral.brand,
          'brand[100]': darkTokens.text.neutral.brand,
        },
      },
      {
        title: 'Text / Neutral / Inverted',
        subtitle: 'light / dark',
        colors: {
          white: lightTokens.text.neutral.inverted,
          'white ': darkTokens.text.neutral.inverted,
        },
      },
      {
        title: 'Text / Neutral / Lighter',
        subtitle: 'light / dark',
        colors: {
          'grey[800]': lightTokens.text.neutral.lighter,
          'grey[100]': darkTokens.text.neutral.lighter,
        },
      },
      {
        title: 'Text / Neutral / Disabled',
        subtitle: 'light / dark',
        colors: {
          'grey[700]': lightTokens.text.neutral.disabled,
          'grey[300]': darkTokens.text.neutral.disabled,
        },
      },
    ],
    Feedback: [
      {
        title: 'Text / Feedback / Success',
        subtitle: 'light / dark',
        colors: {
          'green[900]': lightTokens.text.feedback.success,
          'green[100]': darkTokens.text.feedback.success,
        },
      },
      {
        title: 'Text / Feedback / Error',
        subtitle: 'light / dark',
        colors: {
          'red[900]': lightTokens.text.feedback.error,
          'red[100]': darkTokens.text.feedback.error,
        },
      },
      {
        title: 'Text / Feedback / Warning',
        subtitle: 'light / dark',
        colors: {
          'yellow[900]': lightTokens.text.feedback.warning,
          'yellow[100]': darkTokens.text.feedback.warning,
        },
      },
      {
        title: 'Text / Feedback / Info',
        subtitle: 'light / dark',
        colors: {
          'skyBlue[900]': lightTokens.text.feedback.info,
          'skyBlue[100]': darkTokens.text.feedback.info,
        },
      },
      {
        title: 'Text / Feedback / Highlight',
        subtitle: 'light / dark',
        colors: {
          'purple[900]': lightTokens.text.feedback.highlight,
          'purple[100]': darkTokens.text.feedback.highlight,
        },
      },
    ],
  },
  Icon: {
    Neutral: [
      {
        title: 'Icon / Neutral / Default',
        subtitle: 'light / dark',
        colors: {
          'grey[950]': lightTokens.icon.neutral.default,
          'grey[50]': darkTokens.icon.neutral.default,
        },
      },
      {
        title: 'Icon / Neutral / Brand',
        subtitle: 'light / dark',
        colors: {
          'brand[900]': lightTokens.icon.neutral.brand,
          'brand[100]': darkTokens.icon.neutral.brand,
        },
      },
      {
        title: 'Icon / Neutral / Inverted',
        subtitle: 'light / dark',
        colors: {
          white: lightTokens.icon.neutral.inverted,
          'white ': darkTokens.icon.neutral.inverted,
        },
      },
      {
        title: 'Icon / Neutral / Lighter',
        subtitle: 'light / dark',
        colors: {
          'grey[800]': lightTokens.icon.neutral.lighter,
          'grey[100]': darkTokens.icon.neutral.lighter,
        },
      },
      {
        title: 'Icon / Neutral / Disabled',
        subtitle: 'light / dark',
        colors: {
          'grey[700]': lightTokens.icon.neutral.disabled,
          'grey[300]': darkTokens.icon.neutral.disabled,
        },
      },
    ],
    Feedback: [
      {
        title: 'Icon / Feedback / Success',
        subtitle: 'light / dark',
        colors: {
          'green[900]': lightTokens.icon.feedback.success,
          'green[100]': darkTokens.icon.feedback.success,
        },
      },
      {
        title: 'Icon / Feedback / Error',
        subtitle: 'light / dark',
        colors: {
          'red[900]': lightTokens.icon.feedback.error,
          'red[100]': darkTokens.icon.feedback.error,
        },
      },
      {
        title: 'Icon / Feedback / Warning',
        subtitle: 'light / dark',
        colors: {
          'yellow[900]': lightTokens.icon.feedback.warning,
          'yellow[100]': darkTokens.icon.feedback.warning,
        },
      },
      {
        title: 'Icon / Feedback / Info',
        subtitle: 'light / dark',
        colors: {
          'skyBlue[900]': lightTokens.icon.feedback.info,
          'skyBlue[100]': darkTokens.icon.feedback.info,
        },
      },
      {
        title: 'Icon / Feedback / Highlight',
        subtitle: 'light / dark',
        colors: {
          'purple[900]': lightTokens.icon.feedback.highlight,
          'purple[100]': darkTokens.icon.feedback.highlight,
        },
      },
    ],
  },
  Shadows: [
    {
      title: 'Shadows / 4dp',
      subtitle: 'light / dark',
      colors: {
        'grey[200] α0.6': lightTokens.shadows['4dp'],
        'grey[900]': darkTokens.shadows['4dp'],
      },
    },
    {
      title: 'Shadows / 8dp',
      subtitle: 'light / dark',
      colors: {
        'grey[200] α0.8': lightTokens.shadows['8dp'],
        'grey[950]': darkTokens.shadows['8dp'],
      },
    },
    {
      title: 'Shadows / Inverted',
      subtitle: 'light / dark',
      colors: {
        'grey[300]': lightTokens.shadows.inverted,
        'grey[900]': darkTokens.shadows.inverted,
      },
    },
  ],
  'Action items': {
    'Button Background - Primary': [
      {
        title: 'Action / Button / Primary / Default',
        subtitle: 'light / dark',
        colors: {
          'brand[500]': lightTokens.action.button.background.primary.default,
          'brand[500] ': darkTokens.action.button.background.primary.default,
        },
      },
      {
        title: 'Action / Button / Primary / Hover',
        subtitle: 'light / dark',
        colors: {
          'brand[600]': lightTokens.action.button.background.primary.hover,
          'brand[400]': darkTokens.action.button.background.primary.hover,
        },
      },
      {
        title: 'Action / Button / Primary / Focus',
        subtitle: 'light / dark',
        colors: {
          'brand[700]': lightTokens.action.button.background.primary.focus,
          'brand[300]': darkTokens.action.button.background.primary.focus,
        },
      },
      {
        title: 'Action / Button / Primary / Disabled',
        subtitle: 'light / dark',
        colors: {
          'grey[200]': lightTokens.action.button.background.primary.disabled,
          'grey[200] ': darkTokens.action.button.background.primary.disabled,
        },
      },
    ],
    'Button Background - Secondary': [
      {
        title: 'Action / Button / Secondary / Default',
        subtitle: 'light / dark',
        colors: {
          white: lightTokens.action.button.background.secondary.default,
          'blackInk[900]':
            darkTokens.action.button.background.secondary.default,
        },
      },
      {
        title: 'Action / Button / Secondary / Hover',
        subtitle: 'light / dark',
        colors: {
          'brand[50]': lightTokens.action.button.background.secondary.hover,
          'brand[900]': darkTokens.action.button.background.secondary.hover,
        },
      },
      {
        title: 'Action / Button / Secondary / Focus',
        subtitle: 'light / dark',
        colors: {
          'brand[50]': lightTokens.action.button.background.secondary.focus,
          'brand[900]': darkTokens.action.button.background.secondary.focus,
        },
      },
      {
        title: 'Action / Button / Secondary / Disabled',
        subtitle: 'light / dark',
        colors: {
          white: lightTokens.action.button.background.secondary.disabled,
          'blackInk[900]':
            darkTokens.action.button.background.secondary.disabled,
        },
      },
    ],
    'Button Background - Tertiary': [
      {
        title: 'Action / Button / Tertiary / Hover',
        subtitle: 'light / dark',
        colors: {
          'grey[100] α0.6': lightTokens.action.button.background.tertiary.hover,
          'grey[100] α0.6 ': darkTokens.action.button.background.tertiary.hover,
        },
      },
      {
        title: 'Action / Button / Tertiary / Focus',
        subtitle: 'light / dark',
        colors: {
          'grey[100] α0.8': lightTokens.action.button.background.tertiary.focus,
          'grey[100] α0.8 ': darkTokens.action.button.background.tertiary.focus,
        },
      },
    ],
    'Button Background - Success': [
      {
        title: 'Action / Button / Success / Default',
        subtitle: 'light / dark',
        colors: {
          'green[600]': lightTokens.action.button.background.success.default,
          'green[600] ': darkTokens.action.button.background.success.default,
        },
      },
      {
        title: 'Action / Button / Success / Hover',
        subtitle: 'light / dark',
        colors: {
          'green[700]': lightTokens.action.button.background.success.hover,
          'green[700] ': darkTokens.action.button.background.success.hover,
        },
      },
      {
        title: 'Action / Button / Success / Focus',
        subtitle: 'light / dark',
        colors: {
          'green[700]': lightTokens.action.button.background.success.focus,
          'green[700]  ': darkTokens.action.button.background.success.focus,
        },
      },
      {
        title: 'Action / Button / Success / Disabled',
        subtitle: 'light / dark',
        colors: {
          'grey[200]': lightTokens.action.button.background.success.disabled,
          'grey[200]  ': darkTokens.action.button.background.success.disabled,
        },
      },
    ],
    'Button Background - Error': [
      {
        title: 'Action / Button / Error / Default',
        subtitle: 'light / dark',
        colors: {
          'red[600]': lightTokens.action.button.background.error.default,
          'red[600] ': darkTokens.action.button.background.error.default,
        },
      },
      {
        title: 'Action / Button / Error / Hover',
        subtitle: 'light / dark',
        colors: {
          'red[700]': lightTokens.action.button.background.error.hover,
          'red[700] ': darkTokens.action.button.background.error.hover,
        },
      },
      {
        title: 'Action / Button / Error / Focus',
        subtitle: 'light / dark',
        colors: {
          'red[700]': lightTokens.action.button.background.error.focus,
          'red[700]  ': darkTokens.action.button.background.error.focus,
        },
      },
      {
        title: 'Action / Button / Error / Disabled',
        subtitle: 'light / dark',
        colors: {
          'grey[200]': lightTokens.action.button.background.error.disabled,
          'grey[200]  ': darkTokens.action.button.background.error.disabled,
        },
      },
    ],
    'Action Background - Brand': [
      {
        title: 'Action / Background / Brand / Default',
        subtitle: 'light / dark',
        colors: {
          'brand[50]': lightTokens.action.background.brand.default,
          'brand[950]': darkTokens.action.background.brand.default,
        },
      },
      {
        title: 'Action / Background / Brand / Hover',
        subtitle: 'light / dark',
        colors: {
          'brand[100]': lightTokens.action.background.brand.hover,
          'brand[900]': darkTokens.action.background.brand.hover,
        },
      },
      {
        title: 'Action / Background / Brand / Selected',
        subtitle: 'light / dark',
        colors: {
          'brand[200]': lightTokens.action.background.brand.selected,
          'brand[800]': darkTokens.action.background.brand.selected,
        },
      },
      {
        title: 'Action / Background / Brand / Disabled',
        subtitle: 'light / dark',
        colors: {
          'grey[150]': lightTokens.action.background.brand.disabled,
          'blackInk[800]': darkTokens.action.background.brand.disabled,
        },
      },
    ],
    'Action Background - Neutral': [
      {
        title: 'Action / Background / Neutral / Hover',
        subtitle: 'light / dark',
        colors: {
          'grey[100] α0.8': lightTokens.action.background.neutral.hover,
          'blackInk[800]': darkTokens.action.background.neutral.hover,
        },
      },
      {
        title: 'Action / Background / Neutral / Focus',
        subtitle: 'light / dark',
        colors: {
          'grey[100] α0.8': lightTokens.action.background.neutral.focus,
          'blackInk[950]': darkTokens.action.background.neutral.focus,
        },
      },
    ],
    'Button Text': [
      {
        title: 'Action / Button / Text / Disabled / Darker',
        subtitle: 'light / dark',
        colors: {
          'grey[800]': lightTokens.action.button.text.disabled.darker,
          'grey[200]': darkTokens.action.button.text.disabled.darker,
        },
      },
      {
        title: 'Action / Button / Text / Primary / Default',
        subtitle: 'light / dark',
        colors: {
          white: lightTokens.action.button.text.primary.default,
          'white ': darkTokens.action.button.text.primary.default,
        },
      },
      {
        title: 'Action / Button / Text / Tertiary / Default',
        subtitle: 'light / dark',
        colors: {
          'brand[900]': lightTokens.action.button.text.tertiary.default,
          'brand[100]': darkTokens.action.button.text.tertiary.default,
        },
      },
    ],
  },
  graphics: {
    brand: [
      {
        title: 'Graphics / Brand / Light',
        colors: lightTokens.graphics.brand
        },
      {
        title: 'Graphics / Brand / Dark',
        colors: darkTokens.graphics.brand
      },
    ],
    success: [
      {
        title: 'Graphics / Success / Light',
        colors: lightTokens.graphics.success
      },
      {
          title: 'Graphics / Success / Dark',
          colors: darkTokens.graphics.success
      }
    ],
    error: [
      {
        title: 'Graphics / Error / Light',
        colors: lightTokens.graphics.error
      },
      {
        title: 'Graphics / Error / Dark',
        colors: darkTokens.graphics.error
      }
    ],
    warning: [
      {
        title: 'Graphics / Warning / Light',
        colors: lightTokens.graphics.warning
      },
      {
        title: 'Graphics / Warning / Dark',
        colors: darkTokens.graphics.warning
      }
    ],
    info: [
      {
        title: 'Graphics / Info / Light',
        colors: lightTokens.graphics.info
      },
      {
        title: 'Graphics / Info / Dark',
        colors: darkTokens.graphics.info
      }
    ],
    purple: [
      {
          title: 'Graphics / Purple / Light',
          colors: lightTokens.graphics.purple
        },
      {
          title: 'Graphics / Purple / Dark',
          colors: darkTokens.graphics.purple
        }
    ],
    teal: [
      {
          title: 'Graphics / Teal / Light',
          colors: lightTokens.graphics.teal
        },
      {
          title: 'Graphics / Teal / Dark',
          colors: darkTokens.graphics.teal
        }
    ],
    lime: [
      {
          title: 'Graphics / Lime / Light',
          colors: lightTokens.graphics.lime
        },
      {
          title: 'Graphics / Lime / Dark',
          colors: darkTokens.graphics.lime
        }
    ],
    flamingo: [
      {
          title: 'Graphics / Flamingo / Light',
          colors: lightTokens.graphics.flamingo
        },
      {
          title: 'Graphics / Flamingo / Dark',  
          colors: darkTokens.graphics.flamingo
        }
    ],
    tan: [
      {
          title: 'Graphics / Tan / Light',
          colors: lightTokens.graphics.tan
        },
      {
          title: 'Graphics / Tan / Dark',
          colors: darkTokens.graphics.tan
        }
    ],
    salmon: [
      {
          title: 'Graphics / Salmon / Light',
          colors: lightTokens.graphics.salmon
        },
      {
          title: 'Graphics / Salmon / Dark',
          colors: darkTokens.graphics.salmon
        }
    ],
    pink: [
      {
          title: 'Graphics / Pink / Light',
          colors: lightTokens.graphics.pink
        },
      {
          title: 'Graphics / Pink / Dark',
          colors: darkTokens.graphics.pink
        }
    ],
    mulberry: [
      {
          title: 'Graphics / Mulberry / Light',
          colors: lightTokens.graphics.mulberry
        },
      {
          title: 'Graphics / Mulberry / Dark',
          colors: darkTokens.graphics.mulberry
        }
    ],
    sunshine: [
      {
          title: 'Graphics / Sunshine / Light',
          colors: lightTokens.graphics.sunshine
        },
      {
          title: 'Graphics / Sunshine / Dark',
          colors: darkTokens.graphics.sunshine
        }
    ],
    blackInk: [
      {
        title: 'Graphics / Black Ink / Light',
        colors: lightTokens.graphics.blackInk
      },
      {
        title: 'Graphics / Black Ink / Dark',
        colors: darkTokens.graphics.blackInk
      }
    ],
  },
};

<Meta title="Design System/Colors/Tokens" />

# Semantic Tokens

{Object.keys(tokenSections).map(sectionTitle => (

<div key={sectionTitle}>
  <h2>{sectionTitle}</h2>
  {Array.isArray(tokenSections[sectionTitle]) ? (
    <ColorPalette>
      {tokenSections[sectionTitle].map(color => (
        <ColorItem
          key={color.title}
          title={color.title}
          subtitle={color.subtitle}
          colors={color.colors}
        />
      ))}
    </ColorPalette>
  ) : (
    Object.keys(tokenSections[sectionTitle]).map(subsectionTitle => (
      <div key={subsectionTitle}>
        <h3>{subsectionTitle}</h3>
        <ColorPalette>
          {tokenSections[sectionTitle][subsectionTitle].map(color => (
            <ColorItem
              key={color.title}
              title={color.title}
              subtitle={color.subtitle}
              colors={color.colors}
            />
          ))}
        </ColorPalette>
      </div>
    ))
  )}
</div>
))}
