var reportView = new wijmo.viewer.ReportViewer('#reportViewer'),
    c1WebApiServiceUrl = 'http://demos.componentone.com/ASPNET/c1webapi/4.0.20172.105/api/report',
    arServiceUrl = 'http://ardemos.grapecity.com/AR12-ReportsGallery/ActiveReports.ReportService.asmx',
    flexReportsCombo = document.querySelector('#flexReports'),
    ssrsReportsCombo = document.querySelector('#ssrsReports'),
    arReportsCombo = document.querySelector('#arReports');

resizeViewer();
window.addEventListener('resize', function () { resizeViewer(); });

addNoneOption(flexReportsCombo);
addNoneOption(ssrsReportsCombo);
addNoneOption(arReportsCombo);

document.querySelector('.c1webapi-service-url').textContent = c1WebApiServiceUrl;
document.querySelector('.ar-service-url').textContent = arServiceUrl;

//Fill ArReports combo.
wijmo.httpRequest('arReport.config.json', {
    success: function (xhr) {
        var data = JSON.parse(xhr.responseText);
        fillArReportList(data);
        loadArReport();
    }
});

// Fill FlexReport combo.
wijmo.httpRequest('flexReport.config.json', {
    success: function (xhr) {
        var data = JSON.parse(xhr.responseText);
        fillFlexReportList(data);
        //loadFlexReport();
    }
});

// Fill SsrsReport combo.
wijmo.httpRequest('ssrsReport.config.json', {
    success: function (xhr) {
        var data = JSON.parse(xhr.responseText);
        fillSsrsReportList(data);
    }
});

function fillFlexReportList(reports) {
    reports.categories.forEach(function (category) {
        var categoryName = category.name,
            optGroup = createComboOptionGroup(category.text);

        category.reports.forEach(function (report) {
            var reportName = report.reportName,
                fileName = 'ReportsRoot/' + categoryName + '/' + report.fileName,
                option = createComboOption(report.reportTitle, fileName);

            option.setAttribute("ReportName", reportName);

            optGroup.appendChild(option);
        });

        flexReportsCombo.appendChild(optGroup);
    });
}

function fillSsrsReportList(reports) {
    reports.categories.forEach(function (category) {
        var optGroup = createComboOptionGroup(category.text);

        category.reports.forEach(function (report) {
            var option = createComboOption(report.reportTitle, 'c1ssrs/' + report.reportPath);
            optGroup.appendChild(option);
        });

        ssrsReportsCombo.appendChild(optGroup);
    });
}

function fillArReportList(reports) {
    var selectedReport = reports.selectedReport,
        selectedCategoryName = selectedReport.categoryName,
        selectedReportName = selectedReport.reportName;

    reports.categories.forEach(function (category) {
        var categoryName = category.name,
            optGroup = createComboOptionGroup(categoryName);

        category.reports.forEach(function (report) {
            var reportName = report.reportName,
                fileName = report.fileName,
                option = createComboOption(reportName, fileName);

            if (categoryName === selectedCategoryName && reportName === selectedReportName) {
                option.selected = true;
            }

            optGroup.appendChild(option);
        });

        arReportsCombo.appendChild(optGroup);
    });
}

function loadFlexReport() {
    if (isNoneOptionSelected(flexReportsCombo)) {
        return;
    }

    if (reportView) {
        reportView.serviceUrl = c1WebApiServiceUrl;
        reportView.filePath = flexReportsCombo.value;
        reportView.reportName = getSelectedOption(flexReportsCombo).getAttribute('reportname');
        reportView.paginated = true;
    }
}

function loadSsrsReport() {
    if (isNoneOptionSelected(ssrsReportsCombo)) {
        return;
    }

    if (reportView) {
        reportView.serviceUrl = c1WebApiServiceUrl;
        reportView.filePath = ssrsReportsCombo.value;
        reportView.reportName = '';
        reportView.paginated = false;
    }
}

function loadArReport() {
    if (isNoneOptionSelected(arReportsCombo)) {
        return;
    }

    reportView.serviceUrl = arServiceUrl;
    reportView.filePath = arReportsCombo.value;
    reportView.reportName = '';
}


function addNoneOption(combo) {
    var optNone = document.createElement('option');
    optNone.value = 'None';
    optNone.innerHTML = '(None)';
    combo.appendChild(optNone);
}

function selectNoneOption(combo) {
    combo.selectedIndex = 0;
}

function isNoneOptionSelected(combo) {
    return combo.selectedIndex === 0;
}

function createComboOptionGroup(text) {
    var optGroup = document.createElement('optgroup');
    optGroup.label = text;

    return optGroup;
}

function createComboOption(text, value) {
    var option = document.createElement('option');

    option.innerHTML = text;
    option.value = value;

    return option;
}

flexReportsCombo.onchange = function () {
    selectNoneOption(ssrsReportsCombo);
    selectNoneOption(arReportsCombo);
    loadFlexReport();
};

ssrsReportsCombo.onchange = function () {
    selectNoneOption(flexReportsCombo);
    selectNoneOption(arReportsCombo);
    loadSsrsReport();
};

arReportsCombo.onchange = function () {
    selectNoneOption(flexReportsCombo);
    selectNoneOption(ssrsReportsCombo);
    loadArReport();
};

function resizeViewer() {
    reportView.hostElement.style.height = (Math.max(window.innerHeight * 0.95, 300)) + 'px';
}

function getSelectedOption(selectElement) {
    return selectElement.selectedOptions
        ? selectElement.selectedOptions[0]
        : selectElement.options[selectElement.selectedIndex];
}
