import { render } from '@testing-library/react';
import React from 'react';
import { describe, expect, it, vi } from 'vitest';
import { noop } from '../../helpers/utils';
import { PageHeader } from './PageHeader';
import { PageHeaderActionItemProps } from './PageHeader.model';
import { PageHeaderActionProps } from './PageHeaderAction';

vi.mock('../../hooks/useTabTitle/useTabTitle');

const defaultbulkActions: PageHeaderActionProps[] = [
  {
    label: 'Bulk Action 1',
    onClick: noop,
  },
];

describe('PageHeader', () => {
  it('renders the component without crashing', () => {
    const { container } = render(<PageHeader />);

    expect(container).toBeTruthy();
  });
  it('displays a title', () => {
    const mockTitle = 'test-title';
    const { container } = render(<PageHeader title={mockTitle} />);

    const title = container.querySelector('.title');

    expect(title?.textContent).toBe(mockTitle);
  });

  it('displays a subtitle', () => {
    const mockSubtitle = 'test-subtitle';
    const { container } = render(<PageHeader subtitle={mockSubtitle} />);

    const subtitle = container.querySelector('.subtitle');

    expect(subtitle?.textContent).toBe(mockSubtitle);
  });

  it(`renders actions`, () => {
    const { container } = render(
      <PageHeader actions={[{ ...defaultbulkActions[0], kind: 'action' }]} />,
    );

    const action = container.querySelector('[data-test-id="action"]');
    expect(action).toBeInTheDocument();
  });

  it(`renders actions groups`, () => {
    const actions: PageHeaderActionItemProps[] = [
      {
        label: 'Bulk Actions',
        kind: 'group',
        actions: defaultbulkActions,
      },
    ];
    const { container } = render(<PageHeader actions={actions} />);

    const actionsGroup = container.querySelector(
      '.page-header-group-action-container',
    );
    expect(actionsGroup).toBeInTheDocument();
  });

  it('renders spacers', () => {
    const actions: PageHeaderActionItemProps[] = [
      {
        kind: 'spacer',
      },
    ];
    const { container } = render(<PageHeader actions={actions} />);

    const spacer = container.querySelector('.spacer');
    expect(spacer).toBeInTheDocument();
  });
});
