/*
* https://frontendeval.com/questions/multi-step-form
*
* Create a single submittable form that spans multiple screens
*/
const content = ['Name', 'Email', '', 'Password'];
const placeholder = ['', '', 'mm/dd/yy', ''];
const PREV = 'PREV';
const NEXT = 'NEXT';
let map = {};

let back = document.getElementById('back');
let form = document.getElementById('form');
let label = document.getElementById('label');
let input = document.getElementById('input');
let button = document.getElementById('button');
let success = document.getElementById('success');
let survey = document.getElementById('survey');
survey.style.display = 'none';

let index = 0;

function handleClick(type) {
    map[content[index]] = input.value;

    if (type === PREV) {
        index -= 1;
        survey.style.display = 'none';
    }
    else if (type === NEXT) {
        if (button.textContent === 'Submit') {
            handleSubmit(map);
        } 
        else {
            if (index === 1) {
                if (survey.style.display === 'block') {
                    index += 1;
                    survey.style.visibility = 'hidden';
                }

                if (!input.value.includes('@')) alert('Enter correct email');
                else if (!input.value.includes('gmail')) index += 1;
                else if (survey.style.display !== 'block') survey.style.display = 'block';
            }
            else index += 1;
        }
    }

    (index === content.length - 1) ?  button.innerText = 'Submit' : button.innerHTML = 'Next';

    label.innerText = content[index];
    label.setAttribute('for', content[index]);
    input.value = '';
    input.setAttribute('placeholder', placeholder[index]);

    (index !== 0) ? back.style.visibility = 'visible' : back.style.visibility = 'hidden';
}

function handleSubmit(obj) {

    success.style.display = 'block';
    back.style.display = 'none';
    form.style.display = 'none';
    
    for (let [key, val] of Object.entries(obj)) {
        let br = document.createElement('BR');

        let keyspan = document.createElement('span');
        keyspan.innerText = key;

        let valspan = document.createElement('span');
        valspan.innerText = key !== '' ? ' : ' + val : val;

        success.appendChild(keyspan);
        success.appendChild(valspan);
        success.appendChild(br);
    }
}