import { action } from 'storybook/actions';
import { Meta, StoryObj } from '@storybook/react-webpack5';
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 } from '../test-utils';

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

type Story = StoryObj<typeof Modal>;

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

const StoryContent = ({ args, screenMode, viewMode }: StoryContentProps) => {
  const [open, setOpen] = useState(viewMode !== 'docs');

  return (
    <>
      <Button v2 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 v2 block>
        Action
      </Button>
    ),
  },
  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
};

export const ContentScroll: Story = {
  args: {
    title: lorem10,
    body: lorem1000,
    scroll: Scroll.CONTENT,
  },
  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
};

export const ViewportScroll: Story = {
  args: {
    title: lorem10,
    body: lorem1000,
    scroll: Scroll.VIEWPORT,
  },
  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
};

export const WithoutTitle: Story = {
  args: {
    body: lorem1000,
    scroll: Scroll.CONTENT,
  },
  render: (args, context) => <StoryContent args={args} viewMode={context.viewMode} />,
};

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