import { TileLayer } from 'leaflet';
import { describe, expect, it } from 'vitest';
import '../../src/components/leaflet-tile-layer.ts';
import '../../src/components/leaflet-tile-layer-wms.ts';

describe('leaflet-tile-layer', () => {
  it('creates a TileLayer from the url attribute with tileLayerProps options', () => {
    const el = document.createElement('leaflet-tile-layer') as HTMLElement & {
      leafletObject?: TileLayer;
    };
    el.setAttribute('url', 'https://tile.example/{z}/{x}/{y}.png');
    el.setAttribute('subdomains', 'abcd');
    el.setAttribute('tms', '');
    el.setAttribute('max-native-zoom', '17');
    document.body.append(el);

    expect(el.leafletObject).toBeInstanceOf(TileLayer);
    // Leaflet itself splits a string subdomains option into a character array.
    expect(el.leafletObject?.options.subdomains).toEqual(['a', 'b', 'c', 'd']);
    expect(el.leafletObject?.options.tms).toBe(true);
    expect(el.leafletObject?.options.maxNativeZoom).toBe(17);
    el.remove();
  });

  it('defaults zIndex to 1, matching Leaflet', () => {
    const el = document.createElement('leaflet-tile-layer') as HTMLElement & {
      leafletObject?: TileLayer;
      zIndex: number;
    };
    el.setAttribute('url', 'https://tile.example/{z}/{x}/{y}.png');
    document.body.append(el);
    expect(el.leafletObject?.options.zIndex).toBe(1);
    el.remove();
  });
});

describe('leaflet-tile-layer-wms', () => {
  it('shares base tileLayerProps with leaflet-tile-layer (previously missing entirely)', () => {
    const el = document.createElement('leaflet-tile-layer-wms') as HTMLElement & {
      leafletObject?: TileLayer.WMS;
    };
    el.setAttribute('url', 'https://wms.example/service');
    el.setAttribute('layers', 'basic');
    el.setAttribute('attribution', 'Example');
    el.setAttribute('min-zoom', '2');
    document.body.append(el);

    expect(el.leafletObject).toBeInstanceOf(TileLayer.WMS);
    expect(el.leafletObject?.options.attribution).toBe('Example');
    expect(el.leafletObject?.options.minZoom).toBe(2);
    expect(el.leafletObject?.wmsParams.layers).toBe('basic');
    el.remove();
  });

  it('resolves crs by name to the matching Leaflet CRS instance', async () => {
    const { CRS } = await import('leaflet');
    const el = document.createElement('leaflet-tile-layer-wms') as HTMLElement & {
      leafletObject?: TileLayer.WMS;
    };
    el.setAttribute('url', 'https://wms.example/service');
    el.setAttribute('layers', 'basic');
    el.setAttribute('crs', 'EPSG4326');
    document.body.append(el);

    expect(el.leafletObject?.options.crs).toBe(CRS.EPSG4326);
    el.remove();
  });
});