'use strict';

//
// Wizard initialization
//

onDocumentReady(() => {
    // Set up product kind change handling
    const select = document.querySelector('#product-kind')

    // Wire up progress step interaction
    setupProgressStepInteraction(document.querySelectorAll('.progress-indicator .phase'));
    fixProgressNumbering();

    select.addEventListener('change', updateProductGroupSteps);
    select.addEventListener('input', updateProductGroupSteps);
    updateProductGroupSteps();

    // Set up help buttons in general wizard steps (the rest is handled by other init)
    document.querySelectorAll('.wizard button.help-button').forEach(btn => {
        const helpText = btn.closest('.question').querySelector('.help');
        btn.addEventListener('click', () => helpText.classList.toggle('active'));
    });

    // Initialize project management step
    const projectStep = document.querySelector('.wizard.project-management');

    // If there is an existing project
    if(projectStep.querySelector('.existing-project-notice')) {
        function activateProductTypeStep() {
            const nextStep = document.querySelector('#product-type-step');
            updateProgressIndicator(nextStep.id);
            // Scroll the next step into view
            nextStep.scrollIntoView({
                behavior: 'smooth'
            });
        }
        projectStep.querySelector('button[data-action="new-project"]').addEventListener('click', () => {
            projectStep.querySelector('.new-project-information').classList.remove('hidden');
            projectStep.querySelector('.existing-project-notice').classList.add('hidden');
            document.querySelectorAll('header .project-section').forEach(e => e.classList.add('hidden'));
            document.querySelector('#project-status').value = 'new';
        });
        projectStep.querySelector('button[data-action="use-current-project"]').addEventListener('click', () => {
            projectStep.querySelector('.new-project-information').classList.add('hidden');
            projectStep.querySelector('.existing-project-notice').classList.remove('hidden');
            document.querySelectorAll('header .project-section').forEach(e => e.classList.remove('hidden'));
            document.querySelector('#project-status').value = 'use-current';
        });
    }
});


function setupProgressStepInteraction(phases) {
    phases.forEach(p => {
        p.querySelectorAll('a').forEach(a => {
            a.addEventListener('click', e => {
                const gotoStep = document.querySelector(a.hash + '.step');
                if(gotoStep) {
                    gotoStep.scrollIntoView({
                        behavior: 'smooth'
                    });
                }
                e.preventDefault();
            });
        });
    });
}

function fixProgressNumbering() {
    document.querySelectorAll('.phase').forEach((p, i) => {
        p.querySelectorAll('.phase-number').forEach(n => n.textContent = i + 1);
    });
}


function updateProductGroupSteps() {
    const container = document.querySelector('#product-kind-steps');
    // determine new product kind, current product kind
    const productKind = document.querySelector('#product-kind').value;
    const currentProductGroup = container.dataset.currentGroup;
    // If the current product group does not match the new product group, we need to clone in a new UI
    if(currentProductGroup != productKind) {
        // Update container element with new product group data
        container.dataset.currentGroup = productKind;
        // Wipe container element
        while(container.firstChild) {
            container.firstChild.remove();
        }
        // Clone product group steps template and append all steps into the container
        const stepsTemplate = document.querySelector('#template-' + productKind + '-steps');
        container.append(stepsTemplate.content.cloneNode(true));
        // Run initializer for the product group steps
        productKindWizards[productKind](container);

        // Prepare product progress holder (clear out current content);
        const productProgressSteps = document.querySelector('#product-progress');
        productProgressSteps.textContent = '';
        // Clone in progress steps template
        const progressTemplate = document.querySelector('#template-progress-phases');
        productProgressSteps.append(progressTemplate.content.cloneNode(true));
        setupProgressStepInteraction(productProgressSteps.querySelectorAll('.phase'));
        fixProgressNumbering();
    }
}

function updateProgressIndicator(activeStepId) {
    const previous = [];
    let current = null;
    for(const segment of document.querySelectorAll('.progress-indicator .phase')) {
        if(segment.querySelector('.phase-subscript').hash == '#' + activeStepId) {
            current = segment;
            break;
        }
        previous.push(segment);
    }
    if(!current.classList.contains('done')) {
        for(const p of previous) {
            p.classList.remove('active');
            p.classList.add('done');
        }
        current.classList.add('active');
        current.classList.remove('done');
    }
}