const defaultColumnInputs = {
    'service_id': `<input type="text">`,
    'servtype': `<input type="text">`,
    'subtype': `<input type="text">`,
    'user_id': `<input type="text">`,
    'referrer_user_id': `<input type="text">`,
    'state': `<select>
        <option>N</option>
        <option>A</option>
        <option>S</option>
        <option>D</option>
        <option>O</option>
    </select>`,

    'creation_date': `<input type="date">`,
    'creation_time': `<input type="time">`,
    'creation_request_sent_date': `<input type="date"><input type="time">`,
    'notified_about_expiration': `<input type="text">`
};

function onFieldClick(fieldId) {
    let fieldElement = document.getElementById(fieldId);
    fieldElement.onclick = () => {};

    if (fieldElement.firstChild.nodeName !== 'INPUT' && fieldElement.firstChild.nodeName !== 'SELECT') {
        let [columnName, serviceId] = fieldId.split('-');
        let previousValue = fieldElement.innerText;

        fieldElement.innerHTML = defaultColumnInputs[columnName];
        let submitBtn = elementFromHTML('<button type="button">Submit</button>');
        let cancelBtn = elementFromHTML('<button type="button">&#10006</button>');

        fieldElement.appendChild(submitBtn);
        fieldElement.appendChild(cancelBtn);

        if (columnName === 'creation_request_sent_date') {
            let dateElement = fieldElement.firstChild;
            let timeElement = fieldElement.childNodes[1];

            submitBtn.onclick = () => fieldEditSubmitBtn(fieldId, `${dateElement.value} ${timeElement.value}`);
            cancelBtn.onclick = () => fieldEditCancelBtn(fieldId, previousValue);

            dateElement.onkeyup = timeElement.onkeyup = (event) => {
                if (event.code === 'Enter') {
                    if (dateElement.value !== '' && timeElement.value !== '')
                        fieldEditSubmit(fieldId, `${dateElement.value} ${timeElement.value}`);
                }
                else if (event.code === 'Escape')
                    fieldEditCancel(fieldId, previousValue);
            };
        }
        else {
            let inputElement = fieldElement.firstChild;

            submitBtn.onclick = () => fieldEditSubmitBtn(fieldId, inputElement.value);
            cancelBtn.onclick = () => fieldEditCancelBtn(fieldId, previousValue);

            inputElement.onkeyup = (event) => {
                if (event.code === 'Enter')
                    fieldEditSubmit(fieldId, inputElement.value);
                else if (event.code === 'Escape')
                    fieldEditCancel(fieldId, previousValue);
            };
        }
    }
}

function _fieldEditSubmit(fieldId, value) {
    let [columnName, serviceId] = fieldId.split('-');
    request.post(`${HOST}/api/update`, () => {}, {
        'service_id': serviceId, [columnName]: value
    });
}

function fieldEditSubmit(fieldId, value) {
    _fieldEditSubmit(fieldId, value);

    let fieldElement = document.getElementById(fieldId);
    fieldElement.innerHTML = value;
    fieldElement.onclick = () => onFieldClick(fieldId);
}

function fieldEditSubmitBtn(fieldId, value) {
    _fieldEditSubmit();

    let fieldElement = document.getElementById(fieldId);
    fieldElement.innerHTML = value;
    fieldElement.onclick = () => {
        fieldElement.onclick = () => onFieldClick(fieldId);
    }
}

function fieldEditCancel(fieldId, value) {
    let fieldElement = document.getElementById(fieldId);
    fieldElement.innerHTML = value;
    fieldElement.onclick = () => onFieldClick(fieldId);
}

function fieldEditCancelBtn(fieldId, value) {
    let fieldElement = document.getElementById(fieldId);
    fieldElement.innerHTML = value;
    fieldElement.onclick = () => {
        fieldElement.onclick = () => onFieldClick(fieldId);
    }
}

function removeField(service_id) {
    request.post(`${HOST}/api/delete`, () => {}, {'service_id': service_id});
    let tableBody = document.getElementById('table').childNodes[1];
    for (let node of tableBody.childNodes) {
        if (node.getAttribute('id') === `row_${service_id}`) {
            tableBody.removeChild(node);
            break
        }
    }
}