import { render } from '@solidjs/testing-library';
import { createSignal, flush } from 'solid-js';
import { describe, expect, it } from 'vitest';
import { House, LucideProvider } from '../src/lucide-solid';

describe('Using LucideProvider', () => {
  it('should render the icon with LucideProvider', () => {
    const { container } = render(() => (
      <LucideProvider
        size={48}
        color="red"
      >
        <House />
      </LucideProvider>
    ));

    expect(container.firstChild).toMatchSnapshot();
  });

  it('should render the icon with default props when no provider is used', () => {
    const { container } = render(() => <House />);

    const IconComponent = container.firstElementChild;

    expect(IconComponent).toHaveAttribute('width', '24');
    expect(IconComponent).toHaveAttribute('height', '24');
    expect(IconComponent).toHaveAttribute('stroke', 'currentColor');
    expect(IconComponent).toHaveAttribute('stroke-width', '2');
  });

  it('should render the icon with LucideProvider and custom strokeWidth', () => {
    const { container } = render(() => (
      <LucideProvider
        size={48}
        color="red"
        strokeWidth={4}
      >
        <House />
      </LucideProvider>
    ));

    const IconComponent = container.firstElementChild;

    expect(IconComponent).toHaveAttribute('width', '48');
    expect(IconComponent).toHaveAttribute('height', '48');
    expect(IconComponent).toHaveAttribute('stroke', 'red');
    expect(IconComponent).toHaveAttribute('stroke-width', '4');
  });

  it('should update when reactive LucideProvider props change', () => {
    const [size, setSize] = createSignal(24);
    const { container } = render(() => (
      <LucideProvider size={size()}>
        <House />
      </LucideProvider>
    ));

    expect(container.firstElementChild).toHaveAttribute('width', '24');
    expect(container.firstElementChild).toHaveAttribute('height', '24');

    setSize(48);
    flush();

    expect(container.firstElementChild).toHaveAttribute('width', '48');
    expect(container.firstElementChild).toHaveAttribute('height', '48');
  });

  it('should render the icon with LucideProvider and custom absoluteStrokeWidth', () => {
    const { container } = render(() => (
      <LucideProvider
        size={48}
        color="red"
        absoluteStrokeWidth
      >
        <House />
      </LucideProvider>
    ));

    const IconComponent = container.firstElementChild;

    expect(IconComponent).toHaveAttribute('stroke-width', '1');
  });

  it("should override the provider's global props when passing props to the icon", () => {
    const { container } = render(() => (
      <LucideProvider
        size={48}
        color="red"
        strokeWidth={4}
      >
        <House
          size={24}
          color="blue"
          strokeWidth={2}
        />
      </LucideProvider>
    ));

    const IconComponent = container.firstElementChild;

    expect(IconComponent).toHaveAttribute('width', '24');
    expect(IconComponent).toHaveAttribute('height', '24');
    expect(IconComponent).toHaveAttribute('stroke', 'blue');
    expect(IconComponent).toHaveAttribute('stroke-width', '2');
  });

  it('should merge className from provider and icon', () => {
    const { container } = render(() => (
      <LucideProvider class="provider-class">
        <House class="icon-class" />
      </LucideProvider>
    ));

    const IconComponent = container.firstElementChild;

    expect(IconComponent).toHaveAttribute(
      'class',
      'lucide lucide-house lucide-home lucide-icon provider-class icon-class',
    );
  });
});