import { render } from '@testing-library/react';
import React from 'react';
import { describe, expect, it } from 'vitest';
import { Icons } from './Icons';
import { IconName } from './Icons.models';

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

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

  it.each`
    key                          | result
    ${IconName.Axi}              | ${1}
    ${IconName.Archive}          | ${1}
    ${IconName.Audio}            | ${1}
    ${IconName.DescriptiveAudio} | ${1}
    ${IconName.BackwardOne}      | ${1}
    ${IconName.BackwardTen}      | ${1}
    ${IconName.Block}            | ${1}
    ${IconName.Bulk}             | ${1}
    ${IconName.BulkEdit}         | ${1}
    ${IconName.Calendar}         | ${1}
    ${IconName.Checkmark}        | ${1}
    ${IconName.ChevronDown}      | ${1}
    ${IconName.ChevronLeft}      | ${1}
    ${IconName.ChevronRight}     | ${1}
    ${IconName.ChevronUp}        | ${1}
    ${IconName.ClosedCaption}    | ${1}
    ${IconName.Copy}             | ${1}
    ${IconName.Delete}           | ${1}
    ${IconName.Details}          | ${1}
    ${IconName.Drag}             | ${6}
    ${IconName.Ellipsis}         | ${1}
    ${IconName.Error}            | ${1}
    ${IconName.External}         | ${1}
    ${IconName.File}             | ${1}
    ${IconName.Filters}          | ${1}
    ${IconName.ForwardOne}       | ${1}
    ${IconName.ForwardTen}       | ${1}
    ${IconName.Info}             | ${1}
    ${IconName.InProgress}       | ${1}
    ${IconName.MidlineEllipsis}  | ${1}
    ${IconName.Minus}            | ${1}
    ${IconName.Mute}             | ${1}
    ${IconName.NavigateRight}    | ${1}
    ${IconName.Pause}            | ${1}
    ${IconName.Play}             | ${1}
    ${IconName.Plus}             | ${1}
    ${IconName.Publish}          | ${1}
    ${IconName.QuickEdit}        | ${1}
    ${IconName.QuickEditStation} | ${1}
    ${IconName.RemoveFilter}     | ${1}
    ${IconName.Replace}          | ${1}
    ${IconName.Retry}            | ${1}
    ${IconName.Save}             | ${2}
    ${IconName.Snapshot}         | ${1}
    ${IconName.Stop}             | ${1}
    ${IconName.Subtitles}        | ${1}
    ${IconName.Success}          | ${1}
    ${IconName.Unarchive}        | ${1}
    ${IconName.Undo}             | ${1}
    ${IconName.Unmute}           | ${1}
    ${IconName.Unpublish}        | ${1}
    ${IconName.Upload}           | ${1}
    ${IconName.Video}            | ${1}
    ${IconName.Warning}          | ${1}
    ${IconName.X}                | ${1}
  `('renders $key icon with $result children', ({ key, result }) => {
    const { container } = render(<Icons icon={key} />);

    const icon = container.querySelector('svg');

    expect(icon?.children.length).toBe(result);
  });

  it('passes down optional className to icon', () => {
    const mockClass = 'test-class';
    const { container } = render(
      <Icons icon={IconName.Archive} className={mockClass} />,
    );

    const icon = container.querySelector('svg');

    expect(icon?.classList.contains(mockClass)).toBe(true);
  });

  it('renders an empty placeholder is used if no icon is set', () => {
    const { container } = render(<Icons />);

    const icon = container.querySelector('svg');

    expect(icon?.children.length).toBe(0);
  });

  it('applies accessibility attributes correctly', () => {
    const { container } = render(
      <Icons
        icon={IconName.Play}
        aria-label="Play video"
        title="Start playback"
      />,
    );

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

    expect(svg?.getAttribute('aria-label')).toBe('Play video');
    expect(svg?.getAttribute('role')).toBe('img');
    expect(svg?.getAttribute('aria-hidden')).toBeNull();
    expect(container.querySelector('title')?.textContent).toBe(
      'Start playback',
    );
  });

  it('marks decorative icons as presentation', () => {
    const { container } = render(<Icons icon={IconName.Play} />);

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

    expect(svg?.getAttribute('role')).toBe('presentation');
    expect(svg?.getAttribute('aria-hidden')).toBe('true');
  });
});
