import { render } from '@testing-library/vue';
import { describe, expect, test, vi } from 'vitest';
import { UiPopover, UiPopoverTrigger, UiPopoverContent } from '../index';
import { UiButton } from '../../UiButton';

describe('UiPopover', () => {
  test('emits update:open when trigger is clicked', async () => {
    const onUpdateOpen = vi.fn();
    const { getByText } = render({
      components: { UiPopover, UiPopoverTrigger, UiPopoverContent },
      setup() {
        return { onUpdateOpen };
      },
      template: `
        <UiPopover @update:open="onUpdateOpen">
          <UiPopoverTrigger>Open</UiPopoverTrigger>
          <UiPopoverContent>Content</UiPopoverContent>
        </UiPopover>
      `,
    });

    await getByText('Open').click();

    expect(onUpdateOpen).toHaveBeenCalledWith(true);
  });

  test('applies aria-label on trigger', () => {
    const { getByRole } = render({
      components: { UiPopover, UiPopoverTrigger, UiPopoverContent },
      template: `
        <UiPopover>
          <UiPopoverTrigger ariaLabel="Open popover">Open</UiPopoverTrigger>
          <UiPopoverContent>Content</UiPopoverContent>
        </UiPopover>
      `,
    });

    expect(getByRole('button', { name: 'Open popover' })).toBeInTheDocument();
  });

  test('works with as-child pattern and UiButton', async () => {
    const onUpdateOpen = vi.fn();
    const { getByRole } = render({
      components: { UiPopover, UiPopoverTrigger, UiPopoverContent, UiButton },
      setup() {
        return { onUpdateOpen };
      },
      template: `
        <UiPopover @update:open="onUpdateOpen">
          <UiPopoverTrigger as-child>
            <UiButton variant="outline">Open Popover</UiButton>
          </UiPopoverTrigger>
          <UiPopoverContent>Content</UiPopoverContent>
        </UiPopover>
      `,
    });

    await getByRole('button', { name: 'Open Popover' }).click();

    expect(onUpdateOpen).toHaveBeenCalledWith(true);
  });

  test('emits escapeKeyDown when Escape is pressed', async () => {
    const onEscapeKeyDown = vi.fn();
    const { getByText, getByRole } = render({
      components: { UiPopover, UiPopoverTrigger, UiPopoverContent },
      setup() {
        return { onEscapeKeyDown };
      },
      template: `
        <UiPopover>
          <UiPopoverTrigger>Open</UiPopoverTrigger>
          <UiPopoverContent @escape-key-down="onEscapeKeyDown">Content</UiPopoverContent>
        </UiPopover>
      `,
    });

    await getByText('Open').click();
    expect(getByRole('dialog')).toBeInTheDocument();

    await getByRole('dialog').dispatchEvent(
      new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }),
    );

    expect(onEscapeKeyDown).toHaveBeenCalled();
  });
});
