import { action } from '@storybook/addon-actions';
import { Meta, StoryObj } from '@storybook/react';
import { useState } from 'react';

import { Button, Dimmer } from '..';

export default {
  component: Dimmer,
  title: 'Layouts/Dimmer',
  args: {
    fadeContentOnEnter: false,
    fadeContentOnExit: false,
    disableClickToClose: false,
  },
} satisfies Meta<typeof Dimmer>;

type Story = StoryObj<typeof Dimmer>;

export const Basic: Story = {
  render: (args) => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [open, setOpen] = useState(false);

    return (
      <>
        <Button onClick={() => setOpen((isOpen) => !isOpen)}>Toggle dimmer</Button>
        <Dimmer
          {...args}
          open={open}
          onClose={(event) => {
            setOpen(false);
            action('closed')(event);
          }}
        />
      </>
    );
  },
};
