import LivewireNotification from '../_class/LivewireNotification';
import FormCustomListener from '../_class/FormCustomListener';

new LivewireNotification();

// Inicializar formularios de ajustes de sitio web
window.WebsiteSettingsForm = new FormCustomListener({
    formSelector: '#website-settings-card',
    buttonSelectors: ['.btn-save', '.btn-cancel'],
    callbacks: [
        () => {} // Deshabilitar callback para #save_website_button
    ],
    dispatchOnSubmit: 'saveWebsiteSettings',
    validationConfig: {
        fields: {
            website_title: {
                validators: {
                    stringLength: {
                        min: 2,
                        max: 50,
                        message: 'El título debe tener entre 2 y 50 caracteres.'
                    }
                }
            },
            website_description: {
                validators: {
                    stringLength: {
                        max: 160,
                        message: 'La descripción no puede exceder los 160 caracteres.'
                    }
                }
            }
        },
        plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap5: new FormValidation.plugins.Bootstrap5({
                eleValidClass: '',
                rowSelector: '.fv-row'
            }),
            submitButton: new FormValidation.plugins.SubmitButton(),
            autoFocus: new FormValidation.plugins.AutoFocus()
        }
    }
});

// Inicializar formularios de ajustes de favicon
new FormCustomListener({
    formSelector: '#website-favicon-settings-card',
    buttonSelectors: ['.btn']
});

// Inicializar formularios de ajustes de logo de imagen
new FormCustomListener({
    formSelector: '#website-image-logo-settings-card',
    buttonSelectors: ['.btn']
});

// Inicializar formularios de ajustes de social media
window.SocialSettingsForm = new FormCustomListener({
    formSelector: '#website-social-settings-card',
    buttonSelectors: ['.btn-save', '.btn-cancel'],
    callbacks: [() => {}],
    dispatchOnSubmit: 'saveSocialSettings',
    validationConfig: {
        fields: {
            social_whatsapp: {
                validators: {
                    callback: {
                        message: 'Por favor, introduce un número de teléfono válido para México.',
                        callback: function (input) {
                            // Si el campo está vacío, no hacemos validación
                            if (input.value.trim() === '') {
                                return true; // Permitir vacío
                            }

                            // Si no está vacío, validamos el formato del número
                            const cleanValue = input.value.replace(/\D/g, '');
                            const regex = /^[1-9]\d{9}$/; // Exactamente 10 dígitos

                            return regex.test(cleanValue); // Valida solo si hay un número
                        }
                    }
                }
            },
            social_whatsapp_message: {
                validators: {
                    stringLength: {
                        max: 500,
                        message: 'El mensaje no puede exceder los 500 caracteres.'
                    },
                    callback: {
                        message: 'El mensaje es obligatorio.',
                        callback: function (input) {
                            // Obtener el valor de 'social_whatsapp'
                            const whatsappNumber = document.querySelector('#social_whatsapp').value.trim();

                            // Si 'social_whatsapp' tiene un valor, entonces el mensaje es obligatorio
                            if (whatsappNumber !== '') {
                                return input.value.trim() !== ''; // El mensaje no puede estar vacío
                            }

                            return true; // Si 'social_whatsapp' está vacío, no validamos 'social_whatsapp_message'
                        }
                    }
                }
            },
            social_facebook: {
                validators: {
                    uri: {
                        message: 'Por favor, introduce una URL válida.'
                    }
                }
            },
            social_instagram: {
                validators: {
                    uri: {
                        message: 'Por favor, introduce una URL válida.'
                    }
                }
            },
            social_linkedin: {
                validators: {
                    uri: {
                        message: 'Por favor, introduce una URL válida.'
                    }
                }
            },
            social_tiktok: {
                validators: {
                    uri: {
                        message: 'Por favor, introduce una URL válida.'
                    }
                }
            },
            social_x_twitter: {
                validators: {
                    uri: {
                        message: 'Por favor, introduce una URL válida.'
                    }
                }
            },
            social_google: {
                validators: {
                    uri: {
                        message: 'Por favor, introduce una URL válida.'
                    }
                }
            },
            social_pinterest: {
                validators: {
                    uri: {
                        message: 'Por favor, introduce una URL válida.'
                    }
                }
            },
            social_youtube: {
                validators: {
                    uri: {
                        message: 'Por favor, introduce una URL válida.'
                    }
                }
            },
            social_vimeo: {
                validators: {
                    uri: {
                        message: 'Por favor, introduce una URL válida.'
                    }
                }
            }
        },
        plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap5: new FormValidation.plugins.Bootstrap5({
                eleValidClass: '',
                rowSelector: '.fv-row'
            }),
            submitButton: new FormValidation.plugins.SubmitButton(),
            autoFocus: new FormValidation.plugins.AutoFocus()
        }
    }
});

// Inicializar formularios de ajustes de Formularios de contacto
window.ContactFormSettingsForm = new FormCustomListener({
    formSelector: '#website-contact-form-settings-card',
    buttonSelectors: ['.btn-save', '.btn-cancel'],
    callbacks: [() => {}],
    dispatchOnSubmit: 'saveContactFormSettings',
    validationConfig: {
        fields: {
            // Validación para correo electrónico de recepción
            contact_form_email: {
                validators: {
                    emailAddress: {
                        message: 'Por favor, introduce un correo electrónico válido.'
                    },
                    notEmpty: {
                        message: 'El correo electrónico es obligatorio.'
                    }
                }
            },
            // Validación para correo electrónico con copia
            contact_form_email_cc: {
                validators: {
                    emailAddress: {
                        message: 'Por favor, introduce un correo electrónico válido.'
                    },
                    // Validación personalizada para comparar ambos correos electrónicos
                    callback: {
                        message: 'Los correos electrónicos deben ser diferentes.',
                        callback: function (input) {
                            const email = document.querySelector('#contact_form_email').value.trim();
                            const emailCC = input.value.trim();

                            // Si ambos correos son iguales, la validación falla
                            if (email === emailCC) {
                                return false; // Los correos son iguales, por lo que la validación falla
                            }

                            return true; // Si son diferentes, la validación pasa
                        }
                    }
                }
            },
            // Validación para el asunto del formulario de contacto
            contact_form_subject: {
                validators: {
                    stringLength: {
                        max: 60,
                        message: 'El título del correo no puede exceder los 60 caracteres.'
                    },
                    notEmpty: {
                        message: 'El título del correo es obligatorio.'
                    }
                }
            }
        },
        plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap5: new FormValidation.plugins.Bootstrap5({
                eleValidClass: '',
                rowSelector: '.fv-row'
            }),
            submitButton: new FormValidation.plugins.SubmitButton(),
            autoFocus: new FormValidation.plugins.AutoFocus()
        }
    }
});

// Inicializar formularios de ajustes de información de contacto
window.ContactInfoSettingsForm = new FormCustomListener({
    formSelector: '#website-contact-info-settings-card',
    buttonSelectors: ['.btn-save', '.btn-cancel'],
    callbacks: [() => {}],
    dispatchOnSubmit: 'saveContactInfoSettings',
    validationConfig: {
        fields: {
            // Validación para número telefónico
            contact_phone_number: {
                validators: {
                    callback: {
                        message: 'Por favor, introduce un número de teléfono válido para México.',
                        callback: function (input) {
                            // Si el campo está vacío, no hacemos validación
                            if (input.value.trim() === '') {
                                return true; // Permitir vacío
                            }

                            // Si no está vacío, validamos el formato del número
                            const cleanValue = input.value.replace(/\D/g, '');
                            const regex = /^[1-9]\d{9}$/; // Exactamente 10 dígitos

                            return regex.test(cleanValue); // Valida solo si hay un número
                        }
                    }
                }
            },
            // Validación para extensión telefónica (opcional, pero solo si contact_phone_number tiene valor)
            contact_phone_number_ext: {
                validators: {
                    stringLength: {
                        max: 10,
                        message: 'La extensión no debe exceder los 10 caracteres.'
                    },
                    callback: {
                        message: 'La extensión requiere de ingresar un número telefónico.',
                        callback: function (input) {
                            // Obtener el valor de 'contact_phone_number'
                            const phoneNumber = document.querySelector('#contact_phone_number')?.value.trim();

                            // Si el número telefónico tiene valor, entonces la extensión es obligatoria
                            if (phoneNumber !== '') {
                                // Si la extensión está vacía, la validación falla
                                return true; // Permitir vacío
                            }

                            // Si no se ha ingresado un número telefónico, la extensión no debe tener valor
                            return input.value.trim() === '';
                        }
                    }
                }
            },
            // Validación para correo electrónico de contacto (opcional)
            contact_email: {
                validators: {
                    emailAddress: {
                        message: 'Por favor, introduce un correo electrónico válido.'
                    }
                }
            }
        },
        plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap5: new FormValidation.plugins.Bootstrap5({
                eleValidClass: '',
                rowSelector: '.fv-row'
            }),
            submitButton: new FormValidation.plugins.SubmitButton(),
            autoFocus: new FormValidation.plugins.AutoFocus()
        }
    }
});

// Inicializar formularios de ajustes de ubicación
window.LocationSettingsForm = new FormCustomListener({
    formSelector: '#website-location-settings-card',
    buttonSelectors: ['.btn-save', '.btn-cancel'],
    callbacks: [() => {}],
    dispatchOnSubmit: 'saveLocationSettings',
    validationConfig: {
        fields: {
            // Validación para dirección (No obligatorio, máximo 160 caracteres)
            contact_direccion: {
                validators: {
                    stringLength: {
                        max: 160,
                        message: 'La dirección no puede exceder los 160 caracteres.'
                    }
                }
            },
            // Validación para horario (No obligatorio, máximo 160 caracteres)
            contact_horario: {
                validators: {
                    stringLength: {
                        max: 160,
                        message: 'El horario no puede exceder los 160 caracteres.'
                    }
                }
            },
            // Validación para latitud (No obligatorio, pero debe ser un número si se ingresa)
            contact_location_lat: {
                validators: {
                    numeric: {
                        message: 'La latitud debe ser un número.'
                    },
                    callback: {
                        message: 'La latitud es obligatoria si se ingresa longitud.',
                        callback: function (input) {
                            // Obtener el valor de longitud
                            const longitude = document.querySelector('#contact_location_lng')?.value.trim();

                            // Si longitud tiene un valor, entonces latitud es obligatorio
                            if (longitude !== '') {
                                return input.value.trim() !== ''; // La latitud no puede estar vacía
                            }

                            return true; // Si longitud está vacío, no se valida latitud
                        }
                    }
                }
            },
            // Validación para longitud (No obligatorio, pero debe ser un número si se ingresa)
            contact_location_lng: {
                validators: {
                    numeric: {
                        message: 'La longitud debe ser un número.'
                    },
                    callback: {
                        message: 'La longitud es obligatoria si se ingresa latitud.',
                        callback: function (input) {
                            // Obtener el valor de latitud
                            const latitude = document.querySelector('#contact_location_lat')?.value.trim();

                            // Si latitud tiene un valor, entonces longitud es obligatorio
                            if (latitude !== '') {
                                return input.value.trim() !== ''; // La longitud no puede estar vacía
                            }

                            return true; // Si latitud está vacío, no se valida longitud
                        }
                    }
                }
            }
        },
        plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap5: new FormValidation.plugins.Bootstrap5({
                eleValidClass: '',
                rowSelector: '.fv-row'
            }),
            submitButton: new FormValidation.plugins.SubmitButton(),
            autoFocus: new FormValidation.plugins.AutoFocus()
        }
    }
});

// Inicializar formularios de ajustes de chat
window.ChatSettingsForm = new FormCustomListener({
    formSelector: '#website-chat-settings-card',
    buttonSelectors: ['.btn-save', '.btn-cancel'],
    callbacks: [() => {}],
    dispatchOnSubmit: 'saveChatSettings',
    validationConfig: {
        fields: {
            chat_whatsapp_number: {
                validators: {
                    callback: {
                        message: 'Por favor, introduce un número de teléfono válido para México.',
                        callback: function (input) {
                            // Obtener el proveedor directamente dentro de la validación
                            const provider = document.querySelector('#chat_provider')?.value;

                            // Validar solo si el proveedor es WhatsApp
                            if (provider !== 'whatsapp') return true;

                            const cleanValue = input.value.replace(/\D/g, '');
                            const regex = /^[1-9]\d{9}$/; // Exactamente 10 dígitos

                            return regex.test(cleanValue);
                        }
                    },
                    notEmpty: {
                        message: 'El número de teléfono es obligatorio.',
                        enabled: () => {
                            // Obtener el proveedor directamente dentro de la validación
                            const provider = document.querySelector('#chat_provider')?.value;

                            return provider === 'whatsapp'; // Habilita solo si es WhatsApp
                        }
                    }
                }
            },
            chat_whatsapp_message: {
                validators: {
                    stringLength: {
                        max: 500,
                        message: 'El mensaje no puede exceder los 500 caracteres.'
                    },
                    notEmpty: {
                        message: 'El mensaje es obligatorio.',
                        enabled: () => {
                            // Obtener el proveedor directamente dentro de la validación
                            const provider = document.querySelector('#chat_provider')?.value;

                            return provider === 'whatsapp'; // Habilita solo si es WhatsApp
                        }
                    }
                }
            }
        },
        plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap5: new FormValidation.plugins.Bootstrap5({
                eleValidClass: '',
                rowSelector: '.fv-row'
            }),
            submitButton: new FormValidation.plugins.SubmitButton(),
            autoFocus: new FormValidation.plugins.AutoFocus()
        }
    }
});

// Inicializar formularios de ajustes de análisis de datos
window.AnalyticsSettingsForm = new FormCustomListener({
    formSelector: '#website-analytics-settings-card',
    buttonSelectors: ['.btn-save', '.btn-cancel'],
    callbacks: [() => {}],
    dispatchOnSubmit: 'saveAnalyticsSettings',
    validationConfig: {
        fields: {
            google_analytics_id: {
                validators: {
                    callback: {
                        message: 'ID de medición de Google Analytics no tienen un formato válido.',
                        callback: function (input) {
                            if (document.getElementById('google_analytics_enabled').checked) {
                                return input.value.trim() !== '';
                            }
                            return true;
                        }
                    }
                }
            }
        },
        plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap5: new FormValidation.plugins.Bootstrap5({
                eleValidClass: '',
                rowSelector: '.fv-row'
            }),
            submitButton: new FormValidation.plugins.SubmitButton(),
            autoFocus: new FormValidation.plugins.AutoFocus()
        }
    }
});

// Inicializar formularios de ajustes de plantilla de sitio web
window.TemplateSettingsForm = new FormCustomListener({
    formSelector: '#website-template-settings-card',
    buttonSelectors: ['.btn-save', '.btn-cancel'],
    callbacks: [() => {}],
    dispatchOnSubmit: 'saveTemplateSettings',
    validationConfig: {
        fields: {
            website_tpl_footer_text: {
                validators: {
                    stringLength: {
                        max: 50,
                        message: 'El mensaje no puede exceder los 50 caracteres.'
                    }
                }
            }
        },
        plugins: {
            trigger: new FormValidation.plugins.Trigger(),
            bootstrap5: new FormValidation.plugins.Bootstrap5({
                eleValidClass: '',
                rowSelector: '.fv-row'
            }),
            submitButton: new FormValidation.plugins.SubmitButton(),
            autoFocus: new FormValidation.plugins.AutoFocus()
        }
    }
});

// Recargar validación de formularios al morphear componentes
Livewire.hook('morphed', ({ component }) => {
    switch (component.name) {
        case 'website-settings':
            if (window.WebsiteSettingsForm) {
                window.WebsiteSettingsForm.reloadValidation();
            }
            break;

        case 'website-social-settings':
            if (window.SocialSettingsForm) {
                window.SocialSettingsForm.reloadValidation();
            }
            break;

        case 'website-contact-info-settings':
            if (window.ContactInfoSettingsForm) {
                window.ContactInfoSettingsForm.reloadValidation();
            }
            break;

        case 'website-contact-form-settings':
            if (window.ContactFormSettingsForm) {
                window.ContactFormSettingsForm.reloadValidation();
            }
            break;

        case 'website-location-settings':
            if (window.LocationSettingsForm) {
                window.LocationSettingsForm.reloadValidation();
            }
            break;

        case 'website-chat-settings':
            if (window.ChatSettingsForm) {
                window.ChatSettingsForm.reloadValidation();
            }
            break;

        case 'website-analytics-settings':
            if (window.AnalyticsSettingsForm) {
                window.AnalyticsSettingsForm.reloadValidation();
            }
            break;

        case 'website-template-settings':
            if (window.TemplateSettingsForm) {
                window.TemplateSettingsForm.reloadValidation();
            }
            break;

        default:
            break;
    }
});