import { action } from '@storybook/addon-actions';
import { Meta, StoryObj } from '@storybook/react';
import { ScreenMode, ThemeProvider } from '@wise/components-theming';
import { useState } from 'react';

import { Button, Modal, ModalProps } from '..';
import { CommonProps, Scroll } from '../common';
import { lorem10, lorem100, lorem1000, storyConfig } from '../test-utils';

export default {
  component: Modal,
  title: 'Dialogs/Modal',
  args: {
    size: 'md',
    position: 'center',
    open: true,
  },
  parameters: {
    chromatic: {
      delay: 2000,
    },
  },
} satisfies Meta<typeof Modal>;

type Story = StoryObj<typeof Modal>;

export interface StoryContentProps {
  args: CommonProps & ModalProps;
  screenMode?: ScreenMode;
}

const StoryContent = ({ args, screenMode }: StoryContentProps) => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [open, setOpen] = useState(args.open);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Modal</Button>
      <Modal
        {...args}
        body={
          !screenMode ? (
            args.body
          ) : (
            <ThemeProvider theme="personal" screenMode={screenMode}>
              {lorem100}
            </ThemeProvider>
          )
        }
        open={open}
        disableDimmerClickToClose={args.disableDimmerClickToClose}
        onClose={() => {
          setOpen(false);
          action('Modal closed')();
        }}
      />
    </>
  );
};

export const Basic: Story = {
  args: {
    title: 'Title',
    body: lorem10,
    scroll: Scroll.VIEWPORT,
    footer: <Button block>Action</Button>,
  },
  render: (args) => <StoryContent args={args} />,
};

export const BasicMobile: Story = storyConfig(Basic, { variants: ['mobile'] });

export const ContentScroll: Story = {
  args: {
    title: lorem10,
    body: lorem1000,
    scroll: Scroll.CONTENT,
  },
};

export const ContentScrollMobile: Story = storyConfig(ContentScroll, { variants: ['mobile'] });

export const ViewportScroll: Story = {
  args: {
    title: lorem10,
    body: lorem1000,
    scroll: Scroll.VIEWPORT,
  },
};

export const ViewportScrollMobile: Story = storyConfig(ViewportScroll, { variants: ['mobile'] });

export const WithoutTitle: Story = {
  args: {
    body: lorem1000,
    scroll: Scroll.CONTENT,
  },
};

export const WithoutTitleMobile: Story = storyConfig(WithoutTitle, { variants: ['mobile'] });

export const WithThemeProviderInContent: Story = {
  args: {
    title: lorem10,
    body: lorem100,
    scroll: Scroll.VIEWPORT,
    footer: <Button block>Action</Button>,
  },
  render: (args, { globals: { screenMode } }) => (
    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
    <StoryContent args={args} screenMode={screenMode} />
  ),
};

export const WithThemeProviderInContentMobile: Story = storyConfig(WithThemeProviderInContent, {
  variants: ['mobile'],
});
