import { select } from '@storybook/addon-knobs';
import { useState } from 'react';

import { Section, Button, Input, Modal } from '..';
import { Position, Priority } from '../common';

import Drawer from './Drawer';

export default {
  component: Drawer,
  title: 'Dialogs/Drawer',
};

export const Basic = () => {
  const [openDrawer, setOpenDrawer] = useState(false);
  const [openModal, setOpenModal] = useState(false);
  const position = select('position', [Position.LEFT, Position.RIGHT], Position.RIGHT);

  return (
    <>
      <Button disabled={false} block={false} onClick={() => setOpenDrawer(true)}>
        Open drawer
      </Button>
      <Drawer
        open={openDrawer}
        position={position}
        headerTitle="This is the title of the drawer"
        footerContent={
          <>
            <Button block onClick={() => {}}>
              Action 1
            </Button>
            <Button block priority={Priority.SECONDARY} onClick={() => {}}>
              Action 2
            </Button>
          </>
        }
        onClose={(event) => {
          console.log('drawer close');
          event.stopPropagation();
          setOpenDrawer(false);
        }}
      >
        <p>
          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
          stumptown try-hard chartreuse.
        </p>
        <Section className="m-t-2">
          <Input />
          <p className="m-t-3">Cat ipsum dolor sit amet, purr when being pet.</p>
          <Button onClick={() => setOpenModal(true)}>Open Modal</Button>
          <Modal
            body={
              <p className="m-t-4">
                I am baby actually poke kickstarter, street art jean shorts bespoke chambray
                activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo,
                cliche lyft marfa ethical waistcoat poke jean shorts. Scenester readymade selvage
                disrupt pok pok. La croix stumptown try-hard chartreuse. I am baby actually poke
                kickstarter, street art jean shorts bespoke chambray activated charcoal ramps marfa
                shoreditch tumeric, I am baby actually poke kickstarter, street art jean shorts
                bespoke chambray activated charcoal ramps marfa shoreditch tumeric tumblr. Mixtape
                cred palo santo, cliche lyft marfa ethical waistcoat poke jean shorts. Scenester
                readymade selvage disrupt pok pok.
              </p>
            }
            open={openModal}
            title="Title"
            onClose={() => {
              console.log('modal close');
              setOpenModal(false);
            }}
          />
        </Section>
        <p>
          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
          stumptown try-hard chartreuse.
        </p>
        <p>
          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
          stumptown try-hard chartreuse.
        </p>
        <p>
          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
          stumptown try-hard chartreuse.
        </p>
        <p>
          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
          stumptown try-hard chartreuse.
        </p>
        <p>
          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
          stumptown try-hard chartreuse.
        </p>
        <p>
          I am baby actually poke kickstarter, street art jean shorts bespoke chambray activated
          charcoal ramps marfa shoreditch tumeric tumblr. Mixtape cred palo santo, cliche lyft marfa
          ethical waistcoat poke jean shorts. Scenester readymade selvage disrupt pok pok. La croix
          stumptown try-hard chartreuse.
        </p>
      </Drawer>
    </>
  );
};
