import ApplicationController from "./application_controller";

export default class extends ApplicationController {

    /**
     *
     * @type {string[]}
     */
    static targets = [
        'index'
    ];

    /**
     *
     */
    connect() {
        this.template = this.element.querySelector('.matrix-template');
        this.keyValueMode = this.data.get('key-value') === 'true';

        this.detectMaxRows();
    }

    /**
     *
     */
    deleteRow(event) {
        let path = event.path || (event.composedPath && event.composedPath());

        path.forEach((element) => {
            if(element.tagName !== 'TR'){
                return;
            }

            element.parentNode.removeChild(element);
        });

        this.detectMaxRows();
        event.preventDefault();
        return false;
    }

    /**
     *
     */
    addRow(event) {
        this.index++;

        let row = this.template.content.querySelector('tr').cloneNode(true);
        row.innerHTML = row.innerHTML
            .replace(/{index}/gi, this.index);


        let creatingRows = this.element.querySelector('.add-row');

        this.element.querySelector('tbody').insertBefore(row, creatingRows);

        this.detectMaxRows();
        event.preventDefault();
        return false;
    }

    /**
     *
     * @returns {number}
     */
    get index() {
        return parseInt(this.data.get('index'));
    }

    /**
     *
     * @param value
     */
    set index(value) {
        this.data.set('index', value);
    }

    /**
     * Shows or hides the addition
     * of a new line based on line counting
     */
    detectMaxRows() {
        const max = parseInt(this.data.get('rows'));
        if(max === 0){
            return;
        }

        let current = this.element.querySelectorAll('tbody tr:not(.add-row)').length;
        let addRow = this.element.querySelector('.add-row th');
        addRow.style.display = max <= current ? 'none' : '';
    }
}
