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 { LandingPageTiles } from './LandingPageTiles';
import { LandingPageItem } from './LandingPageTiles.model';

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

const mockItems: LandingPageItem[] = [
  {
    path: '/contentset',
    label: 'CONTENT SET',
    icon: '/images/default_image.svg',
    type: 'large',
    subtitle: '3',
  },
  {
    path: '/tvshows',
    label: 'TV SHOWS',
    icon: '/images/default_image.svg',
    type: 'large',
    subtitle: '4198',
  },
  {
    path: '/collections',
    label: 'Collections',
    icon: '/images/default_image.svg',
    type: 'small',
  },
  {
    path: '/localizations',
    label: 'Localizations',
    icon: '/images/default_image.svg',
    type: 'small',
  },
];

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

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

  it('renders a tile for each item in the data array', () => {
    const { container } = renderWithRouter(
      <LandingPageTiles items={mockItems} />,
    );
    const tiles = container.querySelector('.container');

    expect(tiles?.children.length).toBe(mockItems.length);
  });

  it('displays the right row height, grid gap, and amount of columns when passed into props', () => {
    const mockRowHeight = '300px';
    const mockGidGap = '35px';
    const mockColumns = 36;
    const { container } = renderWithRouter(
      <LandingPageTiles
        items={mockItems}
        gridTemplateColumns={mockColumns}
        gridGap={mockGidGap}
        gridRowHeight={mockRowHeight}
      />,
    );

    const gridElement = container.querySelector('.container') as HTMLElement;

    expect(gridElement.style.gridAutoRows).toBe(mockRowHeight);
    expect(gridElement.style.gridGap).toBe(mockGidGap);
    expect(gridElement.style.gridTemplateColumns).toBe(
      `repeat(${mockColumns}, 1fr)`,
    );
  });

  it('has the right minimum width, maximum width, and alignment when passed into props', () => {
    const mockMinWidth = '200px';
    const mockMaxWidth = '400px';
    const mockAlignment = 'right';
    const { container } = renderWithRouter(
      <LandingPageTiles
        items={mockItems}
        minWidth={mockMinWidth}
        maxWidth={mockMaxWidth}
        alignment={mockAlignment}
      />,
    );

    const gridElement = container.querySelector('.container') as HTMLElement;

    expect(gridElement.style.minWidth).toBe(mockMinWidth);
    expect(gridElement.style.maxWidth).toBe(mockMaxWidth);
    expect(gridElement.style.justifySelf).toBe(mockAlignment);
  });

  it('supports children elements to be passed in', () => {
    const { container } = renderWithRouter(
      <LandingPageTiles items={mockItems}>
        <div id="test-child"></div>
      </LandingPageTiles>,
    );

    const child = container.querySelector('#test-child');

    expect(child).toBeInTheDocument();
  });

  // These need tests. Currently, spying on these functions and useState/useEffect is broken.
  it.todo('setLargeTiles');
  it.todo('setSmallTiles');
  it.todo('seperateTiles');
});
