const roleFlags = [
        "NONE",
        "MEMBER",
        "BOSS",
        "SA",
        "MODERATOR",
        "ADMINISTRATOR",
        "CHIEF",
        "HIDDEN"
];

const clubAccessType = [
        "OPEN",
        "CLOSED",
        "FRIENDS_ONLY",
];

function initPropertyTable(tag, data) {
	if( data.length <= 0 ) return;
	let keys = Object.keys(data[0]);
	let header = "";
	for( let i = 1; i < keys.length; i++ ) {
		header += "<th>" + keys[i] + "</th>";
	}
	header += "<th>actions</th>";
	$($(tag).children("thead")[0]).html("<tr>"+header+"</tr>");
	for( let i = 0; i < data.length; i++ ) {
		header = "";
		let entry_type = "";
		let entry_name = "";
		for( let u = 0; u < keys.length; u++ ) {
            if( u == 0 ) {
                entry_type = data[i][keys[u]];
                header += "<td class=\"entry-type\" style=\"display: none;\">"+data[i][keys[u]]+"</td>";
                continue;
            } else if( u == 1 ) {
                entry_name = data[i][keys[u]];
            } else if( u == 2 ) {
                switch(entry_type) {
                    case "Enum":
                        header += "<td data-name=\""+keys[u]+"\"><select>";
                        let current_val = data[i][keys[u]];
                        if( entry_name == "RoleFlags" ) {
                            header += "<option value=\""+current_val+"\">"+current_val+"</option>";
                            for( let j = 0; j < roleFlags.length; j++ ) {
                                if( roleFlags[j] == current_val ) {
                                    continue;
                                }
                                header += "<option value=\""+roleFlags[j]+"\">"+roleFlags[j]+"</option>";
                            }
                        } else if( entry_name == "ClubAccessType" ) {
                            header += "<option value=\""+current_val+"\">"+current_val+"</option>";
                            for( let j = 0; j < clubAccessType.length; j++ ) {
                                if( clubAccessType[j] == current_val ) {
                                    continue;
                                }
                                header += "<option value=\""+clubAccessType[j]+"\">"+clubAccessType[j]+"</option>";
                            }
                        }
                        header += "</td></select>";
                        break;
                    case "Boolean":
                        let v = "";
                        if( data[i][keys[u]]+"" == "true" ) {
                            v = "checked";
                        }
                        header += "<td data-name=\""+keys[u]+"\"><input type=\"checkbox\"" + v + "/></td>";
                        break;
                    default: // Integer
                        header += "<td data-name=\""+keys[u]+"\"><input type=\"number\" value=\""+data[i][keys[u]]+"\"/></td>";
                }
                continue;
            }
            header += "<td data-name=\""+keys[u]+"\">" + data[i][keys[u]] + "</td>";
		}
		header += "<td><img src=\"/file/svg/rotate.svg\" onclick=\"resetRow(this)\"></td>";
		header += "<td><img src=\"/file/svg/pencil.svg\" onclick=\"editRow(this)\"></td>";
		let tabName = tag.substring(1);
		$($(tag).children("tbody")[0]).append("<tr data-table=\""+tabName[0].toUpperCase()+tabName.substring(1)+"\">"+header+"</tr>");
	}
}

function editRow(obj) {
    let entry_name = $(obj).parent().parent().find("td[data-name='name']").html();
    let entry_value = $(obj).parent().parent().find("td[data-name='value']");
    let entry_type = $(obj).parent().parent().find(".entry-type").html();
    if( entry_type == "Enum") {
        entry_value = entry_value.find("select").find(":selected").val();
    } else if( entry_type == "Boolean" ) {
        entry_value = entry_value.find("input").is(":checked");
    } else {
        entry_value = entry_value.find("input").val();
    }
    console.log(entry_name, entry_type, entry_value);

    $.post( "/api/edit_user_property?user_id="+$("#user_init_info").attr("data-id")+"&entry_name="+entry_name+"&entry_value="+entry_value, function() {
        window.location.reload();
    });
}

function resetRow(obj) {
    let entry_name = $(obj).parent().parent().find("td[data-name='name']").html();
    $.post( "/api/reset_user_property?user_id="+$("#user_init_info").attr("data-id")+"&entry_name="+entry_name, function() {
        window.location.reload();
    });
}

function set_loading(obj, state) {
	$(obj).attr("aria-busy", state);
}

function getUserProperties() {
	$.get( "/api/get_user_properties?id="+$("#user_init_info").attr("data-id"), function( data ) {
		initPropertyTable("#properties", data);
		set_loading("#properties", false);
	});
}

getUserProperties();