import { ImageOverlay, SVGOverlay, VideoOverlay, latLngBounds } from 'leaflet';
import { describe, expect, it } from 'vitest';
import '../../src/components/leaflet-map.ts';
import '../../src/components/leaflet-image-overlay.ts';
import '../../src/components/leaflet-video-overlay.ts';
import '../../src/components/leaflet-svg-overlay.ts';

const BOUNDS: [[number, number], [number, number]] = [
  [40.71, -74.24],
  [40.78, -74.12],
];

describe('leaflet-image-overlay', () => {
  it('creates an ImageOverlay with a live bounds getter (url has no Leaflet getter to read back)', () => {
    const el = document.createElement('leaflet-image-overlay');
    el.setAttribute('url', 'https://example.com/a.png');
    el.setAttribute('bounds', JSON.stringify(BOUNDS));
    document.body.append(el);

    expect(el.leafletObject).toBeInstanceOf(ImageOverlay);
    expect(el.url).toBe('https://example.com/a.png');
    expect(el.bounds).toEqual(BOUNDS);

    el.leafletObject?.setBounds(
      latLngBounds([
        [1, 2],
        [3, 4],
      ]),
    );
    // el.bounds reads live via getBounds()
    expect(el.bounds).toEqual([
      [1, 2],
      [3, 4],
    ]);
    el.remove();
  });
});

describe('leaflet-video-overlay', () => {
  it('creates a VideoOverlay and applies the newly added options', () => {
    const el = document.createElement('leaflet-video-overlay');
    el.setAttribute('url', 'https://example.com/a.mp4');
    el.setAttribute('bounds', JSON.stringify(BOUNDS));
    el.setAttribute('z-index', '5');
    el.setAttribute('class-name', 'my-video');
    el.setAttribute('keep-aspect-ratio', 'false');
    el.setAttribute('error-overlay-url', 'https://example.com/error.png');
    document.body.append(el);

    expect(el.leafletObject).toBeInstanceOf(VideoOverlay);
    expect(el.leafletObject?.options.zIndex).toBe(5);
    expect(el.leafletObject?.options.className).toBe('my-video');
    expect(el.leafletObject?.options.keepAspectRatio).toBe(false);
    expect(el.leafletObject?.options.errorOverlayUrl).toBe('https://example.com/error.png');
    el.remove();
  });

  it('applies playback attributes directly to the underlying <video> element once it exists', () => {
    // The <video> element is only created in onAdd(), so the overlay needs to
    // actually be added to a map before getElement() returns anything.
    const map = document.createElement('leaflet-map');
    document.body.append(map);

    const el = document.createElement('leaflet-video-overlay');
    el.setAttribute('url', 'https://example.com/a.mp4');
    el.setAttribute('bounds', JSON.stringify(BOUNDS));
    el.setAttribute('muted', '');
    el.setAttribute('loop', '');
    map.append(el);

    const video = el.getElement();
    expect(video?.muted).toBe(true);
    expect(video?.loop).toBe(true);
    map.remove();
  });
});

describe('leaflet-svg-overlay', () => {
  it('creates an SVGOverlay with a live bounds getter', () => {
    const el = document.createElement('leaflet-svg-overlay');
    el.setAttribute('bounds', JSON.stringify(BOUNDS));
    document.body.append(el);

    expect(el.leafletObject).toBeInstanceOf(SVGOverlay);
    expect(el.bounds).toEqual(BOUNDS);
    el.remove();
  });
});