import { action } from 'storybook/actions';
import { Meta, StoryObj } from '@storybook/react-webpack5';
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) => {
    const [open, setOpen] = useState(false);

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