import { useState } from 'react';
import { Position, Priority } from '../common';
import { Section, Button, Input, Modal, type DrawerProps, Body } from '..';
import Drawer from './Drawer';
import { lorem10, lorem20, lorem40, lorem5 } from '../test-utils';

export default {
  component: Drawer,
  title: 'Dialogs/Drawer',
  argTypes: {
    position: {
      control: 'select',
      options: [Position.LEFT, Position.RIGHT],
    },
  },
};

export const Basic = {
  args: {
    position: Position.RIGHT,
    open: true,
  },
  render: (args: DrawerProps) => {
    const [openDrawer, setOpenDrawer] = useState(args.open);
    const [openModal, setOpenModal] = useState(false);

    return (
      <>
        <Button v2 disabled={false} block={false} onClick={() => setOpenDrawer(true)}>
          Open drawer
        </Button>
        <Drawer
          open={openDrawer}
          position={args.position}
          headerTitle="This is the title of the drawer"
          footerContent={
            <>
              <Button v2 block className="m-b-1" onClick={() => {}}>
                Action 1
              </Button>
              <Button v2 block priority={Priority.SECONDARY} onClick={() => {}}>
                Action 2
              </Button>
            </>
          }
          onClose={(event) => {
            console.log('drawer close');
            event.stopPropagation();
            setOpenDrawer(false);
          }}
        >
          <p>{lorem20}</p>
          <Section className="m-t-2">
            <Input />
            <p className="m-t-3">{lorem5}</p>
            <Button v2 onClick={() => setOpenModal(true)}>
              Open Modal
            </Button>
            <Modal
              body={<p>{lorem40}</p>}
              open={openModal}
              title="Title"
              onClose={() => {
                console.log('modal close');
                setOpenModal(false);
              }}
            />
          </Section>
          <p>{lorem40}</p>
          <p>{lorem40}</p>
          <p>{lorem40}</p>
          <p>{lorem40}</p>
          <p>{lorem40}</p>
          <p>{lorem40}</p>
        </Drawer>
      </>
    );
  },
};

export const LongTitle = {
  args: {
    open: true,
  },
  render: (args: DrawerProps) => {
    const [openDrawer, setOpenDrawer] = useState(args.open);
    return (
      <>
        <Button v2 block={false} onClick={() => setOpenDrawer(true)}>
          Open drawer
        </Button>
        <Drawer
          open={openDrawer}
          headerTitle={lorem10}
          footerContent={
            <Button v2 block onClick={() => {}}>
              Action 1
            </Button>
          }
          onClose={() => {
            setOpenDrawer(false);
          }}
        >
          <p>{lorem20}</p>
          <p>{lorem40}</p>
          <p>{lorem40}</p>
          <p>{lorem40}</p>
          <p>{lorem40}</p>
          <p>{lorem40}</p>
          <p>{lorem40}</p>
        </Drawer>
      </>
    );
  },
};

export const NoTitle = {
  args: {
    open: true,
  },
  render: (args: DrawerProps) => {
    const [openDrawer, setOpenDrawer] = useState(args.open);
    return (
      <>
        <Button v2 block={false} onClick={() => setOpenDrawer(true)}>
          Open drawer
        </Button>
        <Drawer
          open={openDrawer}
          footerContent={
            <Button v2 block onClick={() => {}}>
              Action 1
            </Button>
          }
          onClose={() => {
            setOpenDrawer(false);
          }}
        >
          <p>{lorem20}</p>
          <p>{lorem40}</p>
          <p>{lorem40}</p>
          <p>{lorem40}</p>
          <p>{lorem40}</p>
          <p>{lorem40}</p>
          <p>{lorem40}</p>
        </Drawer>
      </>
    );
  },
};

export const NoFooter = {
  args: {
    open: true,
  },
  render: (args: DrawerProps) => {
    const [openDrawer, setOpenDrawer] = useState(args.open);
    return (
      <>
        <Button v2 block={false} onClick={() => setOpenDrawer(true)}>
          Open drawer
        </Button>
        <Drawer
          open={openDrawer}
          headerTitle="This is the title of the drawer"
          onClose={() => {
            setOpenDrawer(false);
          }}
        >
          <p>{lorem20}</p>
          <p>{lorem40}</p>
          <p>{lorem40}</p>
          <p>{lorem40}</p>
          <p>{lorem40}</p>
          <p>{lorem40}</p>
          <Body>{lorem40}</Body>
        </Drawer>
      </>
    );
  },
};