// @flow
import React, { useState } from 'react';
import { action } from '@storybook/addon-actions';

import { ControllableExpander } from './controllable-expander.component';
import { useExpanderState } from './use-expander-state.hook';
import type { ControllableExpanderProps } from './controllable-expander.proptypes';
import docs from './controllable-expander.mdx';

import { Text } from '../../typography/text';
import { Button } from '../../actions/button';
import { Card } from '../../structures/card';

export default {
  component: ControllableExpander,
  title: 'Components/Layout Containers/Controllable expander',
  parameters: {
    docs: {
      page: docs,
    },
  },
};

const DEFAULT_PROPS: ControllableExpanderProps = {
  /* Add default props here */
  isOpen: false,
  onToggle: () => {},
  HeadingComponent: ({ isOpen = false }) => (
    <Text bold>{isOpen ? 'Close me' : 'Open me'}</Text>
  ),
};

export const BasicInteractive = () => {
  const [isOpen, setIsOpen] = useState(DEFAULT_PROPS.isOpen);

  return (
    <ControllableExpander
      {...DEFAULT_PROPS}
      isOpen={isOpen}
      onToggle={() => setIsOpen((old) => !old)}
    >
      <Text>I&apos;m some extra text inside the expander!</Text>
    </ControllableExpander>
  );
};

export const ClosableByChildren = () => {
  const [isOpen, setIsOpen, useChildCallback] = useExpanderState(false);
  const logAndClose = useChildCallback(action('Child clicked'), []);

  return (
    <ControllableExpander
      {...DEFAULT_PROPS}
      isOpen={isOpen}
      onToggle={() => setIsOpen(!isOpen)}
    >
      <Card spacing="p2">
        <Text>This Expander is being controlled by useExpanderState</Text>
        <Button onClick={logAndClose}>Close Expander</Button>
      </Card>
    </ControllableExpander>
  );
};
