import { describe, it, expect, afterEach } from 'vitest';
import { render, cleanup } from '@testing-library/svelte';
import { IconAccessible, IconAccessibleFilled } from './src/tabler-icons-svelte-runes.js';

describe('Svelte Runes Icon component', () => {
  afterEach(() => cleanup());

  it('should render icon component', () => {
    const { container } = render(IconAccessible);
    expect(container.getElementsByTagName('svg').length).toBeGreaterThan(0);
  });

  it('should add a class to the element', () => {
    const { container } = render(IconAccessible, {
      props: {
        class: 'test-class',
      },
    });

    const svg = container.getElementsByTagName('svg')[0];

    expect(svg).toHaveClass('test-class');
    expect(svg).toHaveClass('tabler-icon');
    expect(svg).toHaveClass('tabler-icon-accessible');
  });

  it('should add a style attribute to the element', () => {
    const { container } = render(IconAccessible, {
      props: {
        style: 'color: red',
      },
    });

    const svg = container.getElementsByTagName('svg')[0];

    expect(svg).toHaveStyle('color: rgb(255, 0, 0)');
  });

  it('should update svg attributes when there are props passed to the component', () => {
    const { container } = render(IconAccessible, {
      props: {
        size: 48,
        color: 'red',
        stroke: 4,
      },
    });

    const svg = container.getElementsByTagName('svg')[0];

    expect(svg.getAttribute('width')).toBe('48');
    expect(svg.getAttribute('stroke')).toBe('red');
    expect(svg.getAttribute('stroke-width')).toBe('4');
  });

  it('should accept stroke as a number', () => {
    const { container } = render(IconAccessible, {
      props: {
        stroke: 3,
      },
    });

    const svg = container.getElementsByTagName('svg')[0];

    expect(svg.getAttribute('stroke-width')).toBe('3');
  });

  it('should accept size as a string', () => {
    const { container } = render(IconAccessible, {
      props: {
        size: '100%',
      },
    });

    const svg = container.getElementsByTagName('svg')[0];

    expect(svg.getAttribute('width')).toBe('100%');
    expect(svg.getAttribute('height')).toBe('100%');
  });

  it('should update svg attributes when there are props passed to the filled version of component', () => {
    const { container } = render(IconAccessibleFilled, {
      props: {
        size: 48,
        color: 'red',
      },
    });
    const svg = container.getElementsByTagName('svg')[0];

    expect(svg.getAttribute('width')).toBe('48');
    expect(svg.getAttribute('fill')).toBe('red');
    expect(svg.getAttribute('stroke')).toBe('none');
    expect(svg.getAttribute('stroke-width')).toBe(null);
  });

  it('should render children content using snippets', () => {
    const { container } = render(IconAccessible, {
      props: {},
      // Test that children can be passed (even though we can't easily test snippet content in this setup)
    });

    const svg = container.getElementsByTagName('svg')[0];
    expect(svg).toBeDefined();
  });

  it('should match snapshot', () => {
    const { container } = render(IconAccessible);
    expect(container.innerHTML).toMatchInlineSnapshot(`
      <svg xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="24"
           viewbox="0 0 24 24"
           fill="none"
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
           class="tabler-icon tabler-icon-accessible "
      >
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0">
        </path>
        <path d="M10 16.5l2 -3l2 3m-2 -3v-2l3 -1m-6 0l3 1">
        </path>
        <circle cx="12"
                cy="7.5"
                r=".5"
                fill="currentColor"
        >
        </circle>
      </svg>
    `);
  });
});