import { Story, Meta } from '@storybook/react';
import Typography from '@mui/material/Typography';
import makeStyles from '@mui/styles/makeStyles';
import clsx from 'clsx';
import { DrawerButton } from './drawer-button';
import type { DrawerButtonProps } from './drawer-button';

export default {
  component: DrawerButton,
  title: 'Layout/Navigation Drawer',
  argTypes: {
    side: {
      description: 'The side on which sidebar the button will be on.',
      options: ['left', 'right'],
      control: {
        type: 'select'
      }
    },
    title: {
      description: 'Contents of the tooltip.'
    },
    onClick: {
      description: 'On click handler.'
    },
    locked: {
      description: 'Enables a special `locked` style.',
      table: {
        defaultProps: {
          summary: false
        }
      }
    }
  }
} as Meta;

const createClasses = makeStyles(theme => ({
  container: {
    position: 'absolute',
    '& > div': {
      top: theme.spacing(4)
    }
  },
  rightSide: {
    right: 0
  }
}));

const SidesTemplate: Story<DrawerButtonProps> = args => {
  const classes = createClasses();
  return (
    <div style={{ position: 'relative' }}>
      <div className={classes.container}>
        <Typography>Left Side</Typography>
        <DrawerButton {...args} title="Open / Close Navigation" side="left" />
      </div>
      <div className={clsx(classes.container, classes.rightSide)}>
        <Typography>Right Side</Typography>
        <DrawerButton {...args} title="Open / Close Right Panel" side="right" />
      </div>
    </div>
  );
};

export const Sides = SidesTemplate.bind({});
Sides.args = {
  onClick: () => alert('Click handler'),
  title: 'Closed',
  side: 'left',
  locked: false
};

const StatesTemplate: Story<DrawerButtonProps> = args => {
  const classes = createClasses();
  return (
    <div className={classes.container}>
      <DrawerButton {...args} />
    </div>
  );
};

export const Closed = StatesTemplate.bind({});
Closed.args = Sides.args;

export const Locked = StatesTemplate.bind({});
Locked.args = { ...Sides.args, title: 'Locked' };
Locked.parameters = { pseudo: { hover: true } };