class RuleTable {
    element;
    table;
    auth_string;
    constructor(id) {
        this.element = document.getElementById(id);
    }    
    async update_rules() {
        const elements = await IcecastEchoApi.get_rules(this.auth_string);
        this.fill_rules(elements);
    }
    fill_rules(rules) {
        while (this.element.lastElementChild) { this.element.removeChild(this.element.lastElementChild); }
        this.table = document.createElement("table");
        this.table.classList.add('table_rules');
        this.table.head = document.createElement("thead");
        this.table.body = document.createElement("tbody");
        
        for (var rule of rules) {
            const row = document.createElement("tr");

            const cell = document.createElement("td");
            const cellText = document.createTextNode(rule.id);
            cell.appendChild(cellText);
            row.appendChild(cell);

            const cell_0 = document.createElement("td");
            const cellText_0 = document.createTextNode(rule.name);
            cell_0.appendChild(cellText_0);
            row.appendChild(cell_0);
        
            const cell_1 = document.createElement("td");
            const cellText_1 = document.createTextNode(rule.start);
            cell_1.appendChild(cellText_1);
            row.appendChild(cell_1);

            const cell_2 = document.createElement("td");
            const cellText_2 = document.createTextNode(rule.duration);
            cell_2.appendChild(cellText_2);
            row.appendChild(cell_2);

            const cell_3 = document.createElement("td");
            const cellButton_3 = document.createElement("button");
            cellButton_3.classList.add('button');
            cellButton_3.classList.add('button3');
            cellButton_3.innerHTML = 'remove';
            const tbl = this;
            cellButton_3.addEventListener('click', async function(){
                await IcecastEchoApi.delete_rule(cellText.nodeValue, auth_basic);
                await tbl.update_rules();
            });
            
            cell_3.appendChild(cellButton_3);
            row.appendChild(cell_3);

            this.table.body.appendChild(row);
        }

        {
            const row = document.createElement("tr");

            const cell = document.createElement("td");
            const cellText = document.createTextNode("id");
            cell.appendChild(cellText);
            row.appendChild(cell);

            const cell_0 = document.createElement("td");
            const cellText_0 = document.createTextNode("name");
            cell_0.appendChild(cellText_0);
            row.appendChild(cell_0);

            const cell_1 = document.createElement("td");
            const cellText_1 = document.createTextNode("start");
            cell_1.appendChild(cellText_1);
            row.appendChild(cell_1);

            const cell_2 = document.createElement("td");
            const cellText_2 = document.createTextNode("duration");
            cell_2.appendChild(cellText_2);
            row.appendChild(cell_2);

            const cell_3 = document.createElement("td");
            const cellText_3 = document.createTextNode("");
            cell_3.appendChild(cellText_3);
            row.appendChild(cell_3);

            this.table.head.appendChild(row);
        }

        this.table.appendChild(this.table.head);
        this.table.appendChild(this.table.body);
        this.element.appendChild(this.table);
    }
}