/**
 * Navbar Component - JavaScript Controller
 *
 * @package Apus_Theme
 * @since 2.0.0
 */

window.NavbarComponent = {
	/**
	 * Inicialización del componente
	 */
	init: function() {
		console.log('Navbar component initialized');

		// Actualizar valores hexadecimales de color pickers en tiempo real
		this.initColorPickers();
	},

	/**
	 * Inicializar event listeners para color pickers
	 */
	initColorPickers: function() {
		const colorPickers = [
			{ input: 'navbarBgColor', display: 'navbarBgColorValue' },
			{ input: 'navbarTextColor', display: 'navbarTextColorValue' },
			{ input: 'navbarLinkHoverColor', display: 'navbarLinkHoverColorValue' },
			{ input: 'navbarLinkHoverBgColor', display: 'navbarLinkHoverBgColorValue' },
			{ input: 'navbarDropdownBgColor', display: 'navbarDropdownBgColorValue' },
			{ input: 'navbarDropdownItemColor', display: 'navbarDropdownItemColorValue' },
			{ input: 'navbarDropdownItemHoverColor', display: 'navbarDropdownItemHoverColorValue' }
		];

		colorPickers.forEach(function(picker) {
			const inputEl = document.getElementById(picker.input);
			const displayEl = document.getElementById(picker.display);

			if (inputEl && displayEl) {
				// Actualizar cuando cambia el color
				inputEl.addEventListener('input', function() {
					displayEl.textContent = inputEl.value.toUpperCase();
				});

				// Inicializar valor al cargar
				displayEl.textContent = inputEl.value.toUpperCase();
			}
		});
	},

	/**
	 * Recolectar datos del formulario
	 * @returns {Object} Configuración del navbar
	 */
	collect: function() {
		return {
			// Grupo 1: Activación y Visibilidad
			enabled: document.getElementById('navbarEnabled').checked,
			show_on_mobile: document.getElementById('navbarShowOnMobile').checked,
			show_on_desktop: document.getElementById('navbarShowOnDesktop').checked,
			position: document.getElementById('navbarPosition').value,
			responsive_breakpoint: document.getElementById('navbarBreakpoint').value,

			// Grupo 4: Efectos (booleans)
			enable_box_shadow: document.getElementById('navbarEnableBoxShadow').checked,
			enable_underline_effect: document.getElementById('navbarEnableUnderlineEffect').checked,
			enable_hover_background: document.getElementById('navbarEnableHoverBackground').checked,

			// Grupo 6: Let's Talk Button
			lets_talk_button: {
				enabled: document.getElementById('navbarLetsTalkEnabled').checked,
				text: document.getElementById('navbarLetsTalkText').value.trim(),
				icon_class: document.getElementById('navbarLetsTalkIconClass').value.trim(),
				show_icon: document.getElementById('navbarLetsTalkShowIcon').checked,
				position: document.getElementById('navbarLetsTalkPosition').value
			},

			// Grupo 7: Dropdown
			dropdown: {
				enable_hover_desktop: document.getElementById('navbarDropdownEnableHoverDesktop').checked,
				max_height: parseInt(document.getElementById('navbarDropdownMaxHeight').value) || 70,
				border_radius: parseInt(document.getElementById('navbarDropdownBorderRadius').value) || 8,
				item_padding_vertical: parseFloat(document.getElementById('navbarDropdownItemPaddingVertical').value) || 0.5,
				item_padding_horizontal: parseFloat(document.getElementById('navbarDropdownItemPaddingHorizontal').value) || 1.25
			},

			// Grupos 2, 3, 5: Custom Styles
			custom_styles: {
				// Grupo 2: Colores
				background_color: document.getElementById('navbarBgColor').value || '#1e3a5f',
				text_color: document.getElementById('navbarTextColor').value || '#ffffff',
				link_hover_color: document.getElementById('navbarLinkHoverColor').value || '#FF8600',
				link_hover_bg_color: document.getElementById('navbarLinkHoverBgColor').value || '#FF8600',
				dropdown_bg_color: document.getElementById('navbarDropdownBgColor').value || '#ffffff',
				dropdown_item_color: document.getElementById('navbarDropdownItemColor').value || '#4A5568',
				dropdown_item_hover_color: document.getElementById('navbarDropdownItemHoverColor').value || '#FF8600',

				// Grupo 3: Tipografía
				font_size: document.getElementById('navbarFontSize').value,
				font_weight: document.getElementById('navbarFontWeight').value,

				// Grupo 4: Efectos
				box_shadow_intensity: document.getElementById('navbarBoxShadowIntensity').value,
				border_radius: parseInt(document.getElementById('navbarBorderRadius').value) || 4,

				// Grupo 5: Spacing
				padding_vertical: parseFloat(document.getElementById('navbarPaddingVertical').value) || 0.75,
				link_padding_vertical: parseFloat(document.getElementById('navbarLinkPaddingVertical').value) || 0.5,
				link_padding_horizontal: parseFloat(document.getElementById('navbarLinkPaddingHorizontal').value) || 0.65,

				// Grupo 8: Avanzado
				z_index: parseInt(document.getElementById('navbarZIndex').value) || 1030,
				transition_speed: document.getElementById('navbarTransitionSpeed').value || 'normal'
			}
		};
	},

	/**
	 * Renderizar configuración en el formulario
	 * @param {Object} config - Configuración del navbar
	 */
	render: function(config) {
		if (!config) {
			console.warn('No navbar config provided');
			return;
		}

		// Grupo 1: Activación y Visibilidad
		document.getElementById('navbarEnabled').checked = config.enabled !== undefined ? config.enabled : true;
		document.getElementById('navbarShowOnMobile').checked = config.show_on_mobile !== undefined ? config.show_on_mobile : true;
		document.getElementById('navbarShowOnDesktop').checked = config.show_on_desktop !== undefined ? config.show_on_desktop : true;
		document.getElementById('navbarPosition').value = config.position || 'sticky';
		document.getElementById('navbarBreakpoint').value = config.responsive_breakpoint || 'lg';

		// Grupo 2: Colores Personalizados
		if (config.custom_styles) {
			document.getElementById('navbarBgColor').value = config.custom_styles.background_color || '#1e3a5f';
			document.getElementById('navbarTextColor').value = config.custom_styles.text_color || '#ffffff';
			document.getElementById('navbarLinkHoverColor').value = config.custom_styles.link_hover_color || '#FF8600';
			document.getElementById('navbarLinkHoverBgColor').value = config.custom_styles.link_hover_bg_color || '#FF8600';
			document.getElementById('navbarDropdownBgColor').value = config.custom_styles.dropdown_bg_color || '#ffffff';
			document.getElementById('navbarDropdownItemColor').value = config.custom_styles.dropdown_item_color || '#4A5568';
			document.getElementById('navbarDropdownItemHoverColor').value = config.custom_styles.dropdown_item_hover_color || '#FF8600';
		}

		// Grupo 3: Tipografía
		if (config.custom_styles) {
			document.getElementById('navbarFontSize').value = config.custom_styles.font_size || 'normal';
			document.getElementById('navbarFontWeight').value = config.custom_styles.font_weight || '500';
		}

		// Grupo 4: Efectos Visuales
		document.getElementById('navbarEnableBoxShadow').checked = config.enable_box_shadow !== undefined ? config.enable_box_shadow : true;
		document.getElementById('navbarEnableUnderlineEffect').checked = config.enable_underline_effect !== undefined ? config.enable_underline_effect : true;
		document.getElementById('navbarEnableHoverBackground').checked = config.enable_hover_background !== undefined ? config.enable_hover_background : true;

		if (config.custom_styles) {
			document.getElementById('navbarBoxShadowIntensity').value = config.custom_styles.box_shadow_intensity || 'normal';
			document.getElementById('navbarBorderRadius').value = config.custom_styles.border_radius !== undefined ? config.custom_styles.border_radius : 4;
		}

		// Grupo 5: Spacing
		if (config.custom_styles) {
			document.getElementById('navbarPaddingVertical').value = config.custom_styles.padding_vertical !== undefined ? config.custom_styles.padding_vertical : 0.75;
			document.getElementById('navbarLinkPaddingVertical').value = config.custom_styles.link_padding_vertical !== undefined ? config.custom_styles.link_padding_vertical : 0.5;
			document.getElementById('navbarLinkPaddingHorizontal').value = config.custom_styles.link_padding_horizontal !== undefined ? config.custom_styles.link_padding_horizontal : 0.65;
		}

		// Grupo 8: Avanzado
		if (config.custom_styles) {
			document.getElementById('navbarZIndex').value = config.custom_styles.z_index !== undefined ? config.custom_styles.z_index : 1030;
			document.getElementById('navbarTransitionSpeed').value = config.custom_styles.transition_speed || 'normal';
		}

		// Grupo 6: Let's Talk Button
		if (config.lets_talk_button) {
			document.getElementById('navbarLetsTalkEnabled').checked = config.lets_talk_button.enabled !== undefined ? config.lets_talk_button.enabled : true;
			document.getElementById('navbarLetsTalkText').value = config.lets_talk_button.text || "Let's Talk";
			document.getElementById('navbarLetsTalkIconClass').value = config.lets_talk_button.icon_class || 'bi bi-lightning-charge-fill';
			document.getElementById('navbarLetsTalkShowIcon').checked = config.lets_talk_button.show_icon !== undefined ? config.lets_talk_button.show_icon : true;
			document.getElementById('navbarLetsTalkPosition').value = config.lets_talk_button.position || 'right';
		}

		// Grupo 7: Dropdown
		if (config.dropdown) {
			document.getElementById('navbarDropdownEnableHoverDesktop').checked = config.dropdown.enable_hover_desktop !== undefined ? config.dropdown.enable_hover_desktop : true;
			document.getElementById('navbarDropdownMaxHeight').value = config.dropdown.max_height !== undefined ? config.dropdown.max_height : 70;
			document.getElementById('navbarDropdownBorderRadius').value = config.dropdown.border_radius !== undefined ? config.dropdown.border_radius : 8;
			document.getElementById('navbarDropdownItemPaddingVertical').value = config.dropdown.item_padding_vertical !== undefined ? config.dropdown.item_padding_vertical : 0.5;
			document.getElementById('navbarDropdownItemPaddingHorizontal').value = config.dropdown.item_padding_horizontal !== undefined ? config.dropdown.item_padding_horizontal : 1.25;
		}
	}
};