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

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

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

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

        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 = '+';
        }