<div id="Participant-viewer-ptid-dataset-tab-panel"></div>

<script type="text/javascript" nonce="<%=scriptNonce%>">
    // Load required JS dependencies
    LABKEY.requiresScript(['Ext4ClientApi'], function() {
        var DATASET_PANEL_DIV_ID = 'Participant-viewer-ptid-dataset-tab-panel';
        var QWP_COUNTER = 0;
        var DEFAULT_DATASET = 'Demographics'; // Change this if there is a different dataset
                                              //   you want to start on for a page load.

        var selectedDatasetTab;
        var categories = [];
        var ptidSelection = LABKEY.ActionURL.getParameter('participantId');
        var datasetSelection = LABKEY.ActionURL.getParameter('datasetId');

        // On page load, query for the set of study datasets and their metadata.
        LABKEY.Query.selectRows({
            schemaName: 'study',
            queryName: 'DataSets',
            columns: 'DataSetId,Name,Label,CategoryId,CategoryId/Label,DemographicData',
            sort: 'CategoryId/Label,Label',   // Sort by category label and then
					      //   dataset label within a category
            success: datasetResponse
        });

        // Callback function for processing the dataset query and intializing the page.
        function datasetResponse(data) {
            // Keep track of the datasets by their categories so that we can render 
            //   the two level tab panel
            var categoryMap = {};
            for (var i = 0; i < data.rows.length; i++) {
                var row = data.rows[i];
                var label = row["CategoryId/Label"];
                if (categoryMap[label] === undefined) {
                    categories.push({label:label, datasets:[]});
                    categoryMap[label] = categories.length - 1;
                }

                categories[categoryMap[label]].datasets.push({
                    id: row.DataSetId,
                    name: row.Name,
                    label: row.Label,
                    isDemographic: row.DemographicData
                });

                // If there is a datasetId in the URL params, use that for the 
                //   initial tab selection.
                if (datasetSelection !== undefined && datasetSelection === row.DataSetId.toString()) {
                    selectedDatasetTab = row.Name;
                }
            }

            initDatasetTabPanel();
        }

        // Initializes the outer dataset category tab panel, this will be called once 
        //   on page load.
        function initDatasetTabPanel() {
            var items = [];
            for (var i = 0; i < categories.length; i++) {
                var label = categories[i].label || 'Uncategorized';
                items.push(getCategoryTabContent(label, categories[i].datasets));
            }

            // If there is exactly one category (or all datasets are uncategorized), 
            //   don't show the two level tabs but just show that one level of datasets.
            if (categories.length === 1) {
                items = items[0].items[0].items;
            }

            Ext4.create('LABKEY.ext4.BootstrapTabPanel', {
                renderTo: DATASET_PANEL_DIV_ID,
                items: items
            });
        }

        // Generate the per-category tab information and components for each dataset 
        //   in this category.
        function getCategoryTabContent(categoryLabel, datasets) {
            var items = [];
            var active = false;

            for (var i = 0; i < datasets.length; i++) {
                items.push(getDatasetTabContent(datasets[i]));
                active = active || isDatasetActiveTab(datasets[i]);
            }

            return {
                title: categoryLabel,
                active: active,
                items: [
                    Ext4.create('LABKEY.ext4.BootstrapTabPanel', {
                        usePills: true,
                        items: items,
                        changeHandler: function(tab) {
                            selectedDatasetTab = tab.title;
                        }
                    })
                ]
            };
        }

        function isDatasetActiveTab(dataset) {
            var active = false;
            if (selectedDatasetTab !== undefined) {
                if (selectedDatasetTab.toLowerCase() === dataset.name.toLowerCase()) {
                    active = true;
                }
            }
            else if (DEFAULT_DATASET.toLowerCase() === dataset.name.toLowerCase()) {
                active = true;
            }

            return active;
        }

        // Generate the per-dataset tab information and components, including the check 
        //   for whether a dataset is marked as isDemographic. 
        //   If so, use the DetailsPanel view instead of the QueryWebPart grid.
        function getDatasetTabContent(dataset) {
            var divId = 'dataset-qwp-' + QWP_COUNTER++;
            var ptidFilterArray = [LABKEY.Filter.create('ParticipantId', ptidSelection)];

            return {
                title: dataset.label,
                active: isDatasetActiveTab(dataset),
                items: [{
                    xtype: 'box',
                    padding: '20px 0 0 0',
                    html: '<div id="' + divId + '"></div>',
                    listeners: {
                        boxready: function() {
                            if (ptidSelection && dataset.isDemographic) {
                                Ext4.create('LABKEY.ext.DetailsPanel', {
                                    renderTo: divId,
                                    border: true,
                                    showTitle: false,
                                    store: {
                                        schemaName: 'study',
                                        queryName: dataset.name,
                                        filterArray: ptidFilterArray
                                    },
                                    showBackBtn: false
                                });
                            }
                            else {
                                new LABKEY.QueryWebPart({
                                    renderTo: divId,
                                    title: dataset.label,
                                    frame: 'none',
                                    schemaName: 'study',
                                    queryName: dataset.name,
                                    filters: ptidFilterArray,
                                    showInsertNewButton: false,
                                    showImportDataButton: false,
      // Add a custom button bar item for an "Insert New Record" button that includes the
      //   current participant id in the URL as a default value for the dataset insert form.
                                    buttonBar: {
                                        includeStandardButtons: true,
                                        items:[
                                            {
                                                text: 'Insert New Record',
                                                url: LABKEY.ActionURL.buildURL('dataset', 'insert', undefined, {
                                                    datasetId: dataset.id,
                                                    "default.ParticipantId": ptidSelection,
                                                    returnUrl: LABKEY.ActionURL.buildURL('study', 'participant', undefined, {
                                                        datasetId: dataset.id,
                                                        participantId: ptidSelection
                                                    })
                                            })}
                                        ]
                                    }
                                });
                            }
                        }
                    }
                }]
            };
        }
    });
</script>