import { render } from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import { describe, expect, it } from 'vitest';
import { TileSmall, TileSmallProps } from './TileSmall';

const mockProps: TileSmallProps = {
  path: 'test-path',
  label: 'test-label',
  icon: '/images/test-icon.png',
  type: 'small',
};

const MockIcon: React.FC = () => (
  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" />
  </svg>
);

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

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

  it('renders the tile label', () => {
    const { container } = render(
      <MemoryRouter>
        <TileSmall {...mockProps} />
      </MemoryRouter>,
    );

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

    expect(label?.textContent).toBe(mockProps.label);
  });

  it('renders an icon when passed a string URL', () => {
    const { container } = render(
      <MemoryRouter>
        <TileSmall {...mockProps} />
      </MemoryRouter>,
    );
    const iconUrl = container.querySelector('img')?.getAttribute('src');

    expect(iconUrl).toBe(`${mockProps.icon}`);
  });

  it('renders an icon when passed as a react component', () => {
    const { container } = render(
      <MemoryRouter>
        <TileSmall {...mockProps} icon={<MockIcon />} />
      </MemoryRouter>,
    );
    const iconWrapper = container.querySelector('.icon');
    const svg = iconWrapper?.querySelector('svg');
    expect(svg).toBeInTheDocument();
  });

  it('to attrubute is not exists disabled class should be applied when disabled', () => {
    const { container } = render(
      <MemoryRouter>
        <TileSmall {...{ ...mockProps, disabled: true }} />
      </MemoryRouter>,
    );
    const tile = container.querySelector('.container');

    expect(tile?.classList.contains('disabled')).toBe(true);
  });

  it('creates a hyperlink using the path prop', () => {
    const { container } = render(
      <MemoryRouter>
        <TileSmall {...mockProps} />
      </MemoryRouter>,
    );

    const navLink = container.querySelector('.container') as HTMLAnchorElement;

    expect(navLink?.getAttribute('href')).toBe(mockProps.path);
  });

  it('sets row and column spans from props', () => {
    const mockColumnSpan = 3;
    const mockRowSpan = 1;
    const { container } = render(
      <MemoryRouter>
        <TileSmall
          {...mockProps}
          smallTileColumnSpan={mockColumnSpan}
          smallTileRowSpan={mockRowSpan}
        />
      </MemoryRouter>,
    );

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

    expect(navElement.style.gridColumn).toBe(`span ${mockColumnSpan}`);
    expect(navElement.style.gridRow).toBe(`span ${mockRowSpan}`);
  });
});
