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

import Body from '../../body/Body';
import Button from '../../button';
import NavigationOption from '../../navigationOption';
import { lorem10, lorem500, storyConfig } from '../../test-utils';
import Title from '../../title/Title';
import { Typography } from '../propsValues/typography';

import BottomSheet from './BottomSheet';

export default {
  component: BottomSheet,
  title: 'Dialogs/BottomSheet',
  args: {
    open: true,
  },
  render: (args) => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [open, setOpen] = useState(args.open);
    return (
      <div style={{ height: '2000px' }}>
        <Button onClick={() => setOpen(true)}>Open BottomSheet</Button>
        <BottomSheet
          {...args}
          open={open}
          onClose={() => {
            setOpen(false);
            action('BottomSheet closed')();
          }}
        />
      </div>
    );
  },
} satisfies Meta<typeof BottomSheet>;

type Story = StoryObj<typeof BottomSheet>;

export const Basic: Story = {
  args: {
    children: (
      <>
        <Title type={Typography.TITLE_SECTION}>Money without borders</Title>
        {lorem10}
        <br />
        <br />
        <NavigationOption
          title="Navigation option"
          content="Button and icon are vertically centered."
          media={<FastFlag size={24} />}
          isContainerAligned
        />
      </>
    ),
  },
  parameters: {
    chromatic: {
      delay: 1000,
    },
  },
};

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

export const WithOverflowContent: Story = {
  args: {
    children: (
      <>
        <Title type={Typography.TITLE_SECTION}>Money without borders</Title>
        {lorem10}
        <NavigationOption
          title="Navigation option"
          content="Button and icon are vertically centered."
          media={<FastFlag size={24} />}
        />
        <NavigationOption
          title="Navigation option"
          content="Button and icon are vertically centered."
          media={<FastFlag size={24} />}
          isContainerAligned
        />
        {lorem500}
        <Body type={Typography.BODY_DEFAULT_BOLD}>{lorem10}</Body>
      </>
    ),
  },
  parameters: {
    chromatic: {
      delay: 1000,
    },
  },
};

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

export const WithOverflowContentDark: Story = storyConfig(WithOverflowContent, {
  variants: ['dark'],
});

export const WithOverflowContentDarkMobile: Story = storyConfig(WithOverflowContent, {
  variants: ['dark', 'mobile'],
});

export const WithOverflowContentZoom400: Story = storyConfig(WithOverflowContent, {
  variants: ['400%'],
});
