import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { Header } from './header';
import React from 'react';
import { LayoutProvider } from '../../../contexts/LayoutContext';

// Mock useLayout
vi.mock('../../../contexts/LayoutContext', async () => {
  const actual = await vi.importActual('../../../contexts/LayoutContext');
  return {
    ...actual,
    useLayout: vi.fn(() => ({
      sidebarExpanded: true,
      toggleSidebar: vi.fn(),
    })),
  };
});

// Mock DropdownMenu to render content directly for testing
vi.mock('../../ui/dropdown-menu', () => ({
  DropdownMenu: ({ children }: any) => <div>{children}</div>,
  DropdownMenuTrigger: ({ children }: any) => (
    <button aria-label="Menu do usuário">{children}</button>
  ),
  DropdownMenuContent: ({ children }: any) => <div>{children}</div>,
  DropdownMenuItem: ({ children }: any) => <div>{children}</div>,
  DropdownMenuLabel: ({ children }: any) => <div>{children}</div>,
  DropdownMenuSeparator: () => <hr />,
  DropdownMenuGroup: ({ children }: any) => <div>{children}</div>,
  DropdownMenuSub: ({ children }: any) => <div>{children}</div>,
  DropdownMenuSubTrigger: ({ children }: any) => <div>{children}</div>,
  DropdownMenuSubContent: ({ children }: any) => <div>{children}</div>,
  DropdownMenuPortal: ({ children }: any) => <>{children}</>,
}));

describe('Header', () => {
  it('renders without a LayoutProvider', () => {
    render(<Header title="Standalone" />);

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

  it('renders correctly with title', () => {
    render(
      <LayoutProvider>
        <Header title="Dashboard" />
      </LayoutProvider>
    );
    expect(screen.getByText('Dashboard')).toBeInTheDocument();
  });

  it('renders breadcrumbs correctly', () => {
    const breadcrumbs = [{ label: 'Home', href: '/' }, { label: 'Settings' }];
    render(
      <LayoutProvider>
        <Header breadcrumbs={breadcrumbs} />
      </LayoutProvider>
    );
    expect(screen.getByText('Home')).toBeInTheDocument();
    expect(screen.getByText('Settings')).toBeInTheDocument();
  });

  it('shows user info when user prop is provided', () => {
    const user = { name: 'John Doe', email: 'john@example.com' };
    render(
      <LayoutProvider>
        <Header user={user} />
      </LayoutProvider>
    );

    // With the mock, content should be directly visible or easily triggered
    expect(screen.getByText('John Doe')).toBeInTheDocument();
    expect(screen.getByText('john@example.com')).toBeInTheDocument();
  });
});