import * as React from 'react';
import { DocsContainer } from '@storybook/addon-docs/blocks';
import LinkTo from '@storybook/addon-links/react';
import {
  ThemeProvider,
  theme,
  textVariants,
  sx,
  Text,
  View,
} from '@tedconf/monterey';
import styled from '../src/components/styled';

export const H1 = props => (
  <ThemeProvider>
    <View sx={{ marginBottom: 6 }}>
      <Text as="h1" variant="5" color="TEDRed.0" {...props} />
    </View>
  </ThemeProvider>
);

export const H2 = props => (
  <ThemeProvider>
    <View sx={{ marginBottom: 6 }}>
      <Text as="h2" variant="3" color="black" {...props} />
    </View>
  </ThemeProvider>
);

export const H3 = props => (
  <ThemeProvider>
    <View sx={{ marginBottom: 6 }}>
      <Text as="h3" variant="2b" color="black" {...props} />
    </View>
  </ThemeProvider>
);

export const H4 = props => (
  <ThemeProvider>
    <View
      sx={{
        marginBottom: 6,
        paddingLeft: 2,
        boxShadow: `-${theme.space[1]} 0 0 0 ${theme.colors.gray[3]}`,
      }}
    >
      <Text as="h4" variant="2r" color="black" {...props} />
    </View>
  </ThemeProvider>
);

export const H5 = props => (
  <ThemeProvider>
    <View sx={{ marginBottom: 6 }}>
      <Text as="h5" variant="1b" color="black" {...props} />
    </View>
  </ThemeProvider>
);

export const P = props => (
  <ThemeProvider>
    <View sx={{ marginBottom: 6 }}>
      <Text as="p" color="black" {...props} />
    </View>
  </ThemeProvider>
);

export const Code = props => (
  <ThemeProvider>
    <View
      sx={{
        backgroundColor: 'black',
        paddingY: 1,
        paddingX: 2,
      }}
    >
      <Text as="h2" variant="1r" color="TEDRed.0" {...props} />
    </View>
  </ThemeProvider>
);

export const OrderedList = styled(View)(
  sx({
    borderLeft: theme => `${theme.sizes[1]} solid ${theme.colors.TEDRed[1]}`,
    marginBottom: 6,
    '& li': {
      paddingLeft: 2,
      marginBottom: 'root',
      ...textVariants['1r'],
      '& > .docblock-source': {
        margin: 0,
        marginTop: 1,
      },
    },
  }),
);

export const UnorderedList = styled(View)(
  sx({
    borderLeft: theme => `${theme.sizes[1]} solid ${theme.colors.TEDRed[1]}`,
    marginBottom: 6,
    '& li': {
      paddingLeft: 2,
      marginBottom: 'root',
      ...textVariants['1r'],
      '& > .docblock-source': {
        margin: 0,
        marginTop: 1,
      },
    },
  }),
);

export const OL = props => (
  <ThemeProvider>
    <OrderedList {...props} />
  </ThemeProvider>
);

export const UL = props => (
  <ThemeProvider>
    <UnorderedList {...props} />
  </ThemeProvider>
);

export const A = props => {
  return (
    <ThemeProvider>
      <a
        {...props}
        css={sx({
          textDecoration: 'underline',
          color: 'TEDRed.0',
          '&:hover': {
            color: 'red.2',
          },
        })}
      />
    </ThemeProvider>
  );
};

export const Img = props => (
  <ThemeProvider>
    <img {...props} />
  </ThemeProvider>
);

export const Em = props => (
  <ThemeProvider>
    <em
      {...props}
      css={sx({
        fontStyle: 'italic',
      })}
    />
  </ThemeProvider>
);

export const Link = props => {
  return (
    <ThemeProvider>
      <LinkTo
        {...props}
        css={sx({
          textDecoration: 'underline',
          color: 'TEDRed.0',
        })}
      />
    </ThemeProvider>
  );
};

export const container = ({ context, children, ...props }) => {
  return (
    <React.Fragment>
      <ThemeProvider {...props}>
        <DocsContainer context={context}>{children}</DocsContainer>
      </ThemeProvider>
    </React.Fragment>
  );
};