/*
SITE GALLERY MANAGER
Handles two main functions:

1. Responsive Images
- Automatically loads appropriate image sizes based on screen width
- Listens for resize events and updates images accordingly
- Uses data-small, data-medium, and data-full attributes on images

2. Gallery Management
- HTML Structure:
  <a class="open-gallery" data-opens="gallery-id" data-focus="image-to-show">
    <figure><img...></figure>
  </a>

  <dialog class="gallery" id="gallery-id">
    - Main image display (.images with multiple <figure>s)
    - Navigation bar on bottom (nav.thumbnails) with:
      - Previous/Next buttons
      - Thumbnail list (toggles with .open class)
      - Expand button (toggles .expanded class)
    - Visibility toggle (toggles .hide-info class)
    - Close button
  </dialog>

Key Features:
- Opens in modal dialog with keyboard navigation
- Manages thumbnail navigation state
- Handles responsive image loading
- Uses class-based state management (open, expanded, hide-info)
- All event handling through delegation
- Built on UIHandler base class for state management

State Management:
- Dialog: open/closed
- Thumbnails: collapsed/open/expanded
- Info panel: visible/hidden
- Active image: tracked with .focused class
*/
class Media {
	constructor() {
		this.currentWidth = window.innerWidth;
		this.initElements();
		if (this.images.length === 0) {
			return;
		}
		this.store = new window.jvbStore({
			name: 'images',
			TTL: 604800
		});
		this.touch = {
			x: null,
			y: null
		}
		this.a11y = window.jvbA11y;
		this.debouncer = window.debouncer;
		this.isTouching = false;
		this.initListeners();
		document.addEventListener('beforeunload', this.cleanup);
	}

	initElements(){
		this.images = document.querySelectorAll('.wp-site-blocks img');
		this.gallery = document.querySelector('dialog.gallery');
		this.modal = new window.jvbModal(this.gallery, {
			openMessage: 'Opened Gallery',
			closeMessage: 'Closed Gallery',
			open: '.open-gallery',
			close: '.close'
		});

		this.modal.subscribe((event, data) => {
			if (event === 'modal-open') {
				this.openGallery();
			} else if (event === 'modal-close') {
				this.closeGallery();
			}
		});
	}

	initListeners() {
		this.resizeHandler = this.handleResize.bind(this);
		this.clickHandler = this.handleClick.bind(this);
		this.keysHandler = this.handleKeys.bind(this);
		this.touchStartHandler = this.handleTouchStart.bind(this);
		this.touchEndHandler = this.handleTouchEnd.bind(this);

		document.addEventListener('click', this.clickHandler);
		window.addEventListener('resize', this.resizeHandler);
		console.log('window hash: ',window.location.hash);
		let target = document.querySelector(window.location.hash);
		if (target && target.tagName === 'LI') {
			let trigger = target.querySelector('.open-gallery');
			if (trigger) {
				this.openGallery(trigger);
			}
		}

		this.observer = new IntersectionObserver((entries) =>{
			entries.forEach(entry => {
				if (entry.isIntersecting) {
					let img = entry.target;
					if (!img.closest('dialog')) {
						this.loadAppropriateImage(img);
						this.observer.unobserve(img);
					}
				}
			})
		}, {
			root: null,
			rootMargin: '50px',
			threshold: .1
		});
		this.images.forEach(img => {
			if (!img.closest('dialog')) {
				this.observer.observe(img);
			}
		})
	}

	initTouchHandling() {
		this.isTouching = true;
		this.touch.x = 0;
		this.touch.y = 0;

		this.gallery.addEventListener('touchstart', this.touchStartHandler);
		this.gallery.addEventListener('touchend', this.touchEndHandler);
	}
	cancelTouchHandling() {
		this.isTouching = false;
		this.gallery.removeEventListener('touchstart', this.touchStartHandler);
		this.gallery.removeEventListener('touchend', this.touchEndHandler);
	}

	handleTouchStart(e) {
		this.touch.x = e.touches[0].clientX;
		this.touch.y = e.touches[0].clientY;
	}
	handleTouchEnd(e) {
		const diffX = e.changedTouches[0].clientX - this.touch.x;
		const diffY = e.changedTouches[0].clientY - this.touch.y;

		if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
			this.navigateImages({target: this.gallery}, diffX < 0 ? 'next' : 'previous');
		}
	}
	handleResize(e) {
		window.debouncer.schedule(
			'resize',
			()=> {
				const currentWidth = window.innerWidth;
				if (Math.abs(currentWidth - this.currentWidth) > 100) {
					this.currentWidth = currentWidth;
					this.handleImageResize();
				}
			},
			150
		);
	}
	handleClick(e) {

	}
	handleKeys(e) {
		//Escape handled by Modal.js
		if (e.key === 'Tab') {
			if (e.shiftKey) {

			} else {

			}
		}
	}

	openGallery(target = null) {
		document.addEventListener('keydown', this.clickHandler);
		const id = target.dataset.opens;
		this.initTouchHandling();
		let focus;
		if (!target) {
			focus = this.images[0];
		} else {
			focus = target.dataset.focus;
		}
		if (focus) {
			this.updateImage(this.gallery.querySelector(`#${focus}`));
		}
	}

	closeGallery() {
		this.cancelTouchHandling();
		document.removeEventListener('keydown', this.keysHandler);
		//Restore focus
		if (this.lastFocusedElement) {
			this.lastFocusedElement.focus();
		}
	}

	cleanup() {
		this.observer.disconnect();
		window.removeEventListener('resize', this.resizeHandler)
		if (this.isTouching) {
			this.cancelTouchHandling();
			document.removeEventListener('keydown', this.keysHandler);
		}
		document.removeEventListener('click', this.clickHandler);
	}
}