import { showNotification } from './99_functions.js';


// Script para el funcionamiento del collapse - VERSIÓN MEJORADA
document.addEventListener('DOMContentLoaded', function () {
    const collapseHeader = document.getElementById('form-collapse-header');
    const collapseContent = document.getElementById('form-collapse-content');
    const collapseIcon = document.getElementById('collapse-icon');

    // Función mejorada para detectar dispositivo
    function isMobileOrTablet() {
        return window.innerWidth <= 1024; // Tablets y móviles
    }

    // Función para detectar tablet grande
    function isLargeTablet() {
        return window.innerWidth >= 769 && window.innerWidth <= 1024;
    }

    // Función para detectar móvil o tablet pequeña
    function isSmallDevice() {
        return window.innerWidth <= 768;
    }

    // Función para aplicar estado inicial
    function applyInitialState() {
        if (isMobileOrTablet()) {
            collapseContent.classList.add('collapsed');
            collapseIcon.classList.remove('rotated');

            // Si es tablet grande, mostrar el header azul
            if (isLargeTablet()) {
                collapseHeader.style.background = 'linear-gradient(135deg, #1976d2, #2196f3)';
                collapseHeader.style.color = 'white';
            }
        } else {
            collapseContent.classList.remove('collapsed');
            collapseIcon.classList.add('rotated');
        }
    }

    // Aplicar estado inicial
    applyInitialState();

    // Alternar collapse al hacer clic en el header
    collapseHeader.addEventListener('click', function () {
        // Solo funciona en dispositivos móviles/tablets
        if (!isMobileOrTablet()) return;

        collapseContent.classList.toggle('collapsed');
        collapseIcon.classList.toggle('rotated');

        // Animar el icono
        collapseIcon.style.transition = 'transform 0.3s ease';

        // Mostrar/ocultar notificación
        if (collapseContent.classList.contains('collapsed')) {
            showNotification('Formulario colapsado. Toque para expandir.', 'info', 2000);
        } else {
            showNotification('Formulario expandido', 'info', 2000);
        }
    });

    // Ajustar al cambiar el tamaño de la ventana
    window.addEventListener('resize', function () {
        applyInitialState();
    });

    // Colapsar automáticamente al agregar un marcador (solo en móviles/tablets)
    const addPinButton = document.getElementById('add-pin');
    if (addPinButton) {
        addPinButton.addEventListener('click', function () {
            if (isMobileOrTablet() && !collapseContent.classList.contains('collapsed')) {
                setTimeout(() => {
                    collapseContent.classList.add('collapsed');
                    collapseIcon.classList.remove('rotated');
                }, 500);
            }
        });
    }

    // Colapsar al subir archivo CSV (solo en móviles/tablets)
    const csvFileInput = document.getElementById('csv-file');
    if (csvFileInput) {
        csvFileInput.addEventListener('change', function () {
            if (isMobileOrTablet() && !collapseContent.classList.contains('collapsed') && this.files.length > 0) {
                setTimeout(() => {
                    collapseContent.classList.add('collapsed');
                    collapseIcon.classList.remove('rotated');
                }, 1000);
            }
        });
    }


});