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

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

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

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

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

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

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

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

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

  it('renders an icon when passed as a string URL', () => {
    const { container } = renderWithRouter(<Tile {...mockProps} />);
    const iconImg = container.querySelector('img') as HTMLImageElement;

    expect(iconImg.src).toContain(mockProps.icon);
  });

  it('renders an icon when passed as a react component', () => {
    const { container } = renderWithRouter(
      <Tile {...mockProps} icon={<MockIcon />} />,
    );
    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 } = renderWithRouter(
      <Tile {...{ ...mockProps, disabled: true }} />,
    );
    const tile = container.querySelector('.tile');

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

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

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

    expect(tile).toBeInTheDocument();
  });
});
