// --- VARIABLES Y FUNCIONES GLOBALES ---

function initGlobalWidget() {
	let selectRegion = ''
	let selectTown = ''

	const regiones = [
		{
			name: 'Región de Arica y Parinacota',
			code: 1,
			comunas: ['Arica', 'Camarones', 'General Lagos', 'Putre']
		},
		{
			name: 'Región de Tarapacá',
			code: 2,
			comunas: ['Alto Hospicio', 'Camiña', 'Colchane', 'Huara', 'Iquique', 'Pica', 'Pozo Almonte']
		},
		{
			name: 'Región de Antofagasta',
			code: 3,
			comunas: ['Antofagasta', 'Calama', 'María Elena', 'Mejillones', 'Ollagüe', 'San Pedro de Atacama', 'Sierra Gorda', 'Taltal', 'Tocopilla']
		},
		{
			name: 'Región de Atacama',
			code: 4,
			comunas: [
				'Alto del Carmen',
				'Caldera',
				'Chañaral',
				'Copiapó',
				'Diego de Almagro',
				'Freirina',
				'Huasco',
				'Placilla',
				'Tierra Amarilla',
				'Vallenar'
			]
		},
		{
			name: 'Región de Coquimbo',
			code: 5,
			comunas: [
				'Andacollo',
				'Canela',
				'Coquimbo',
				'Combarbalá',
				'Illapel',
				'La Higuera',
				'La Serena',
				'Los Vilos',
				'Monte Patria',
				'Ovalle',
				'Paiguano',
				'Punitaqui',
				'Río Hurtado',
				'Salamanca',
				'Vicuña'
			]
		},
		{
			name: 'Región de Valparaíso',
			code: 6,
			comunas: [
				'Algarrobo',
				'Cabildo',
				'Calle Larga',
				'Cartagena',
				'Casablanca',
				'Catemu',
				'Concón',
				'El Quisco',
				'El Tabo',
				'Hijuelas',
				'Isla de Pascua',
				'Juan Fernández',
				'La Calera',
				'La Cruz',
				'La Ligua',
				'Limache',
				'Llaillay',
				'Los Andes',
				'Nogales',
				'Olmué',
				'Panquehue',
				'Papudo',
				'Petorca',
				'Puchuncaví',
				'Putaendo',
				'Quillota',
				'Quilpué',
				'Quintero',
				'Quinta Normal',
				'Rinconada',
				'San Antonio',
				'San Esteban',
				'San Felipe',
				'San Pedro',
				'Santa María',
				'Santo Domingo',
				'Valparaíso',
				'Villa Alemana',
				'Viña del Mar',
				'Zapallar'
			]
		},
		{
			name: 'Región Metropolitana de Santiago',
			code: 7,
			comunas: [
				'Alhué',
				'Buin',
				'Calera de Tango',
				'Cerrillos',
				'Cerro Navia',
				'Colina',
				'Conchalí',
				'Curacaví',
				'El Bosque',
				'El Monte',
				'Estación Central',
				'Huechuraba',
				'Independencia',
				'Isla de Maipo',
				'La Cisterna',
				'La Florida',
				'La Granja',
				'La Pintana',
				'La Reina',
				'Lampa',
				'Las Condes',
				'Lo Barnechea',
				'Lo Espejo',
				'Lo Prado',
				'Macul',
				'Maipú',
				'María Pinto',
				'Melipilla',
				'Ñuñoa',
				'Padre Hurtado',
				'Paine',
				'Pedro Aguirre Cerda',
				'Peñaflor',
				'Peñalolén',
				'Pirque',
				'Providencia',
				'Pudahuel',
				'Puente Alto',
				'Quilicura',
				'Quinta Normal',
				'Recoleta',
				'Renca',
				'San Bernardo',
				'San Joaquín',
				'San José de Maipo',
				'San Miguel',
				'San Pedro',
				'San Ramón',
				'Santiago',
				'Talagante',
				'Tiltil',
				'Vitacura'
			]
		},
		{
			name: "O'Higgins",
			code: 8,
			comunas: [
				'Chépica',
				'Chimbarongo',
				'Codegua',
				'Coinco',
				'Coltauco',
				'Doñihue',
				'Graneros',
				'La Estrella',
				'Las Cabras',
				'Litueche',
				'Lolol',
				'Machalí',
				'Malloa',
				'Marchigüe',
				'Mostazal',
				'Nancagua',
				'Navidad',
				'Olivar',
				'Palmilla',
				'Paredones',
				'Peralillo',
				'Peumo',
				'Pichidegua',
				'Pichilemu',
				'Placilla',
				'Pumanque',
				'Quinta de Tilcoco',
				'Rancagua',
				'Rengo',
				'Requínoa',
				'San Fernando',
				'San Vicente',
				'Santa Cruz'
			]
		},
		{
			name: 'Región del Maule',
			code: 9,
			comunas: [
				'Cauquenes',
				'Chanco',
				'Colbún',
				'Constitución',
				'Curepto',
				'Curicó',
				'Empedrado',
				'Hualañé',
				'Licantén',
				'Linares',
				'Longaví',
				'Maule',
				'Molina',
				'Parral',
				'Pelarco',
				'Pelluhue',
				'Pencahue',
				'Rauco',
				'Retiro',
				'Río Claro',
				'Romeral',
				'Sagrada Familia',
				'San Clemente',
				'San Javier',
				'San Rafael',
				'Talca',
				'Teno',
				'Vichuquén',
				'Villa Alegre',
				'Yerbas Buenas'
			]
		},
		{
			name: 'Región de Ñuble',
			code: 10,
			comunas: [
				'Bulnes',
				'Chillán',
				'Chillán Viejo',
				'Cobquecura',
				'Coelemu',
				'Coihueco',
				'El Carmen',
				'Ninhue',
				'Ñiquén',
				'Pemuco',
				'Pinto',
				'Portezuelo',
				'Quillón',
				'Quirihue',
				'Ránquil',
				'San Carlos',
				'San Fabián',
				'San Ignacio',
				'San Nicolás',
				'Treguaco',
				'Yungay'
			]
		},
		{
			name: 'Región del Biobío',
			code: 11,
			comunas: [
				'Alto Biobío',
				'Antuco',
				'Arauco',
				'Cabrero',
				'Cañete',
				'Chiguayante',
				'Concepción',
				'Contulmo',
				'Coronel',
				'Curanilahue',
				'Florida',
				'Hualpén',
				'Hualqui',
				'Laja',
				'Lebu',
				'Los Álamos',
				'Los Ángeles',
				'Lota',
				'Mulchén',
				'Nacimiento',
				'Negrete',
				'Penco',
				'Quilaco',
				'Quilleco',
				'San Pedro de la Paz',
				'San Rosendo',
				'Santa Bárbara',
				'Santa Juana',
				'Talcahuano',
				'Tirúa',
				'Tomé',
				'Tucapel',
				'Yumbel'
			]
		},
		{
			name: 'Región de La Araucanía',
			code: 12,
			comunas: [
				'Angol',
				'Carahue',
				'Cholchol',
				'Collipulli',
				'Cunco',
				'Curacautín',
				'Curarrehue',
				'Ercilla',
				'Freire',
				'Galvarino',
				'Gorbea',
				'Lautaro',
				'Loncoche',
				'Lonquimay',
				'Los Sauces',
				'Lumaco',
				'Melipeuco',
				'Nueva Imperial',
				'Padre Las Casas',
				'Perquenco',
				'Pitrufquén',
				'Pucón',
				'Purén',
				'Renaico',
				'Saavedra',
				'Teodoro Schmidt',
				'Temuco',
				'Toltén',
				'Traiguén',
				'Victoria',
				'Vilcún',
				'Villarrica'
			]
		},
		{
			name: 'Región de Los Ríos',
			code: 13,
			comunas: [
				'Corral',
				'Futrono',
				'Lago Ranco',
				'Lanco',
				'La Unión',
				'Los Lagos',
				'Máfil',
				'Mariquina',
				'Paillaco',
				'Panguipulli',
				'Río Bueno',
				'Valdivia'
			]
		},
		{
			name: 'Región de Los Lagos',
			code: 14,
			comunas: [
				'Ancud',
				'Calbuco',
				'Castro',
				'Chonchi',
				'Cochamó',
				'Curaco de Vélez',
				'Dalcahue',
				'Fresia',
				'Frutillar',
				'Llanquihue',
				'Los Muermos',
				'Maullín',
				'Osorno',
				'Puerto Montt',
				'Puerto Octay',
				'Puerto Varas',
				'Puqueldón',
				'Purranque',
				'Puyehue',
				'Queilén',
				'Quellón',
				'Quemchi',
				'Quinchao',
				'Río Negro',
				'San Juan de la Costa',
				'San Pablo'
			]
		},
		{
			name: 'Aysén',
			code: 15,
			comunas: ['Aysén', 'Chile Chico', 'Cisnes', 'Cochrane', 'Coyhaique', 'Guaitecas', 'Lago Verde', "O'Higgins", 'Río Ibáñez', 'Tortel']
		},
		{
			name: 'Magallanes',
			code: 16,
			comunas: [
				'Antártica',
				'Cabo de Hornos',
				'Laguna Blanca',
				'Natales',
				'Porvenir',
				'Primavera',
				'Punta Arenas',
				'Río Verde',
				'San Gregorio',
				'Timaukel',
				'Torres del Paine'
			]
		}
	]

	function selectElement(selector, node) {
		return (node || document).querySelector(selector)
	}

	const formSelectRegion = selectElement('#fields-select__region')
	const formSelectTown = selectElement('#fields-select__town')
	const container = document.querySelector('.main_container_select')

	function updateFormsCart() {
		const formsCart = Array.from(document.querySelectorAll('form[action="/cart"]'))

		formsCart.forEach((formCart) => {
			if (formCart) {
				formCart.addEventListener('submit', (e) => {
					formCart.setAttribute(
						'action',
						`/cart?step=contact_information&checkout[shipping_address][country]=CL&checkout[shipping_address][province]=${selectRegion}&checkout[shipping_address][city]=${selectTown}`
					)
				})
			}
		})
	}

	if (container) {
		regiones.forEach((region) => {
			const optionElement = `<option value="${region.name}">${region.name}</option>`
			formSelectRegion.insertAdjacentHTML('beforeend', optionElement)
		})

		formSelectRegion.insertAdjacentHTML('beforeend', "<option selected value='Selecciona tu Región'>Selecciona tu Región</option>")

		updateFormsCart()

		formSelectRegion.addEventListener('change', (e) => {
			const regiontSelect = regiones.find((region) => region.name === e.target.value)

			formSelectTown.innerHTML = ''

			selectRegion = regiontSelect.name
			selectTown = regiontSelect.comunas[0]

			regiontSelect.comunas.forEach((comuna) => {
				const optionElement = `<option value='${comuna}'>${comuna}</option>`
				formSelectTown.insertAdjacentHTML('beforeend', optionElement)
			})

			updateFormsCart()
		})

		formSelectTown.addEventListener('change', (e) => {
			selectTown = e.target.value
			updateFormsCart()
		})

		formSelectTown.insertAdjacentHTML('beforeend', "<option selected value='Selecciona tu comuna'>Selecciona tu comuna</option>")
	}
}

function renderSelectorComunaContainerGlobalWidget(div) {
	div.innerHTML = `
		<div class="main_container_select">
			<div class="selector_container">
				<h1 class="text-heading">Selecciona la región y comuna</h1>

				<div class="selector-comuna">
					<div class="selector-form-container">
						<label for="fields-select__region" class="selector_label">Región</label>
						<select id="fields-select__region" class="select_input" name="region"></select>
					</div>

					<div class="selector-form-container">
						<label for="fields-select__town" class="selector_label">Comuna</label>
						<select id="fields-select__town" class="select_input" name="town"></select>
					</div>
				</div>
			</div>
		</div>
		<div class="watermark">
			<div class="watermark_container">
				<span class="buhoo-icon"></span>
				<div class="redirect_text_container">
					<span>Powered By</span>
					<a href="https://apps.shopify.com/sector-de-comuna-cl-gratis?locale=es&\tsurface_intra_position=3&surface_type=partners&surface_version=redesign">Búho</a>
				</div>
			</div>
		</div>
	`
	initGlobalWidget()
}
// --- FIN VARIABLES Y FUNCIONES GLOBALES ---

// Inicialización al cargar el DOM
window.addEventListener('DOMContentLoaded', () => {
	const divContainer = document.getElementById('selector-comuna-container')
	if (divContainer) {
		renderSelectorComunaContainerGlobalWidget(divContainer)
	}
})

// --- INICIO OBSERVADOR DE MUTACIONES ---
const targetGlobalNode = document.body
const configGlobalWidget = { childList: true, subtree: true }
let lastFoundGlobalWidget = null

const callbackGlobalWidget = (mutationList, observer) => {
	for (const mutation of mutationList) {
		for (const node of mutation.addedNodes) {
			if (node.nodeType === 1) {
				if (node.id === 'selector-comuna-container') {
					if (lastFoundGlobalWidget !== node) {
						lastFoundGlobalWidget = node
						renderSelectorComunaContainerGlobalWidget(node)
						console.log('¡El div apareció o reapareció en el DOM!')
					}
				} else {
					const found = node.querySelector && node.querySelector('#selector-comuna-container')
					if (found && lastFoundGlobalWidget !== found) {
						lastFoundGlobalWidget = found
						renderSelectorComunaContainerGlobalWidget(found)
						console.log('¡El div apareció o reapareció en el DOM!')
					}
				}
			}
		}
	}
}

const observerGlobalWidget = new MutationObserver(callbackGlobalWidget)
observerGlobalWidget.observe(targetGlobalNode, configGlobalWidget)
// --- FIN OBSERVADOR DE MUTACIONES ---