/* eslint-disable react/prop-types */
import 'twin.macro';

import { useArgs } from '@storybook/client-api';
import React from 'react';

import Drawer from '~/layout/Drawer';

export default {
  title: 'Layout/Drawer',
  component: Drawer,
  args: {
    isOpen: true,
  },
  argTypes: {
    isOpen: {
      control: {
        type: 'boolean',
      },
    },
  },
};

export function RightDrawer(props) {
  const [_, updateArgs] = useArgs();
  const onClose = () => updateArgs({ ...props, isOpen: false });
  return (
    <>
      <p>
        Use the Storybook <strong>isOpen</strong> control to toggle the drawer
      </p>
      <p>The drawer should emerge from the right of the screen</p>
      <Drawer
        {...props}
        onClose={onClose}
        tw="h-screen bg-gray-500 bg-opacity-30 p-4"
        isOpen={props.isOpen}
        anchor="right"
      >
        <h1>Drawer Content</h1>
        <p>Click the underlay to dismiss the drawer</p>
      </Drawer>
    </>
  );
}

export function LeftDrawer(props) {
  const [_, updateArgs] = useArgs();
  const onClose = () => updateArgs({ ...props, isOpen: false });
  return (
    <>
      <p>
        Use the Storybook <strong>isOpen</strong> control to toggle the drawer.
      </p>
      <p>The drawer should emerge from the left of the screen</p>
      <Drawer
        {...props}
        onClose={onClose}
        tw="h-screen bg-gray-500 bg-opacity-30 p-4"
        isOpen={props.isOpen}
        anchor="left"
      >
        <h1>Drawer Content</h1>
        <p>Click the underlay to dismiss the drawer</p>
      </Drawer>
    </>
  );
}