import React from 'react';
import Button from '../button';
import SlidingPanel, { type SlidingPanelProps } from './SlidingPanel';

export default {
  component: SlidingPanel,
  title: 'Dialogs/SlidingPanel',
  argTypes: {
    position: {
      control: 'select',
      options: ['left', 'right', 'top', 'bottom'],
    },
  },
  parameters: {
    docs: {
      source: { type: 'code' },
    },
  },
  decorators: [
    (Story: any) => (
      <div style={{ paddingTop: '80px' }}>
        <Story />
      </div>
    ),
  ],
};

export const Basic = function Render(args: SlidingPanelProps) {
  const [open, setOpen] = React.useState(false);

  return (
    <div>
      <Button v2 block onClick={() => setOpen(!open)}>
        Open Sliding Panel
      </Button>

      <SlidingPanel {...args} open={open}>
        <div className="p-y-4 p-x-4 ">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
          been the industry standard dummy text ever since the 1500s, when an unknown printer took a
          galley of type and scrambled it to
        </div>
      </SlidingPanel>
    </div>
  );
};
Basic.args = {
  position: 'top',
};