import { DivIcon, Icon } from 'leaflet';
import { describe, expect, it, vi } from 'vitest';
import '../../src/components/leaflet-icon.ts';
import '../../src/components/leaflet-div-icon.ts';

describe('leaflet-icon', () => {
  it('creates nothing until icon-url is set, then an Icon once it is', () => {
    const el = document.createElement('leaflet-icon');
    document.body.append(el);
    expect(el.leafletObject).toBeUndefined();

    el.setAttribute('icon-url', 'https://example.com/icon.png');
    expect(el.leafletObject).toBeInstanceOf(Icon);
    expect(el.leafletObject?.options.iconUrl).toBe('https://example.com/icon.png');
    el.remove();
  });

  it('rebuilds (not mutates) the Icon on every attribute change and re-emits icon-changed', () => {
    const el = document.createElement('leaflet-icon');
    el.setAttribute('icon-url', 'https://example.com/a.png');
    const onChanged = vi.fn();
    el.addEventListener('icon-changed', onChanged);
    document.body.append(el);

    const first = el.leafletObject;
    onChanged.mockClear();
    el.setAttribute('icon-size', JSON.stringify([32, 32]));

    expect(el.leafletObject).not.toBe(first);
    expect(onChanged).toHaveBeenCalledOnce();
    el.remove();
  });
});

describe('leaflet-div-icon', () => {
  it('defaults className to Leaflet’s own default and renders markup as html', () => {
    const el = document.createElement('leaflet-div-icon');
    el.innerHTML = '<span>*</span>';
    document.body.append(el);

    expect(el.leafletObject).toBeInstanceOf(DivIcon);
    expect(el.leafletObject?.options.className).toBe('leaflet-div-icon');
    expect(el.leafletObject?.options.html).toBe('<span>*</span>');
    el.remove();
  });

  it('emits icon-changed(null) on disconnect', () => {
    const el = document.createElement('leaflet-div-icon');
    document.body.append(el);
    const onChanged = vi.fn();
    el.addEventListener('icon-changed', onChanged);
    el.remove();
    expect(onChanged).toHaveBeenCalledOnce();
    expect((onChanged.mock.calls[0][0] as CustomEvent).detail.icon).toBeNull();
  });
});