import { theme } from '@tedconf/monterey';
import { addDecorator, addParameters } from '@storybook/react';
import { withKnobs } from '@storybook/addon-knobs';
import { create } from '@storybook/theming';
import MontereyDecorator from './monterey-decorator';
import * as DocsComponents from './docs-components';

addDecorator(MontereyDecorator);
addDecorator(withKnobs);

const formatBackgroundColors = colors =>
  Object.entries(colors)
    .flatMap(([k, v]) => {
      if (typeof v === 'object') {
        return Object.entries(v).map(([l, val]) => ({
          name: `${k}.${l}`,
          value: val,
        }));
      }
      return {
        name: k,
        value: v,
        ...(k === 'white' && {
          default: true,
        }),
      };
    })
    .reverse();

const MONTEREY_THEME = create({
  base: 'light',

  colorPrimary: theme.colors.gray[1],
  colorSecondary: theme.colors.TEDRed[1],

  // UI
  appBg: theme.colors.gray[2],
  appContentBg: theme.colors.white,
  appBorderColor: theme.colors.gray[2],
  appBorderRadius: 8,

  // Typography
  // @ts-ignore
  fontBase: theme.fonts.sans,
  // @ts-ignore
  fontCode: theme.fonts.mono,

  // Text colors
  // @ts-ignore
  textColor: theme.colors.black,
  // @ts-ignore
  textInverseColor: theme.colors.gray[1],

  // Toolbar default and active colors
  barTextColor: theme.colors.gray[1],
  barSelectedColor: theme.colors.gray[0],
  barBg: theme.colors.gray[2],

  // Form colors
  inputBg: theme.colors.white,
  inputTextColor: theme.colors.gray[1],
  inputBorderRadius: 2,

  gridCellSize: 4,

  brandTitle: 'Monterey by TED',
  brandUrl: 'https://example.com',
  brandImage: require('../src/components/branding/monterey-logo.svg'),
});

addParameters({
  backgrounds: formatBackgroundColors(theme.colors),
  options: {
    theme: MONTEREY_THEME,
    hierarchySeparator: /\/|\./,
    hierarchyRootSeparator: '|',
  },
  docs: {
    components: {
      h1: DocsComponents.H1,
      h2: DocsComponents.H2,
      h3: DocsComponents.H3,
      h4: DocsComponents.H4,
      h5: DocsComponents.H5,
      a: DocsComponents.A,
      p: DocsComponents.P,
      code: DocsComponents.Code,
      ol: DocsComponents.OL,
      ul: DocsComponents.UL,
      em: DocsComponents.Em,
      img: DocsComponents.Img,
    },
    container: DocsComponents.container,
  },
});

export const Link = DocsComponents.Link;