const request = {
            get: function (url, callback) {
                let xmlHttp = new XMLHttpRequest();
                xmlHttp.onreadystatechange = function() {
                    if (xmlHttp.readyState === 4 && xmlHttp.status === 200)
                        callback(xmlHttp.responseText);
                };
                xmlHttp.open("GET", url, true);
                xmlHttp.send();
            },

            post: function (url, callback, data) {
                let xmlHttp = new XMLHttpRequest();
                xmlHttp.onreadystatechange = function() {
                    if (xmlHttp.readyState === 4 && xmlHttp.status === 200)
                        callback(xmlHttp.responseText);
                };
                xmlHttp.open("POST", url, true);
                xmlHttp.send(this.formatParams(data));
            },

            formatParams: function (params) {
                return Object.keys(params).map((key) => {
                    return key+"="+encodeURIComponent(params[key])
                }).join("&")
            }
        };

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">`
};

const baseFormFields = `<form id="tableForm" action="/update">
    <div class="formRow">
        <div class="formRow-label">service_id</div>
        <div class="formRow-input"><input type="text" name="service_id" class="formInput" id="formServiceId" disabled></div>
    </div>
    
    <div class="formRow">
        <div class="formRow-label"> servtype </div>
        <div class="formRow-input">
            <input type="text" name="servtype" class="formInput">
        </div>
    </div>

    <div class="formRow">
        <div class="formRow-label"> subtype </div>
        <div class="formRow-input">
            <input type="text" name="subtype" class="formInput">
        </div>
    </div>

    <div class="formRow">
        <div class="formRow-label"> user_id </div>
        <div class="formRow-input">
            <input type="text" name="user_id" class="formInput">
        </div>
    </div>

    <div class="formRow">
        <div class="formRow-label"> referrer_user_id </div>
        <div class="formRow-input">
            <input type="text" name="referrer_user_id" class="formInput">
        </div>
    </div>

    <div class="formRow">
        <div class="formRow-label"> state </div>
        <div class="formRow-input">
            <select name="state">
                <option>N</option>
                <option>A</option>
                <option>S</option>
                <option>D</option>
                <option>O</option>
            </select>
        </div>
    </div>

    <div class="formRow">
        <div class="formRow-label"> creation_date </div>
        <div class="formRow-input">
            <input type="date" name="creation_date" class="formInput">
        </div>
    </div>
    <div class="formRow">
        <div class="formRow-label"> creation_time </div>
        <div class="formRow-input">
            <input type="time" name="creation_time" class="formInput">
        </div>
    </div>

    <div class="formRow">
        <div class="formRow-label"> creation_request_sent_date </div>
        <div class="formRow-input" style="display: flex; flex-direction: row">
            <input type="date" name="creation_request_sent_date" class="formInput" style="width: 50%;">
            <input type="time" name="creation_request_sent_time" class="formInput" style="width: 50%;">
        </div>
    </div>

    <div class="formRow">
        <div class="formRow-label"> notified_about_expiration </div>
        <div class="formRow-input">
            <input type="text" name="notified_about_expiration" class="formInput">
        </div>
    </div>
</form>`;

const formCreateButtons = `<div class="formButtons">
        <button type="button" onclick="hideForm()">Cancel</button>
        <button type="submit">Create</button>
    </div>`;

const formEditButtons = `<div class="formButtons">
        <button type="button" onclick="hideForm()">Cancel</button>
        <button type="submit">Update</button>
    </div>`;

const uploadFileHtml = '<img src="/static/images/upload_icon.png" alt="" style="width: 70%;height: 70%;">';

function elementFromHTML(html) {
    let elem = document.createElement('div');
    elem.innerHTML = html;
    return elem.firstChild;
}

function onPageLoad() {
    request.post(`${HOST}/get`, renderTable, {'type': 'full'});

    let btn = document.getElementById('uploadFileBtn');
    btn.innerHTML = uploadFileHtml;
}

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

    if (fieldElement.firstChild.nodeName !== 'INPUT' && fieldElement.firstChild.nodeName !== 'SELECT') {
        let [columnName, serviceId] = fieldId.split('-');
        fieldElement.innerHTML = defaultColumnInputs[columnName];
        if (columnName === 'creation_request_sent_date') {
            let dateElement = fieldElement.firstChild;
            let timeElement = fieldElement.childNodes[1];

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

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

function renderTable(text) {
    let data = JSON.parse(text);

    let table = document.getElementById('table');

    while (table.firstChild) table.removeChild(table.firstChild);

    let tableHeaders = document.createElement('thead');
    let headerRow = document.createElement('tr');
    tableHeaders.appendChild(headerRow);
    data['headers'].forEach((field) => {
        let header = document.createElement('th');
        header.innerText = field;
        headerRow.appendChild(header);
    });
    headerRow.appendChild(document.createElement('th'));
    headerRow.appendChild(document.createElement('th'));

    let tableContent = document.createElement('tbody');
    data['content'].forEach((row, rowIndex) => {
        row.push(`<button value="${row[0]}" onclick="setupEditFields('${row[0]}')">&#9998</button>`);
        row.push(`<button value="${row[0]}" onclick="removeField('${row[0]}')">&#10006</button>`);

        let contentRow = document.createElement('tr');
        contentRow.setAttribute('id', `row_${row[0]}`);

        row.forEach((column, colIndex) => {
            let color = (colIndex % 2 + rowIndex % 2) % 2 === 0 ? 'odd' : 'even';
            let columnNode = document.createElement('td');

            if (colIndex !== 0 && colIndex < data['headers'].length) {
                let fieldId = `${data['headers'][colIndex]}-${row[0]}`;
                columnNode.classList.add('editableField');
                columnNode.onclick = () => { onFieldClick(fieldId) };
                columnNode.setAttribute('id', fieldId);
            }

            columnNode.classList.add(color);
            columnNode.innerHTML = column;
            contentRow.appendChild(columnNode);
        });

        tableContent.appendChild(contentRow);
    });

    table.appendChild(tableHeaders);
    table.appendChild(tableContent);
}

function setupEditFields(service_id) {
    showEditForm();
    request.post(`${HOST}/get`, (text) => {
        let row = JSON.parse(text);

        Object.keys(row).forEach((element) => {
            document.getElementsByName(element)[0].value = row[element];
        });

        let [sent_date, sent_time] = row['creation_request_sent_date'].split(' ');
        document.getElementsByName('creation_request_sent_date')[0].value = sent_date;
        document.getElementsByName('creation_request_sent_time')[0].value = sent_time;
    }, {
        'type': 'single_id', 'service_id': service_id
    });
}

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
        }
    }
}

function showContentBox() {
    let elem = document.getElementById('backgroundTint');
    elem.classList.remove('hidden');
    elem.classList.add('shown');

    elem = document.getElementById('contentBox');
    elem.classList.remove('hidden');
    elem.classList.add('shown');
}

function hideContentBox() {
    let elem = document.getElementById('backgroundTint');
    elem.classList.remove('shown');
    elem.classList.add('hidden');

    elem = document.getElementById('contentBox');
    elem.classList.remove('shown');
    elem.classList.add('hidden');
}

function showForm() {
    let newEntryBtn = document.getElementById('newEntryBtn');
    newEntryBtn.style.display = 'none';

    showContentBox();
    let contentBox = document.getElementById('contentBox');
    while (contentBox.firstChild)
        contentBox.removeChild(contentBox.firstChild);

    contentBox.appendChild(elementFromHTML(baseFormFields));
    return contentBox;
}

showEditForm = () => {
    let contentBox = showForm();
    contentBox.appendChild(elementFromHTML(formEditButtons));
};

showCreateForm = () => {
    let contentBox = showForm();
    contentBox.appendChild(elementFromHTML(formCreateButtons));
    document.getElementById('formServiceId').disabled = false;
};

function hideForm() {
    let newEntryBtn = document.getElementById('newEntryBtn');
    newEntryBtn.style.display = 'inline';

    let contentBox = document.getElementById('contentBox');
    while (contentBox.firstChild)
        contentBox.removeChild(contentBox.firstChild);

    hideContentBox();
}

function addNewRowOnHover() {
    let btn = document.getElementById('newEntryBtn');
    btn.innerText = 'Add new row';
}

function addNewRowOnEndHover() {
    let btn = document.getElementById('newEntryBtn');
    btn.innerText = '+';
}

function uploadFileOnHover() {
    let btn = document.getElementById('uploadFileBtn');
    btn.innerHTML = 'Upload File';
}

function uploadFileOnEndHover() {
    let btn = document.getElementById('uploadFileBtn');
    btn.innerHTML = uploadFileHtml;
}

function triggerUploadFile() {
    let fileInput = document.getElementById('csvFileInput');
    fileInput.click()
}