class DataTable {

    constructor(dataTableElement) {

        this.addButtonClicked = this.addButtonClicked.bind(this);
        this.inputFieldChanged = this.inputFieldChanged.bind(this);
        this.removeButtonClicked = this.removeButtonClicked.bind(this);

        this.element = dataTableElement;
        this.structureElement = dataTableElement.querySelector('.js-data-table-structure');
        this.content = dataTableElement.querySelector('.js-data-table-content');
        this.hiddenInput = dataTableElement.querySelector('.js-data-table-hidden-input');

        const addButton = dataTableElement.querySelector('.js-data-table-add-row');
        if (isset(addButton)) {
            addButton.addEventListener('click', this.addButtonClicked);
        }

        this.refreshEventListeners();
        this.resizeTextareas();
    }


    //=========== Listeners events ===========//

    refreshEventListeners() {
        this.removeAndAddRemoveButtonListeners();
        this.removeAndAddInputListeners();
    }

    removeAndAddRemoveButtonListeners() {
        const self = this;
        let removeButtons = this.content.querySelectorAll('.js-data-table-remove-row');

        removeButtons.forEach(function (removeButton) {
            removeButton.removeEventListener('click', self.removeButtonClicked);
            removeButton.addEventListener('click', self.removeButtonClicked);
        });
    }

    removeAndAddInputListeners() {
        const self = this;
        let inputFields = this.content.querySelectorAll('.js-data-table-input');

        inputFields.forEach(function (inputField) {
            inputField.removeEventListener('change', self.inputFieldChanged);
            inputField.addEventListener('change', self.inputFieldChanged);
        });
    }


    //=========== Events to corresponding function hooks ===========//

    addButtonClicked(event) {
        this.addStructureRow();

        this.refreshEventListeners();
        this.updateHiddenDataTableInput();
    }

    inputFieldChanged(event) {
        this.updateHiddenDataTableInput();
        this.resizeTextareas();
    }

    removeButtonClicked(event) {
        const removeButton = event.currentTarget;
        const dataTableRow = removeButton.parentElement;

        this.removeRowFromTable(dataTableRow);

        this.refreshEventListeners();
        this.updateHiddenDataTableInput();
    }


    //=========== Class based functions ===========//

    /**
     * Adds a row to the data table.
     *
     * It will look up the structure element in the table,
     * and modify it to append to the data table.
     */
    addStructureRow() {

        // Clone the structure node and reset the hidden and clone js selector
        const structureNode = this.structureElement.cloneNode(true);
        structureNode.classList.remove('js-data-table-structure');
        structureNode.hidden = false;

        // Append new element to content
        this.content.appendChild(structureNode);
    }

    /**
     * Remove a given row from the data table
     *
     * @param dataTableRow
     */
    removeRowFromTable(dataTableRow) {
        dataTableRow.remove();
    }

    /**
     * Resize all the textareas so the content will fi
     */
    resizeTextareas() {

        const self = this;
        let shouldReload = false;

        const textareas = this.content.querySelectorAll('textarea');
        textareas.forEach(function (textarea) {

            const offset = textarea.offsetHeight - textarea.clientHeight;
            textarea.style.height = 'auto';

            let textareaHeight = textarea.scrollHeight + offset;
            if(textareaHeight === 0) shouldReload = true;

            // Add a row extra padding
            textareaHeight += 20;

            textarea.style.height = textareaHeight + 'px';

            if(textareaHeight === 0) shouldReload = true;
        });

        if(shouldReload){
            setTimeout(function () {
                console.log('dataTable: Recall because a height was zero...');
                self.resizeTextareas();
            }, 250);
        }
    }

    /**
     * Update the hidden input.
     *
     * Will loop through the rows of the data table and inputs
     * to create a array to covert into json for the hidden input of the table.
     */
    updateHiddenDataTableInput() {

        // Create input json
        let hiddenInputJson = [];

        // Loop through each row
        const rows = this.content.querySelectorAll('.js-data-table-row');
        rows.forEach(function (row) {
            let rowInputs = [];

            // Loop through the inputs
            const inputs = row.querySelectorAll('.js-data-table-input');
            inputs.forEach(function (input) {

                // If we have different type of inputs we have to modify this
               rowInputs.push(input.value);
            });

            hiddenInputJson.push(rowInputs);
        });

        this.hiddenInput.value = JSON.stringify(hiddenInputJson);
    }
}