import type { Meta, StoryObj } from '@storybook/react-vite'
import { expect, userEvent, screen, waitFor } from 'storybook/test'

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from './dialog'
import { Button } from '@components/ui/button/button'

const meta = {
  title: 'Dialog',
  component: Dialog,
  tags: ['autodocs'],
  parameters: {
    layout: 'centered',
  },
  argTypes: {},
} satisfies Meta<typeof Dialog>
export default meta

type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: () => (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Open Dialog</Button>
      </DialogTrigger>
      <DialogContent className="max-w-[425px]" showCloseButton={true}>
        <DialogHeader>
          <DialogTitle>Dialog title</DialogTitle>
          <DialogDescription>Dialog description</DialogDescription>
        </DialogHeader>
        <p className="border-1 border-(--discreet-border)">
          some dialog content here
          <br />
          showCloseButton={'{true}'} on DialogContent for cross in top right corner
        </p>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">Footer (close button)</Button>
          </DialogClose>
          <Button>Footer (e.g. submit button)</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  ),
  play: async () => {
    await userEvent.click(screen.getByText('Open Dialog'))
    await waitFor(
      async () => {
        const heading = await screen.findByRole('heading', { name: 'Dialog title' })
        expect(heading).toBeVisible()
      },
      { timeout: 1000 },
    )

    await userEvent.click(screen.getByText('Footer (close button)'))

    /* await waitFor(
      () => {
        expect(screen.queryByRole('heading', { name: 'Dialog title' })).not.toBeInTheDocument()
      },
      { timeout: 1000 },
    ) */
    await waitFor(
      () => {
        expect(screen.queryByText('Dialog title')).toBeNull()
        expect(screen.getByText('Open Dialog')).toBeVisible()
      },
      { timeout: 1000 },
    )
  },
}
