import { Marker, Popup, Tooltip } from 'leaflet';
import { describe, expect, it } from 'vitest';
import '../../src/components/leaflet-map.ts';
import '../../src/components/leaflet-marker.ts';
import '../../src/components/leaflet-popup.ts';
import '../../src/components/leaflet-tooltip.ts';
import '../../src/components/leaflet-icon.ts';

describe('leaflet-marker', () => {
  it('creates a Marker at lat/lng and keeps lat/lng synced while it moves', () => {
    const el = document.createElement('leaflet-marker');
    el.setAttribute('lat', '51.5');
    el.setAttribute('lng', '-0.09');
    document.body.append(el);

    expect(el.leafletObject).toBeInstanceOf(Marker);
    expect(el.leafletObject?.getLatLng()).toMatchObject({ lat: 51.5, lng: -0.09 });

    el.leafletObject?.setLatLng([1, 2]);
    expect(el.lat).toBe(1);
    expect(el.lng).toBe(2);
    // event: 'move' syncs the attribute too
    expect(el.getAttribute('lat')).toBe('1');
    expect(el.getAttribute('lng')).toBe('2');
    el.remove();
  });

  it('draggable toggles the Leaflet dragging handler', () => {
    // The dragging handler is only initialized in onAdd(), so the marker
    // needs to actually be added to a map first.
    const map = document.createElement('leaflet-map');
    document.body.append(map);

    const el = document.createElement('leaflet-marker');
    el.setAttribute('lat', '0');
    el.setAttribute('lng', '0');
    el.setAttribute('draggable', '');
    map.append(el);

    expect(el.leafletObject?.dragging?.enabled()).toBe(true);
    el.removeAttribute('draggable');
    expect(el.leafletObject?.dragging?.enabled()).toBe(false);
    map.remove();
  });

  it('swaps in a <leaflet-icon> child via the icon-changed handshake', () => {
    const el = document.createElement('leaflet-marker');
    el.setAttribute('lat', '0');
    el.setAttribute('lng', '0');
    document.body.append(el);

    const icon = document.createElement('leaflet-icon');
    icon.setAttribute('icon-url', 'https://example.com/icon.png');
    el.append(icon);

    expect(el.leafletObject?.options.icon).toBe(icon.leafletObject);
    el.remove();
  });
});

describe('leaflet-popup', () => {
  it('takes its content from innerHTML and stays in sync on mutation', async () => {
    const el = document.createElement('leaflet-popup');
    el.innerHTML = '<b>hello</b>';
    document.body.append(el);

    expect(el.leafletObject).toBeInstanceOf(Popup);
    expect(el.leafletObject?.getContent()).toBe('<b>hello</b>');

    el.innerHTML = '<b>updated</b>';
    // MutationObserver callbacks run as a microtask.
    await Promise.resolve();
    expect(el.leafletObject?.getContent()).toBe('<b>updated</b>');
    el.remove();
  });

  it('only sets its own latlng when lat/lng attributes are present', () => {
    const withLatLng = document.createElement('leaflet-popup');
    withLatLng.setAttribute('lat', '1');
    withLatLng.setAttribute('lng', '2');
    document.body.append(withLatLng);
    expect(withLatLng.leafletObject?.getLatLng()).toMatchObject({ lat: 1, lng: 2 });
    withLatLng.remove();

    const withoutLatLng = document.createElement('leaflet-popup');
    document.body.append(withoutLatLng);
    expect(withoutLatLng.leafletObject?.getLatLng()).toBeUndefined();
    withoutLatLng.remove();
  });
});

describe('leaflet-tooltip', () => {
  it('creates a Tooltip with content and direction/permanent/sticky options', () => {
    const el = document.createElement('leaflet-tooltip');
    el.innerHTML = 'hover text';
    el.setAttribute('direction', 'top');
    el.setAttribute('permanent', '');
    el.setAttribute('sticky', '');
    document.body.append(el);

    expect(el.leafletObject).toBeInstanceOf(Tooltip);
    expect(el.leafletObject?.getContent()).toBe('hover text');
    expect(el.leafletObject?.options.direction).toBe('top');
    expect(el.leafletObject?.options.permanent).toBe(true);
    expect(el.leafletObject?.options.sticky).toBe(true);
    el.remove();
  });
});