/**
 * Operation Select js in operation-select.html
 *
 * @since 1.0 check web
 */
var NotificationSelect = {};

NotificationSelect.nameSelected="";
NotificationSelect.valueSelected="";
/**
 * default operation select data JSON
 */
NotificationSelect.defaultNotificationSelectJson = [];

/**
 * get operation select data from cms
 * @param {function} callback 
 */
NotificationSelect.getNotificationSelectData = function (callback) {
    let param = {
        sid: COMMON.getSid(),
    };
    const url = CONSTANT.URL.CMS.BASE + ClientData.userInfo_accountPath() + CONSTANT.URL.CMS.API.BASE + 'pushMessageTemplate/';
    COMMON.cmsAjax(url, param, false, function (json) {
        if (callback) {
            callback(json);
        }
    }, function() {
        console.log('NotificationSelect.getNotificationSelectData error');
        if (callback) {
            callback(NotificationSelect.defaultNotificationSelectJson);
        }
    });
};

/**
 * handle click operation setting
 */
NotificationSelect.selectOperationClick = function () {
    $('.select-card-list .card .select-label').on('click', function () {
        $(this).closest('.select-card-list').find('.card').removeClass('selected');
        $(this).closest('.card').addClass('selected');
        NotificationSelect.nameSelected = $(this).text();
        NotificationSelect.valueSelected = $(this).closest('.accordion').find('.card-body').text();
    });
};

/**
 * init data, action when screen onload
 */
NotificationSelect.init = function () {
    NotificationSelect.getNotificationSelectData(function (data) {
        NotificationSelect.createNotificationSelectList(data);
    });
    NotificationSelect.selectOperationClick();
};

/**
 * Implement notification select html
 * @returns 
 */
 NotificationSelect.createNotificationSelectList = function(data) {
	$("#notificationSelectList").empty();
	if (typeof data === 'undefined' || data.length < 1) return;
    let classSelected = "selected";
	for (let i = 0; i < data.length; i++) {
		
        let divName = $("<div class='pl-5 py-3 h-100 w-100 align-self-center select-label'>" + data[i].name + "</div>");
        let divIcon = $("<div class='flex-shrink-1 mx-3 align-self-center'>"
                      + "<button class='btn btn-link border collapsed' type='button' data-toggle='collapse' data-target='#collapse" +  i + "' aria-expanded='true' aria-controls='collapse" +  i + "'>"
                      + "<div class='arrow-icon'></div>"
                      + "</button></div>");

		let ahrefName =  $("<a href='#' class='d-flex text-decoration-none'></a>");
        let divParentName =  $("<div class='card mb-2 " + classSelected + "' id='heading" +  i + "'></div>");
        classSelected = "";

        let divValue =  $("<div id='collapse" +  i + "' class='collapse' aria-labelledby='heading" +  i + "' data-parent='#accordion" +  i + "'></div>");
        let divBodyValue =  $("<div class='card-body'>" +  data[i].value + "</div>");

		let messageli = $("<li class='accordion' id='accordion" +  i + "'></li>");
		
		ahrefName.append(divName);
		ahrefName.append(divIcon);
        divParentName.append(ahrefName);
        divValue.append(divBodyValue);
		messageli.append(divParentName);
		messageli.append(divValue);
		$("#notificationSelectList").append(messageli);
	}
}

