import { useState } from 'react';
import { FormProvider, useForm } from 'react-hook-form';

import { LoadingButton } from '@mui/lab';
import { Button, Stack, Typography } from '@mui/material';
import { type Meta, type StoryObj } from '@storybook/react-vite';

import {
  type GetDrawerConfiguration,
  useDrawerV2,
} from '../../../hooks/useDrawerV2';
import FormInputClassic from '../Inputs/Classic/form';
import Pills from '../Pills';

import Drawer from '.';

const meta: Meta<typeof Drawer> = {
  component: Drawer,
  title: 'Design System/Drawer',
  tags: ['autodocs'],
  argTypes: {
    size: {
      control: 'select',
      options: ['small', 'medium', 'large'],
    },
  },
};

export default meta;

type Story = StoryObj<typeof Drawer>;

export const Default: Story = {
  args: {
    title: 'Soy un título del Draweeeer',
    size: 'medium',
    disableEscapeKeyDown: false,
    primaryButtonProps: {
      children: 'Primary Action',
    },
    secondaryButtonProps: {
      children: 'Secondary Action',
    },
    hasBackButton: false,
    PaperProps: {
      sx: {
        color: theme => theme.palette.new?.text.neutral.default,
      },
    },
  },
  render: props => {
    const {
      title,
      size,
      primaryButtonProps,
      secondaryButtonProps,
      disableEscapeKeyDown,
      hasBackButton,
      PaperProps,
    } = props;
    const [isOpen, setIsOpen] = useState(false);

    const onClose = () => setIsOpen(false);

    return (
      <div>
        <Button
          size="small"
          variant="primary"
          onClick={() => setIsOpen(true)}
        >
          Open
        </Button>
        <Drawer
          title={title}
          size={size}
          open={isOpen}
          onClose={onClose}
          primaryButtonProps={primaryButtonProps}
          secondaryButtonProps={secondaryButtonProps}
          disableEscapeKeyDown={disableEscapeKeyDown}
          hasBackButton={hasBackButton}
          PaperProps={PaperProps}
        >
          <Typography>
            Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi. Turpis
            eu ut egestas pharetra bibendum nunc enim velit lectus. Vitae risus
            sed pharetra dui gravida. Proin tellus condimentum varius tempus.
            Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi. Turpis
            eu ut egestas pharetra bibendum nunc enim velit lectus. Vitae risus
            sed pharetra dui gravida. Proin tellus condimentum varius tempus.
            Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi. Turpis
            eu ut egestas pharetra bibendum nunc enim velit lectus. Vitae risus
            sed pharetra dui gravida. Proin tellus condimentum varius tempus.
            Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi. Turpis
            eu ut egestas pharetra bibendum nunc enim velit lectus. Vitae risus
            sed pharetra dui gravida. Proin tellus condimentum varius tempus
            Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi. Turpis
            eu ut egestas pharetra bibendum nunc enim velit lectus. Vitae risus
            sed pharetra dui gravida. Proin tellus condimentum varius tempus.
            Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi. Turpis
            eu ut egestas pharetra bibendum nunc enim velit lectus. Vitae risus
            sed pharetra dui gravida. Proin tellus condimentum varius tempus
            Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi. Turpis
            eu ut egestas pharetra bibendum nunc enim velit lectus. Vitae risus
            sed pharetra dui gravida. Proin tellus condimentum varius tempus.
            Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi. Turpis
            eu ut egestas pharetra bibendum nunc enim velit lectus. Vitae risus
            sed pharetra dui gravida. Proin tellus condimentum varius tempus
            Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi. Turpis
            eu ut egestas pharetra bibendum nunc enim velit lectus. Vitae risus
            sed pharetra dui gravida. Proin tellus condimentum varius tempus.
            Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi. Turpis
            eu ut egestas pharetra bibendum nunc enim velit lectus. Vitae risus
            sed pharetra dui gravida. Proin tellus condimentum varius tempus
            Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi. Turpis
            eu ut egestas pharetra bibendum nunc enim velit lectus. Vitae risus
            sed pharetra dui gravida. Proin tellus condimentum varius tempus.
            Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi. Turpis
            eu ut egestas pharetra bibendum nunc enim velit lectus. Vitae risus
            sed pharetra dui gravida. Proin tellus condimentum varius tempus
            Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi. Turpis
            eu ut egestas pharetra bibendum nunc enim velit lectus. Vitae risus
            sed pharetra dui gravida. Proin tellus condimentum varius tempus.
            Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi. Turpis
            eu ut egestas pharetra bibendum nunc enim velit lectus. Vitae risus
            sed pharetra dui gravida. Proin tellus condimentum varius tempus
          </Typography>
        </Drawer>
      </div>
    );
  },
};

export const DrawerWithExtraFooter: Story = {
  args: {
    title: 'Drawer Title',
    size: 'medium',

    primaryButtonProps: {
      children: 'Primary Action',
    },

    secondaryButtonProps: {
      children: 'Secondary Action',
    },

    hasBackButton: true,
  },
  render: props => {
    const {
      title,
      size,
      primaryButtonProps,
      secondaryButtonProps,
      hasBackButton,
    } = props;

    const [isOpen, setIsOpen] = useState(false);

    const onClose = () => setIsOpen(false);

    const onBack = () => {
      alert('onBack');
    };

    return (
      <div>
        <Button
          size="small"
          variant="primary"
          onClick={() => setIsOpen(true)}
        >
          Open
        </Button>
        <Drawer
          title={title}
          size={size}
          open={isOpen}
          onClose={onClose}
          onBack={onBack}
          hasBackButton={hasBackButton}
          primaryButtonProps={primaryButtonProps}
          secondaryButtonProps={secondaryButtonProps}
          footer={
            <Stack sx={{ alignItems: 'center', gap: 2 }}>
              <Typography>
                Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              </Typography>
              <Button
                size="large"
                variant="primary"
              >
                Extra Footer Button
              </Button>
            </Stack>
          }
        >
          <Stack>
            <Typography>
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra
              bibendum nunc enim velit lectus. Vitae risus sed pharetra dui
              gravida. Proin tellus condimentum varius tempus vulputate risus.
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra
              bibendum nunc enim velit lectus. Vitae risus sed pharetra dui
              gravida. Proin tellus condimentum varius tempus vulputate risus.
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra
              bibendum nunc enim velit lectus. Vitae risus sed pharetra dui
              gravida. Proin tellus condimentum varius tempus vulputate risus.
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra
              bibendum nunc enim velit lectus.
            </Typography>
          </Stack>
        </Drawer>
      </div>
    );
  },
};

export const DrawerWithDoubleLayout: Story = {
  args: {
    title: 'Drawer Title',
    size: 'large',
    primaryButtonProps: {
      children: 'Primary Action',
    },
    secondaryButtonProps: {
      children: 'Secondary Action',
    },
  },
  render: props => {
    const { title, size, primaryButtonProps, secondaryButtonProps } = props;
    const [isOpen, setIsOpen] = useState(false);

    const onClose = () => setIsOpen(false);

    return (
      <div>
        <Button
          size="small"
          variant="primary"
          onClick={() => setIsOpen(true)}
        >
          Open
        </Button>
        <Drawer
          title={title}
          size={size}
          open={isOpen}
          onClose={onClose}
          primaryButtonProps={primaryButtonProps}
          secondaryButtonProps={secondaryButtonProps}
          primaryContent={
            <Typography>
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra
              bibendum nunc enim velit lectus. Vitae risus sed pharetra dui
              gravida. Proin tellus condimentum varius tempus vulputate risus.
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum.
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra
              bibendum nunc enim velit lectus. Vitae risus sed pharetra dui
              gravida. Proin tellus condimentum varius tempus vulputate risus.
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra
              bibendum nunc enim velit lectus. Vitae risus sed pharetra dui
              gravida. Proin tellus condimentum varius tempus vulputate risus.
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra
              bibendum nunc enim velit lectus. Vitae risus sed pharetra dui
              gravida. Proin tellus condimentum varius tempus vulputate risus.
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
            </Typography>
          }
          secondaryContent={
            <Typography>
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra.
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra
            </Typography>
          }
        />
      </div>
    );
  },
};

export const DrawerWithDoubleLayoutAndExtraFooter: Story = {
  args: {
    title: 'Drawer Title',
    size: 'large',
    primaryButtonProps: {
      children: 'Primary Action',
    },
    secondaryButtonProps: {
      children: 'Secondary Action',
    },
  },
  render: props => {
    const { title, size, primaryButtonProps, secondaryButtonProps } = props;
    const [isOpen, setIsOpen] = useState(false);

    const onClose = () => setIsOpen(false);

    return (
      <div>
        <Button
          size="small"
          variant="primary"
          onClick={() => setIsOpen(true)}
        >
          Open
        </Button>
        <Drawer
          title={title}
          size={size}
          open={isOpen}
          onClose={onClose}
          primaryButtonProps={primaryButtonProps}
          secondaryButtonProps={secondaryButtonProps}
          primaryContent={
            <Typography>
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra
              bibendum nunc enim velit lectus. Vitae risus sed pharetra dui
              gravida. Proin tellus condimentum varius tempus vulputate risus.
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum.
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra
              bibendum nunc enim velit lectus. Vitae risus sed pharetra dui
              gravida. Proin tellus condimentum varius tempus vulputate risus.
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra
              bibendum nunc enim velit lectus. Vitae risus sed pharetra dui
              gravida. Proin tellus condimentum varius tempus vulputate risus.
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra
              bibendum nunc enim velit lectus. Vitae risus sed pharetra dui
              gravida. Proin tellus condimentum varius tempus vulputate risus.
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
            </Typography>
          }
          secondaryContent={
            <Typography>
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra.
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra
              Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              Turpis eu ut egestas pharetra bibendum nunc enim velit lectus.
              Vitae risus sed pharetra dui gravida. Proin tellus condimentum
              varius tempus vulputate risus. Lorem ipsum dolor sit amet
              consectetur. In sed ut elit nisi. Turpis eu ut egestas pharetra
            </Typography>
          }
          footer={
            <Stack sx={{ alignItems: 'center', gap: 2 }}>
              <Typography>
                Lorem ipsum dolor sit amet consectetur. In sed ut elit nisi.
              </Typography>
              <Button
                size="large"
                variant="primary"
              >
                Extra Footer Button
              </Button>
            </Stack>
          }
        />
      </div>
    );
  },
};

export const DrawerWithUseDrawerHook: Story = {
  args: {
    title: 'Title',
    primaryButtonProps: {
      children: 'Primary Action',
    },
    secondaryButtonProps: {
      children: 'Secondary Action',
    },
  },
  render: () => {
    const [extraInfo, setExtraInfo] = useState('extrainfo1');

    const { drawer, showDrawer } = useDrawerV2(args =>
      getCustomDrawer({ ...args, extraInfo }),
    );

    return (
      <div>
        <Button
          size="small"
          variant="primary"
          onClick={() => {
            showDrawer({ outsideValue: 'outsideValue1' });
          }}
        >
          Open 1
        </Button>
        <Button
          size="small"
          variant="primary"
          onClick={() => {
            showDrawer({ outsideValue: 'outsideValue2' });
            setTimeout(() => setExtraInfo('extrainfo2'), 2000);
          }}
        >
          Open 2
        </Button>
        {drawer}
      </div>
    );
  },
};

const getCustomDrawer: GetDrawerConfiguration<{
  extraInfo: string;
  outsideValue?: string;
}> = params => {
  const [loading, setLoading] = useState(false);
  const form = useForm({ defaultValues: { field: 'default value' } });

  return {
    children: (
      <FormProvider {...form}>
        {params.extraInfo}
        <FormInputClassic
          name="field"
          inputProps={{ label: 'Field', hasCounter: false }}
        />
        <LoadingButton
          onClick={async () => {
            form.setValue('field', params.outsideValue ?? '');

            setLoading(true);
            await new Promise(r => setTimeout(r, 3000));
            setLoading(false);
          }}
          loading={loading}
        >
          Change Field value
        </LoadingButton>
        <LoadingButton onClick={params.closeDrawer}>
          Close Modal from the inside
        </LoadingButton>
      </FormProvider>
    ),
    primaryButtonProps: {
      children: 'Save',
      loading: loading,
    },
    title: 'Drawer',
  };
};

export const DrawerWithTitleDecorator: Story = {
  args: {
    title: 'Title',
    size: 'large',
    hasBackButton: true,
  },
  render: props => {
    const { title, size, hasBackButton } = props;
    const [isOpen, setIsOpen] = useState(false);

    const onClose = () => setIsOpen(false);

    return (
      <div>
        <Button
          size="small"
          variant="primary"
          onClick={() => setIsOpen(true)}
        >
          Open
        </Button>
        <Drawer
          title={title}
          size={size}
          open={isOpen}
          onClose={onClose}
          hasBackButton={hasBackButton}
          titleDecorator={
            <Pills
              label="Warning"
              type="warning"
              size="small"
            />
          }
        >
          <Typography>
            This drawer demonstrates the titleDecorator prop with a warning
            pill. The titleDecorator can be any React node and appears next to
            the title in the header.
          </Typography>
        </Drawer>
      </div>
    );
  },
};

export const TaskFocus: Story = {
  args: {
    title: 'Task Focus Drawer',
    size: 'medium',
    primaryButtonProps: {
      children: 'Save',
    },
    secondaryButtonProps: {
      children: 'Cancel',
    },
  },
  render: props => {
    const { title, size, primaryButtonProps, secondaryButtonProps } = props;
    const [isOpen, setIsOpen] = useState(false);

    return (
      <div>
        <Button
          size="small"
          variant="primary"
          onClick={() => setIsOpen(true)}
        >
          Open Task Focus
        </Button>
        <Drawer
          title={title}
          size={size}
          open={isOpen}
          onClose={() => setIsOpen(false)}
          enableTaskFocus
          primaryButtonProps={primaryButtonProps}
          secondaryButtonProps={secondaryButtonProps}
        >
          <Typography>
            This drawer supports task focus mode. Click the maximize button in
            the header to expand to fullscreen. Click it again to restore the
            original size.
          </Typography>
        </Drawer>
      </div>
    );
  },
};

export const SmallDrawer: Story = {
  args: {
    title: 'Small Drawer',
    size: 'small',
    primaryButtonProps: {
      children: 'Confirm',
    },
  },
  render: props => {
    const { title, size, primaryButtonProps } = props;
    const [isOpen, setIsOpen] = useState(false);

    return (
      <div>
        <Button
          size="small"
          variant="primary"
          onClick={() => setIsOpen(true)}
        >
          Open Small
        </Button>
        <Drawer
          title={title}
          size={size}
          open={isOpen}
          onClose={() => setIsOpen(false)}
          primaryButtonProps={primaryButtonProps}
        >
          <Typography>
            This is a small drawer (600px max width). Useful for simple forms,
            quick actions, or confirmation flows.
          </Typography>
        </Drawer>
      </div>
    );
  },
};