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

import BottomSheet from './BottomSheet';
import { withVariantConfig } from '../../../.storybook/helpers';

export default {
  component: BottomSheet,
  title: 'Dialogs/BottomSheet',
  args: {
    open: false,
  },

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

    return (
      <div>
        <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 = {
  ...Basic,
  ...withVariantConfig(['mobile'], Basic),
};

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 = {
  ...WithOverflowContent,
  ...withVariantConfig(['mobile'], WithOverflowContent),
};

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

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

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