import { action } from 'storybook/actions';
import { Meta, StoryObj } from '@storybook/react-webpack5';
import { FastFlag } from '@transferwise/icons';
import { useState } from 'react';
import Button from '../../button';
import { lorem10 } from '../../test-utils';
import Title from '../../title/Title';
import { Typography } from '../propsValues/typography';

import BottomSheet from './BottomSheet';
import ListItem from '../../listItem';

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 />
        <ListItem
          title="List item"
          subtitle="Button and icon are vertically centered."
          control={<ListItem.Navigation href="#" />}
          media={
            <ListItem.AvatarView>
              <FastFlag />
            </ListItem.AvatarView>
          }
        />
      </>
    ),
  },
  parameters: {
    chromatic: {
      delay: 1000,
    },
  },
};