// @flow
import React from 'react';
import styled from 'styled-components';
import {
  DocsContainer,
  type DocsContainerProps,
} from '@storybook/addon-docs/blocks';
import { themeDecorator } from '../utils/storybook/addons/patchwork-theme/theme.decorator';
import { hyperspeedAnimationsDecorator } from '../utils/storybook/addons/hyperspeed-animations/hyperspeed-animations.decorator';
import { deriveStorybookTheme } from '../utils/storybook/addons/patchwork-theme/storybook.theme';
import { themes } from '../src';
import { intlDecorator } from './intl.decorator';
import { DynamicThemeProvider } from '../utils/storybook/addons/patchwork-theme/theme.decorator';
import {
  Head1,
  Head2,
  Head3,
  Head4,
  Head5,
  Link,
  Span,
  Text,
  type HeadProps,
  type TextProps,
} from '../src/core/typography';
import { getPaletteColor } from '../src/mixins/branding';

const StyledCode = styled.code`
  background: ${getPaletteColor('info-bg')};
  border-radius: 5px;
  color: ${getPaletteColor('info-fg')};
  display: inline-block;
  font-family: monospace;
  font-size: 16px;
  padding: 0 5px;
`;

let theme;
try {
  theme = JSON.parse(window.localStorage.getItem('theme'));
} catch (e) {
  console.error('Failed to load patchwork theme from local storage');
}

export const parameters = {
  options: {
    theme: deriveStorybookTheme(
      // DEFAULT_THEME_NAME is injected by webpack.
      // $FlowFixMe eslint-disable-next-line
      theme ?? themes[DEFAULT_THEME_NAME || 'wealthsimple'],
    ),
    storySort: {
      method: 'alphabetical',
      order: [
        'Manual',
        ['Welcome', 'Accessibility'],
        'Design System',
        'Utilities',
        'Components',
        'Organisms',
        'Examples',
      ],
    },
  },
  docs: {
    components: {
      a: Link,
      h1: (props: HeadProps) => <Head1 spacing="mv3" {...props} />,
      h2: (props: HeadProps) => <Head2 spacing="mv3" {...props} />,
      h3: (props: HeadProps) => <Head3 spacing="mv3" {...props} />,
      h4: (props: HeadProps) => <Head4 spacing="mv3" {...props} />,
      h5: (props: HeadProps) => <Head5 spacing="mv3" {...props} />,
      p: (props: HeadProps) => <Text spacing="mv1" {...props} />,
      span: Span,
      li: (props: TextProps) => (
        <li>
          <Text {...props} />
        </li>
      ),
      inlineCode: StyledCode,
    },
    container: ({
      context,
      children,
    }: {
      ...DocsContainerProps,
      children: React$Node,
    }) => (
      <DocsContainer context={context}>
        <DynamicThemeProvider>{children}</DynamicThemeProvider>
      </DocsContainer>
    ),
    inlineStories: true,
  },
};

const a11yShotsOptions = {
  storySort: (a, b) => a[1].id.localeCompare(b[1].id),
  showNav: false,
  showPanel: false,
  isFullScreen: true,
  sidebarAnimations: false,
  isToolshown: false,
};

if (window.__IS_STORYSHOTS__) {
  parameters.options = {
    ...parameters.options,
    a11yShotsOptions,
  };
}

export const decorators = [
  themeDecorator,
  intlDecorator,
  hyperspeedAnimationsDecorator,
];
