// @flow
import React, { useContext } from 'react';
import { action } from '@storybook/addon-actions';
import { Expander, ExpanderContext } from './index';
import type { ExpanderProps } from './expander.proptypes';
import docs from './expander.mdx';
import { Span } from '../../typography';
import { Box } from '../../../primitives/box';
import { Button } from '../../actions';

export default {
  component: Expander,
  title: 'Components/Layout Containers/Expander ⚠️',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

const DEFAULT_PROPS: ExpanderProps = {
  onToggle: action('is open'),
  headingComponent: (
    <Box spacing="p1" colorName="brand-secondary-bg">
      <Span colorName="brand-secondary-fg" bold>
        I am a toggle
      </Span>
    </Box>
  ),
};

export const Default = () => {
  const demoProps = {
    headingComponent: (
      <Box spacing={['mb1', 'ph1']}>
        <Span colorName="brand-secondary-fg" bold>
          I am a toggle
        </Span>
      </Box>
    ),
  };

  return (
    <Box spacing="ph2">
      <Expander {...{ ...DEFAULT_PROPS, ...demoProps }}>
        <Box spacing={['pv3']}>Something amazing I guess</Box>
      </Expander>
    </Box>
  );
};

export const OpenByDefault = () => {
  return (
    <Box spacing="ph2">
      <Expander {...DEFAULT_PROPS} isOpen>
        <Box spacing={['pv3']}>Already open!</Box>
      </Expander>
    </Box>
  );
};

export const CustomButtonStyles = () => {
  return (
    <Box spacing="p2" colorName="background">
      <Expander {...DEFAULT_PROPS} buttonStyles={{ width: '100%' }}>
        <Box colorName="white" spacing="p2">
          Something amazing I guess
        </Box>
      </Expander>
    </Box>
  );
};

export const AlternateHeading = () => {
  const demoProps = {
    buttonStyles: { boxShadow: 'none' },
    headingComponent: (
      <Span colorName="brand-secondary-fg" bold>
        Show more
      </Span>
    ),
    headingComponentOpen: <Span colorName="brand-secondary-fg">Show less</Span>,
  };

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

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>
  );
};

export const WithContext = () => {
  return (
    <Box spacing="ph2">
      <Expander {...DEFAULT_PROPS}>
        <DemoWithContext />
      </Expander>
    </Box>
  );
};

export const MultipleChildren = () => {
  return (
    <Box spacing="p2" colorName="background">
      <Expander {...DEFAULT_PROPS}>
        <Box spacing="mt3">Something amazing</Box>
        <Box spacing="mt3">I guess</Box>
      </Expander>
    </Box>
  );
};
