import { describe, expect, it } from 'vitest';

// A real page has all its <leaflet-*> markup already parsed by the browser's
// HTML parser before the deferred module script (which calls
// customElements.define for every tag) ever runs. customElements.define()
// upgrades every matching element already in the document immediately and
// synchronously -- including firing connectedCallback -- so a "child" tag
// whose one-shot connect-time announcement is missed because its listening
// "parent" tag wasn't defined yet is broken in exactly this scenario, even
// though it looks fine in every other test in this suite (they all import
// the component modules -- and so call customElements.define -- before
// creating any element, which sidesteps the whole problem).
//
// This file deliberately does NOT statically import any component module,
// so nothing here is defined yet when the tree below is built.
describe('real page load order (markup before customElements.define)', () => {
  it('wires control-layers, layer-group and polygon/line correctly', async () => {
    const map = document.createElement('leaflet-map');
    map.setAttribute('lat', '51.5');
    map.setAttribute('lng', '-0.09');
    map.setAttribute('zoom', '13');

    const controlLayers = document.createElement('leaflet-control-layers');
    const baseTile = document.createElement('leaflet-tile-layer');
    baseTile.setAttribute('type', 'base');
    baseTile.setAttribute('name', 'Base');
    baseTile.setAttribute('active', '');
    baseTile.setAttribute('url', 'https://tile.example/{z}/{x}/{y}.png');
    controlLayers.append(baseTile);

    const group = document.createElement('leaflet-layer-group');
    const groupedMarker = document.createElement('leaflet-marker');
    groupedMarker.setAttribute('lat', '1');
    groupedMarker.setAttribute('lng', '2');
    group.append(groupedMarker);

    const polygon = document.createElement('leaflet-polygon');
    const vertices = [
      ['51.509', '-0.08'],
      ['51.503', '-0.06'],
      ['51.51', '-0.047'],
    ].map(([lat, lng]) => {
      const line = document.createElement('leaflet-line');
      line.setAttribute('lat', lat);
      line.setAttribute('lng', lng);
      return line;
    });
    polygon.append(...vertices);

    map.append(controlLayers, group, polygon);
    document.body.append(map);

    // Nothing is upgraded yet -- these are plain, undefined elements.
    expect(map.leafletObject).toBeUndefined();

    // Mirrors index.ts's real export order, which is what actually runs when
    // a page does `import 'leaflet-components'`.
    const lc = await import('../src/index.ts');

    expect(map).toBeInstanceOf(lc.LeafletMapElement);
    expect(map.leafletObject).toBeDefined();
    expect(polygon.leafletObject?.getLatLngs()).toEqual([
      [
        { lat: 51.509, lng: -0.08 },
        { lat: 51.503, lng: -0.06 },
        { lat: 51.51, lng: -0.047 },
      ],
    ]);

    const controlLayersInternal = controlLayers.leafletObject as unknown as {
      _layers: { name: string }[];
    };
    // oxlint-disable-next-line no-underscore-dangle -- Leaflet's own field name
    expect(controlLayersInternal._layers.map((l) => l.name)).toEqual(['Base']);

    expect(group.leafletObject?.hasLayer(groupedMarker.leafletObject!)).toBe(true);

    map.remove();
  });
});