import { GeoJSON } from 'leaflet';
import { describe, expect, it } from 'vitest';
import '../../src/components/leaflet-geojson.ts';

const FEATURE = {
  type: 'Feature',
  geometry: {
    type: 'Polygon',
    coordinates: [
      [
        [-0.13, 51.5],
        [-0.12, 51.5],
        [-0.12, 51.51],
        [-0.13, 51.51],
        [-0.13, 51.5],
      ],
    ],
  },
  properties: {},
};

describe('leaflet-geojson', () => {
  it('builds a GeoJSON layer from the data attribute with pathProps nested as style', () => {
    const el = document.createElement('leaflet-geojson') as HTMLElement & {
      leafletObject?: GeoJSON;
    };
    el.setAttribute('data', JSON.stringify(FEATURE));
    el.setAttribute('color', '#e67e22');
    el.setAttribute('fill-opacity', '0.4');
    document.body.append(el);

    expect(el.leafletObject).toBeInstanceOf(GeoJSON);
    expect(el.leafletObject?.getLayers()).toHaveLength(1);

    const style = el.leafletObject?.options.style as { color?: string; fillOpacity?: number };
    expect(style.color).toBe('#e67e22');
    expect(style.fillOpacity).toBe(0.4);
    el.remove();
  });

  it('replaces its layers when the data attribute changes', () => {
    const el = document.createElement('leaflet-geojson') as HTMLElement & {
      leafletObject?: GeoJSON;
    };
    el.setAttribute('data', JSON.stringify(FEATURE));
    document.body.append(el);
    expect(el.leafletObject?.getLayers()).toHaveLength(1);

    el.setAttribute(
      'data',
      JSON.stringify({ type: 'FeatureCollection', features: [FEATURE, FEATURE] }),
    );
    expect(el.leafletObject?.getLayers()).toHaveLength(2);
    el.remove();
  });
});