// LoadingState.js - Manages loading overlay and animations
class LoadingState {
    constructor(container, options = {}) {
        this.container = container;
        this.options = {
            loadingMessages: {},
            contentTypes: [],
            taxonomies: [],
            cycleInterval: 2000, // Time between loading message changes
            ...options
        };

        this.messageElement = this.container.querySelector('.loading-message');
        this.dotsElement = this.container.querySelector('.loading-dots');
		this.active = false;
		this.quipInterval = null;
		this.currentIndex = 0;

		// Initialize quips based on content types and taxonomies
		this.quips = this.initializeQuips();
	}

	/**
	 * Initialize quips for loading messages
	 */
	initializeQuips() {
		// Default quips for different content types
		const defaultQuips = {
			artist: [
				"Seeking ink masters",
				"Finding your next artist",
				"Gathering the talent",
				"Meeting the makers",
				"Summoning art wizards",
				"Finding ink slingers",
				"Priming the inkernet",
				"Loading talent pool",
				"Herding needle ninjas",
				"Rallying rad artists"
			],
			tattoo: [
				"Converting ink to pixels",
				"Curating fresh ink",
				"Making tattoos internet-famous",
				"Processing perfection",
				"Finding forever art",
				"Making masterpieces mobile",
				"Finding fresh flash",
			],
			shop: [
				"Mapping the scene",
				"Finding your next spot",
				"Checking shop vibes",
				"Scanning studio space",
				"Locating ink havens",
				"Loading local legends",
				"Finding fresh digs",
			],
			artwork: [
				"Gathering masterpieces",
				"Curating creativity",
				"Finding fine art",
				"Collecting canvas magic",
				"Processing paintings",
				"Loading creative chaos",
			],
			piercing: [
				"Finding fresh mods",
				"Piercing through the data",
				"Seeking sparkly things",
				"Processing piercings",
				"Curating cool mods",
				"Seeking shiny stuffs",
				"Loading mod magic",
				"Processing pretty pieces",
				"Scanning sparkly stuff"
			],
			style: [
				"Sorting styles",
				"Categorizing cool",
				"Finding your vibe",
				"Processing aesthetics",
				"Matching moods",
				"Style scanning",
				"Finding your flavour"
			],
			theme: [
				"Theming things up",
				"Categorizing content",
				"Sorting subjects",
				"Finding your flavor",
				"Organizing ideas",
			],
			city: [
				"Looking around corners",
				"Checking the map",
				"Checking it twice",
				"Pushing past obstacles"
			],
			type: [
				"Searching for artists",
			]
		};

		// Map pstyle, artstyle, etc. to their base types for quips
		const typeMapping = {
			'pstyle': 'style',
			'artstyle': 'style',
			'arttheme': 'theme',
			'artmedium': 'style',
			'artform': 'style',
			'placement': 'style',
			'colour': 'style'
		};

		// Gather all quips based on content types and taxonomies
		const allQuips = [];

		// Add content type quips
		this.options.contentTypes.forEach(type => {
			if (defaultQuips[type]) {
				defaultQuips[type].forEach(quip => {
					allQuips.push({
						icon: type,
						quip: quip
					});
				});
			}
		});

		// Add taxonomy quips
		this.options.taxonomies.forEach(taxonomy => {
			const baseType = typeMapping[taxonomy] || taxonomy;
			if (defaultQuips[baseType]) {
				defaultQuips[baseType].forEach(quip => {
					allQuips.push({
						icon: taxonomy,
						quip: quip
					});
				});
			}
		});

		// Shuffle the quips array
		return this.shuffleArray(allQuips);
	}

	/**
	 * Show the loading overlay
	 */
	show() {
		this.container.classList.add('active');
		this.active = true;
		this.startQuipCycle();
		document.body.classList.add('loading');
	}

	/**
	 * Hide the loading overlay
	 */
	hide() {
		this.container.classList.remove('active');
		this.active = false;
		this.stopQuipCycle();
		document.body.classList.remove('loading');
	}

	/**
	 * Start cycling through loading messages
	 */
	startQuipCycle() {
		if (this.quipInterval) {
			clearInterval(this.quipInterval);
		}

		if (!this.quips.length) return;

		// Set initial message
		this.updateMessage(this.quips[0]);
		this.container.classList.remove('changing');

		this.quipInterval = setInterval(() => {
			this.container.classList.add('changing');

			setTimeout(() => {
				this.currentIndex = (this.currentIndex + 1) % this.quips.length;
				this.updateMessage(this.quips[this.currentIndex]);

				setTimeout(() => {
					this.container.classList.remove('changing');
				}, 50);
			}, 350);
		}, this.options.cycleInterval);
	}

	/**
	 * Stop cycling through loading messages
	 */
	stopQuipCycle() {
		if (this.quipInterval) {
			clearInterval(this.quipInterval);
			this.quipInterval = null;
		}
	}

	/**
	 * Update the loading message
	 */
	updateMessage(quipData) {
		if (!this.messageElement) return;

		const icon = window.feedSettings?.icons?.[quipData.icon] || '';
		this.messageElement.innerHTML = `${icon}<p>${quipData.quip}</p>`;
	}

	/**
	 * Set a custom loading message
	 */
	setMessage(message, icon = null) {
		if (!this.messageElement) return;

		this.stopQuipCycle();

		const iconHtml = icon ? window.feedSettings?.icons?.[icon] || '' : '';
		this.messageElement.innerHTML = `${iconHtml}<p>${message}</p>`;
	}

	/**
	 * Shuffle an array (Fisher-Yates algorithm)
	 */
	shuffleArray(array) {
		const newArray = [...array];
		for (let i = newArray.length - 1; i > 0; i--) {
			const j = Math.floor(Math.random() * (i + 1));
			[newArray[i], newArray[j]] = [newArray[j], newArray[i]];
		}
		return newArray;
	}
}

export default LoadingState;