import { render } from '@testing-library/react';
import React from 'react';
import { act } from 'react-dom/test-utils';
import { describe, expect, it, vi } from 'vitest';
import { noop } from '../../../helpers/utils';
import { PageHeaderActionProps } from '../PageHeaderAction/PageHeaderAction.model';
import {
  PageHeaderActionsGroup,
  PageHeaderActionsGroupProps,
} from './PageHeaderActionsGroup';

vi.mock('../../../utils/GenerateId', () => ({
  uuid: vi.fn().mockReturnValue('test-uuid'),
}));

const defaultActions: PageHeaderActionProps[] = [
  {
    label: 'Group Action 1',
    onClick: noop,
  },
  {
    label: 'Group Action 2',
    onClick: noop,
  },
  {
    label: 'Group Action 3',
    onClick: noop,
  },
  {
    label: 'Group Action 4',
    onClick: noop,
  },
];

const defaultProps: PageHeaderActionsGroupProps = {
  label: 'Group Actions',
  actions: defaultActions,
};

describe('PageHeaderActionsGroup', () => {
  it('renders the component without crashing', () => {
    const { container } = render(<PageHeaderActionsGroup {...defaultProps} />);
    expect(container).toBeTruthy();
  });

  it(`'Group Actions' has the 'Context' actionType when closed and 'Active' actionType when open`, async () => {
    const { container } = render(<PageHeaderActionsGroup {...defaultProps} />);

    // The component should render with a group action container
    const groupContainer = container.querySelector(
      '.page-header-group-action-container',
    );
    expect(groupContainer).toBeInTheDocument();

    // Click to toggle the group open
    const groupActionButton = container.querySelector(
      '[data-test-id="action"]',
    ) as HTMLElement;

    await act(async () => {
      groupActionButton.click();
    });

    // After clicking, the actions should be visible
    const visibleActions = container.querySelectorAll(
      '[data-test-id="action"]',
    );
    expect(visibleActions.length).toBeGreaterThan(1);
  });

  it(`renders all actions when 'Group Actions' is selected and there is enough available action slots`, async () => {
    const { container } = render(
      <PageHeaderActionsGroup {...defaultProps} availableActionSpace={5} />,
    );
    const groupActionsToggle = container.querySelector(
      '[data-test-id="action"]',
    ) as HTMLElement;

    await act(async () => {
      groupActionsToggle.click();
    });

    // Should have 1 group action button + 4 action buttons inside = 5 total
    const actions = container.querySelectorAll('[data-test-id="action"]');
    expect(actions).toHaveLength(5);
  });

  it(`raises onActionsGroupToggled`, async () => {
    const groupActionSpy = vi.fn().mockResolvedValue(undefined);
    const { container } = render(
      <PageHeaderActionsGroup
        {...defaultProps}
        onActionsGroupToggled={groupActionSpy}
      />,
    );
    const groupActionsToggle = container.querySelector(
      '[data-test-id="action"]',
    ) as HTMLElement;

    await act(async () => {
      groupActionsToggle.click();
    });

    expect(groupActionSpy).toHaveBeenCalledTimes(1);
    expect(groupActionSpy).toHaveBeenCalledWith(true);
  });

  it(`renders 'Group Actions' and 'More Actions' if openActionsGroupOnStart is set to true and there isn't enough available space`, () => {
    const { container } = render(
      <PageHeaderActionsGroup
        {...defaultProps}
        openActionsGroupOnStart={true}
        availableActionSpace={3}
      />,
    );

    // Should render group action button + visible action buttons based on available space
    const actions = container.querySelectorAll('[data-test-id="action"]');

    expect(actions.length).toBeGreaterThanOrEqual(3);
  });
});
