import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, it, expect, vi } from 'vitest';
import { HoverCard, HoverCardTrigger, HoverCardContent } from './hover-card';
import React from 'react';

// Mocking Portal
vi.mock('@radix-ui/react-hover-card', async () => {
  const actual = await vi.importActual('@radix-ui/react-hover-card');
  return {
    ...actual,
    Portal: ({ children }: { children: React.ReactNode }) => (
      <div data-testid="portal">{children}</div>
    ),
  };
});

describe('HoverCard', () => {
  it('renders correctly', () => {
    render(
      <HoverCard>
        <HoverCardTrigger>Hover me</HoverCardTrigger>
        <HoverCardContent>Content</HoverCardContent>
      </HoverCard>
    );

    expect(screen.getByText('Hover me')).toBeInTheDocument();
  });

  it('shows content when open is true', () => {
    render(
      <HoverCard open={true}>
        <HoverCardTrigger>Hover</HoverCardTrigger>
        <HoverCardContent>Revealed</HoverCardContent>
      </HoverCard>
    );

    expect(screen.getByText('Revealed')).toBeInTheDocument();
  });

  it('has correct data-slot attributes', () => {
    const { container } = render(
      <HoverCard>
        <HoverCardTrigger>Trigger</HoverCardTrigger>
      </HoverCard>
    );
    expect(container.querySelector('[data-slot="hover-card-trigger"]')).toBeInTheDocument();
  });

  it('shows content when the trigger is hovered', async () => {
    const user = userEvent.setup();
    render(
      <HoverCard openDelay={0} closeDelay={0}>
        <HoverCardTrigger>Hover me</HoverCardTrigger>
        <HoverCardContent>Revealed content</HoverCardContent>
      </HoverCard>
    );

    expect(screen.queryByText('Revealed content')).not.toBeInTheDocument();

    await user.hover(screen.getByText('Hover me'));

    await waitFor(() => {
      expect(screen.getByText('Revealed content')).toBeInTheDocument();
    });
  });

  it('hides content when the trigger is unhovered', async () => {
    const user = userEvent.setup();
    render(
      <HoverCard openDelay={0} closeDelay={0}>
        <HoverCardTrigger>Hover me</HoverCardTrigger>
        <HoverCardContent>Revealed content</HoverCardContent>
      </HoverCard>
    );

    const trigger = screen.getByText('Hover me');
    await user.hover(trigger);

    await waitFor(() => {
      expect(screen.getByText('Revealed content')).toBeInTheDocument();
    });

    await user.unhover(trigger);

    await waitFor(() => {
      expect(screen.queryByText('Revealed content')).not.toBeInTheDocument();
    });
  });
});