import React from 'react';
import Drawer, { DrawerProps } from '../components/Drawer/Drawer';
import { Story } from '@storybook/react';

const meta = {
  title: 'Components / Drawer',
  component: Drawer,
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const Template: Story<DrawerProps> = (args) => <Drawer {...args} />;

export const Default = Template.bind({});
Default.args = {
  ariaLabel: 'my-aria-label',
  callback: () => alert('callback triggered'),
  children: <div className="p-4">Any JSX content can go here</div>,
  id: 'myDrawer',
  onBottom: false,
  onRight: false,
  openCallback: () => console.log('open callback triggered'),
  title: 'Drawer Title',
  showBack: false,
  showClose: false,
  showMask: true,
};

export const Right = Template.bind({});
Right.args = {
  ariaLabel: 'my-aria-label',
  callback: () => alert('callback triggered'),
  children: <div className="p-4">Any JSX content can go here</div>,
  id: 'myDrawer',
  onBottom: false,
  onRight: true,
  openCallback: () => console.log('open callback triggered'),
  title: 'Drawer Title',
  showBack: false,
  showClose: false,
  showMask: true,
};

export const Bottom = Template.bind({});
Bottom.args = {
  ariaLabel: 'my-aria-label',
  callback: () => alert('callback triggered'),
  children: <div className="p-4">Any JSX content can go here</div>,
  id: 'myDrawer',
  onBottom: true,
  onRight: false,
  openCallback: () => console.log('open callback triggered'),
  title: 'Drawer Title',
  showBack: false,
  showClose: false,
  showMask: true,
};

export const Back = Template.bind({});
Back.args = {
  ariaLabel: 'my-aria-label',
  callback: () => alert('callback triggered'),
  children: <div className="p-4">Any JSX content can go here</div>,
  id: 'myDrawer',
  onBottom: false,
  onRight: false,
  openCallback: () => console.log('open callback triggered'),
  title: 'Drawer Title',
  showBack: true,
  showClose: false,
  showMask: true,
};

export const Close = Template.bind({});
Close.args = {
  ariaLabel: 'my-aria-label',
  callback: () => alert('callback triggered'),
  children: <div className="p-4">Any JSX content can go here</div>,
  id: 'myDrawer',
  onBottom: false,
  onRight: false,
  openCallback: () => console.log('open callback triggered'),
  title: 'Drawer Title',
  showBack: false,
  showClose: true,
  showMask: true,
};

export const NoMask = Template.bind({});
NoMask.args = {
  ariaLabel: 'my-aria-label',
  callback: () => alert('callback triggered'),
  children: <div className="p-4">Any JSX content can go here</div>,
  id: 'myDrawer',
  onBottom: false,
  onRight: false,
  openCallback: () => console.log('open callback triggered'),
  title: 'Drawer Title',
  showBack: false,
  showClose: true,
  showMask: false,
};