import { Story, Meta } from '@storybook/react';
import { Button } from '../../button';
import makeStyles from '@mui/styles/makeStyles';
import { useState } from 'react';
import { Drawer } from './drawer';
import type { DrawerProps } from './drawer';

export default {
  component: Drawer,
  title: 'Layout/Drawer',
  argTypes: {
    anchor: { control: 'select', options: ['right', 'left'] }
  }
} as Meta;

const createClasses = makeStyles(() => ({
  paper: {
    width: '400px'
  }
}));

const Template: Story<DrawerProps> = args => {
  const classes = createClasses();
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button color="primary" onClick={() => setOpen(!open)}>
        toggle drawer
      </Button>
      <Drawer
        {...args}
        open={open}
        onClose={() => setOpen(false)}
        classes={{
          paper: classes.paper
        }}
      />
    </>
  );
};

export const Primary = Template.bind({});
Primary.args = {
  anchor: 'right',
  children: 'Content',
  open: true
};