// internal
import BasePage from "../base.js";
// vendor
import { Altcha } from "../../vendor/altcha.js";

export default class PageContact extends BasePage {
    static hash = hashPageContact;

    constructor(router) {
        super(router);
    }

    initialize() {
        this.sharedInitialize();
        // this.hookupALTCHAByLocalServer();
        this.hookupButtonSubmitFormContactUs();
    }

    /*
    hookupALTCHAByAPI() {
        const form = document.querySelector(idContactForm);
        const altchaWidget = form.querySelector('altcha-widget');
        
        // Listen for verification events from the ALTCHA widget
        if (altchaWidget) {
            altchaWidget.addEventListener('serververification', function(event) {
                // Create or update the hidden input for ALTCHA
                let altchaInput = form.querySelector('input[name="altcha"]');
                if (!altchaInput) {
                    altchaInput = document.createElement('input');
                    altchaInput.type = 'hidden';
                    altchaInput.name = 'altcha';
                    form.appendChild(altchaInput);
                }
                
                // Set the verification payload
                altchaInput.value = event.detail.payload;
            });
        }
    }
    */
    hookupALTCHAByLocalServer() {
        window.ALTCHA = { init: (config) => {
            document.querySelectorAll(config.selector).forEach(el => {
                new Altcha({
                    target: el,
                    props: {
                        challengeurl: config.challenge.url,
                        auto: 'onload'
                    }
                }).$on('verified', (e) => {
                    config.challenge.onSuccess(e.detail.payload, el);
                });
            });
        }};
    }

    hookupButtonSubmitFormContactUs() {
        const button = document.querySelector('form input[type="submit"]');
        button.classList.add(flagButton);
        button.classList.add(flagButtonPrimary);
    }
}