const imageDir = '../html/image/';

const taskData = [
    {
        'image': 'sfp.png',
        'name': 'SFP',
        'speed': 4.25
    },
    {
        'image': 'sfp+.png',
        'name': 'SFP+',
        'speed': 11.1
    },
    {
        'image': 'sfp28.png',
        'name': 'SFP28',
        'speed': 28
    },
    {
        'image': 'xfp.png',
        'name': 'XFP',
        'speed': 10
    },
    {
        'image': 'x2.png',
        'name': 'X2',
        'speed': 10
    },
    {
        'image': 'xenpak.png',
        'name': 'XENPAK',
        'speed': 10
    },
    {
        'image': 'qsfp+.png',
        'name': 'QSFP+',
        'speed': 40
    },
    {
        'image': 'qsfp28.png',
        'name': 'qsfp28',
        'speed': 112
    },
    {
        'image': 'cfp.png',
        'name': 'CFP',
        'speed': 112
    },
    {
        'image': 'cfp.png',
        'name': 'CFP2',
        'speed': 112
    },
    {
        'image': 'cfp.png',
        'name': 'CFP4',
        'speed': 112
    }
];


const taskRoot = document.getElementById('zadanie2');
// const img = document.createElement('img');
// img.src = `${imageDir}${taskData[0].image}`;
// taskRoot.insertAdjacentElement('beforeend', img);

const start = Math.trunc((Math.random() * taskData.length) % taskData.length);
const questionsTotal = 6;

for (let i = 0; i < questionsTotal; i++) {

    const taskDiv = document.createElement('div');
    taskDiv.className = 'zadanie__item';

    const img = document.createElement('img');
    img.src = `${imageDir}${taskData[(start + i) % taskData.length].image}`;

    const input = document.createElement('input');
    input.type = 'text';
    input.placeholder = '11.1';

    const span = document.createElement('span');
    span.innerText = taskData[(start + i) % taskData.length].name

    taskDiv.appendChild(img);
    taskDiv.appendChild(span);
    taskDiv.appendChild(input);

    taskRoot.insertAdjacentElement('beforeend', taskDiv);
}

const submitBtn = document.createElement('button');
submitBtn.className = 'zadanie__button';
submitBtn.innerText = 'Проверить';
taskRoot.insertAdjacentElement('beforeend', submitBtn);

const nextBtn = document.createElement('a');
nextBtn.className = 'zadanie__button menubox_header_white';
nextBtn.href = 'zadanie3.html';
nextBtn.target = 'content';
nextBtn.innerText = 'Следующее задание';
// taskRoot.insertAdjacentElement('beforeend', nextBtn);

const theoryBtn = document.createElement('a');
theoryBtn.className = 'zadanie__button menubox_header_white';
theoryBtn.href = 'razdel1.html';
theoryBtn.target = 'content';
theoryBtn.innerText = 'Повторить теорию';
// taskRoot.insertAdjacentElement('beforeend', theoryBtn);

const errorMessages = Array(questionsTotal);
taskRoot.addEventListener('submit', e => {
    e.preventDefault();

    let n = taskRoot.elements.length,
        correctTotal = 0;

    for (let i = 0; i < n; i++) {

        const taskInput = taskRoot.elements[i];

        if (!(taskInput instanceof HTMLInputElement)) continue;

        if (Number(taskInput.value) === taskData[(i + start) % taskData.length].speed) {

            correctTotal++;

            if (errorMessages[i]) {
                errorMessages[i].remove();
            }
        }
        else {

            if (!errorMessages[i]) {

                const errorMessage = document.createElement('span');
                errorMessage.className = 'zadanie__error';
                errorMessage.innerText = 'Неверно!';

                errorMessages[i] = errorMessage;

                taskInput.insertAdjacentElement('afterend', errorMessage);
            }
        }
    }

    submitBtn.style.display = 'none';

    if (correctTotal / questionsTotal < 0.75) {
        taskRoot.insertAdjacentElement('beforeend', theoryBtn);
        alert(`Вы ответили верно на ${correctTotal} из ${questionsTotal}\r\nПовторите попытку`);
    }
    else {
        taskRoot.insertAdjacentElement('beforeend', nextBtn);
        alert(`Вы ответили верно на ${correctTotal} из ${questionsTotal}\r\nЗадание пройдено`);
    }
});

let prevValue = '';
taskRoot.addEventListener('keydown', e => {
    prevValue = e.target.value;
});

taskRoot.addEventListener('input', e => {

    const target = e.target;
    const exeptable = /^([0-9]+)?[.]?([0-9]+)?$/g;
    let check = exeptable.exec(target.value);
    exeptable.lastIndex = 0;

    if (!check) {
        target.value = prevValue;
    }
});

function cheat() {
    let n = taskRoot.elements.length;

    for (let i = 0; i < n; i++) {

        const taskInput = taskRoot.elements[i];

        if (!(taskInput instanceof HTMLInputElement)) continue;

        taskInput.value = taskData[(i + start) % taskData.length].speed;
    }
}