// @flow
import React, { useContext } from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { Expander, ExpanderContext } from './index';
import { withDocs } from '../../../../.storybook/with-docs';
import docs from './EXPANDER.mkd';

import { Span } from '../../typography';
import { Box } from '../../../primitives/box';
import { Button } from '../../actions';

const DemoWithContext = () => {
  const { toggleExpander } = useContext(ExpanderContext);
  return (
    <Box spacing={['pv3']}>
      <Box spacing="mb3">Something amazing I guess</Box>
      <Button onClick={toggleExpander}>
        I am a child component accessing the Expander context
      </Button>
    </Box>
  );
};

storiesOf('Core/Behaviors/Expander', module)
  .add(
    'normal',
    withDocs(docs, [Box])(() => {
      const demoProps = {
        onToggle: action('is open'),
        headingComponent: (
          <Box spacing={['mb1', 'ph1']}>
            <Span colorName="brand-primary-base" bold>
              I am a toggle
            </Span>
          </Box>
        ),
      };

      return (
        <Box spacing="ph2">
          <Expander {...demoProps}>
            <Box spacing={['pv3']}>Something amazing I guess</Box>
          </Expander>
        </Box>
      );
    }),
  )
  .add(
    'open by default',
    withDocs(docs, [Box])(() => {
      const demoProps = {
        onToggle: action('is open'),
        headingComponent: (
          <Box spacing={['mb1', 'ph1']}>
            <Span colorName="brand-secondary-dark">I am a toggle</Span>
          </Box>
        ),
      };

      return (
        <Box spacing="ph2">
          <Expander {...demoProps} isOpen>
            <Box spacing={['pv3']}>Already open!</Box>
          </Expander>
        </Box>
      );
    }),
  )
  .add(
    'with custom button styles',
    withDocs(docs, [Box])(() => {
      const demoProps = {
        onToggle: action('is open'),
        headingComponent: (
          <Box spacing="p1" colorName="brand-secondary-bg">
            <Span colorName="brand-secondary-fg" bold>
              I am a toggle
            </Span>
          </Box>
        ),
        buttonStyles: { width: '100%' },
      };

      return (
        <Box spacing="p2" colorName="background">
          <Expander {...demoProps}>
            <Box colorName="white" spacing="p2">
              Something amazing I guess
            </Box>
          </Expander>
        </Box>
      );
    }),
  )
  .add(
    'with alternate heading component',
    withDocs(docs, [Box])(() => {
      const demoProps = {
        onToggle: action('is open'),
        buttonStyles: { boxShadow: 'none' },
        headingComponent: (
          <Span colorName="brand-primary-base" bold>
            Show more
          </Span>
        ),
        headingComponentOpen: (
          <Span colorName="brand-secondary-base">Show less</Span>
        ),
      };

      return (
        <Box spacing="p2" colorName="background">
          <Expander {...demoProps}>
            <Box spacing="mt3">Something amazing I guess</Box>
          </Expander>
        </Box>
      );
    }),
  )
  .add(
    'utilizing context',
    withDocs(docs, [Box])(() => {
      const demoProps = {
        onToggle: action('is open'),
        headingComponent: (
          <Box spacing={['mb1', 'ph1']}>
            <Span colorName="brand-primary-base" bold>
              I am a toggle with context
            </Span>
          </Box>
        ),
      };

      return (
        <Box spacing="ph2">
          <Expander {...demoProps}>
            <DemoWithContext />
          </Expander>
        </Box>
      );
    }),
  )
  .add(
    'with multiple children',
    withDocs(docs, [Box])(() => {
      const demoProps = {
        onToggle: action('is open'),
        headingComponent: (
          <Span colorName="brand-primary-base" bold>
            Show more
          </Span>
        ),
        headingComponentOpen: (
          <Span colorName="brand-secondary-base">Show less</Span>
        ),
      };

      return (
        <Box spacing="p2" colorName="background">
          <Expander {...demoProps}>
            <Box spacing="mt3">Something amazing</Box>
            <Box spacing="mt3">I guess</Box>
          </Expander>
        </Box>
      );
    }),
  );
