import { render } from '@testing-library/react';
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import { describe, expect, it } from 'vitest';
import { Hub } from './Hub';
import { HubItem } from './Hub.model';

const renderWithRouter = (component: React.ReactElement) => {
  return render(<Router>{component}</Router>);
};

const mockItems: HubItem[] = [
  {
    groupName: 'Video Service',
    path: '/video/acquisition',
    label: 'Transcoding: Acquisition',
    icon: '/images/default_image.svg',
  },
  {
    groupName: 'Video Service',
    path: '/video/processing',
    label: 'Transcoding: Processing',
    icon: '/images/default_image.svg',
  },
  {
    groupName: 'Video Service',
    path: '/video/processing',
    label: 'Transcoding: Publishing',
    icon: '/images/default_image.svg',
  },
  {
    groupName: 'Media Service',
    path: '/media/tvgenres',
    label: 'Movie Genres',
    icon: '/images/default_image.svg',
  },
  {
    groupName: 'Media Service',
    path: '/media/tvgenres',
    label: 'TV Show Genres',
    icon: '/images/default_image.svg',
  },
  {
    groupName: 'Identity & Access',
    path: '/id/users',
    label: 'User Accounts',
    icon: '/images/default_image.svg',
  },
  {
    groupName: 'Identity & Access',
    path: '/id/roles',
    label: 'User Roles',
    icon: '/images/default_image.svg',
  },
  {
    groupName: 'Identity & Access',
    path: '/id/tags',
    label: 'User Role Tags',
    icon: '/images/default_image.svg',
  },
  {
    groupName: 'Identity & Access',
    path: '/id/service',
    label: 'Service Accounts',
    icon: '/images/default_image.svg',
  },
];

const groupNames = [...new Set(mockItems.map((item) => item.groupName))];

describe('Hub Tests', () => {
  it('renders the component without crashing', () => {
    const { container } = renderWithRouter(<Hub items={mockItems} />);

    expect(container).toBeTruthy();
  });

  it('renders a group and tiles for each item in the data array', () => {
    const { container } = renderWithRouter(<Hub items={mockItems} />);
    const tiles = container.querySelectorAll('[data-test-id="tile-label"]');
    const groups = container.querySelectorAll(
      '[data-test-id="hub-group-label"]',
    );

    expect(groups).toHaveLength(groupNames.length);

    expect(tiles).toHaveLength(mockItems.length);
  });
});
