import type { Meta, StoryObj } from '@storybook/react';
import Drawer from './Drawer';
import React, { useState } from 'react';
import Button from '../Button';

const meta: Meta<typeof Drawer> = {
  title: 'Components/Drawer',
  component: Drawer,
  parameters: {
    layout: 'centered',
  },
  tags: ['autodocs'],
};

export default meta;

type Story = StoryObj<typeof Drawer>;
const defaultArgs = {
  isOpen: true,
  title: 'Drawer Title',
  showEditButton: false,
  onClose: () => {},
  primaryButtonProps: {
    label: 'Create',
    variant: 'primary',
    disabled: false,
    onClick: () => {},
  },
  secondaryButtonProps: {
    label: 'Cancel',
    variant: 'secondary',
    disabled: false,
    onClick: () => {},
  },
  onEdit: () => {},
  overlay: true,
  isFooterRequired: true,
  footerContent: null,
};

export const Default: Story = {
  args: {
    ...defaultArgs,
    size: 'medium',
  },
};

export const Controlled: Story = {
  render: () => {
    const [showModal, setShowModal] = useState(false);

    return (
      <>
        <div>
          <Button
            onClick={() => setShowModal(true)}
            label="show modal"
            variant="primary"
            disabled={false}
          />
        </div>
        <Drawer
          {...defaultArgs}
          isOpen={showModal}
          onClose={() => setShowModal(false)}
          overlay={true}
          isFooterRequired={true}
        >
          <h1>Drawer body</h1>
        </Drawer>
      </>
    );
  },
};
export const DrawerWithoutPadding: Story = {
  render: () => {
    const [showModal, setShowModal] = useState(false);

    return (
      <>
        <div>
          <Button
            onClick={() => setShowModal(true)}
            label="show modal"
            variant="primary"
            disabled={false}
          />
        </div>
        <Drawer
          {...defaultArgs}
          isOpen={showModal}
          onClose={() => setShowModal(false)}
          overlay={true}
          isFooterRequired={true}
          paddingNotRequired={true}
          size="medium"
        >
          <h1>Drawer body</h1>
        </Drawer>
      </>
    );
  },
};