/**
 * Copyright (C) 2020 to the present, Crestron Electronics, Inc.
 * All rights reserved.
 * No part of this software may be reproduced in any form, machine
 * or natural, without the express written consent of Crestron Electronics.
 * Use of this source code is subject to the terms of the Crestron Software License Agreement 
 * under which you licensed this source code.  
 *
 * This code was automatically generated by Crestron's code generation tool.
 */
/* jslint es6 */

const verticalPresentModule = (function () {
    'use strict';

    const verticalPresentView = document.getElementById('verticalPresent');
    const prev = document.getElementById('prev-arrow-btn');
    const next = document.getElementById('next-arrow-btn');
    const currentNavBtn = document.getElementById('firstNavBtn');
    const secondNavBtn = document.getElementById('secondNavBtn');
    const thirdNavBtn = document.getElementById('thirdNavBtn');
    const fourthNavBtn = document.getElementById('fourthNavBtn');

    // Display panels in vertical present list
    const singleDisplayMode = document.querySelector('.single-display');
    const multiDisplayMode = document.querySelector('.multi-display');
    const verticalPanel3 = document.getElementById('verticalDisplayPanel_3');
    const verticalPanel4 = document.getElementById('verticalDisplayPanel_4');
    const verticalPanel5 = document.getElementById('verticalDisplayPanel_5');
    const verticalPanel6 = document.getElementById('verticalDisplayPanel_6');
    const verticalPanel7 = document.getElementById('verticalDisplayPanel_7');
    const verticalPanel8 = document.getElementById('verticalDisplayPanel_8');

    let panelSelectedIndex = 0;

    /**
    * Handle the view for vertical source menu
     * @param {*} displayIndex 
     * @param {*} sourceIndex 
     * @param {*} values 
     * @param {*} joinType 
     */
    function updateVerticalPresentationPage(displayIndex, sourceIndex, values, joinType) {
        avfUtility.log("updateVerticalPresentationPage with displayIndex: ", displayIndex, ", sourceIndex: ", sourceIndex, ", values: ", values, ", joinType: ", joinType);
        const rowsForEachDev = document.getElementById(`vertical_source_row_${displayIndex}_${sourceIndex}`);
        if (rowsForEachDev) {
            rowsForEachDev.setAttribute("displaySelectionIndex", displayIndex);
            rowsForEachDev.setAttribute("sourceSelectionIndex", sourceIndex);

            const buttonImage = document.getElementById(`vertical_source_btn_${displayIndex}_${sourceIndex}`);
            const imageMenuText = document.getElementById(`vertical_source_text_${displayIndex}_${sourceIndex}`);
            const syncEl = document.getElementById(`vertical_source_sync_indicator_${displayIndex}_${sourceIndex}`);
            const audioEl = document.getElementById(`vertical_source_audio_indicator_${displayIndex}_${sourceIndex}`);
            switch (joinType.toLowerCase()) {
                case "devicename":
                    if (values) {
                        rowsForEachDev.setAttribute("selectedDeviceName", values);
                    }
                    break;
                case "audiofollow":
                    if (values) {
                        audioEl.style.display = "block";
                    } else {
                        audioEl.style.display = "none";
                    }
                    break;
                case "sourcedevicemodel":
                    if (!values) {
                        values = '';
                    }
                    // buttonImage.setAttribute("sourceDeviceModelName", values);
                    // rowsForEachDev.setAttribute("sourceDeviceModelName", values);
                    break;
                case "sourcedevicetype":
                    if (!values) {
                        values = '';
                    }
                    // buttonImage.setAttribute("sourceDeviceType", values);
                    // rowsForEachDev.setAttribute("sourceDeviceType", values);
                    break;
                case "presenting":
                    let iconsName = buttonImage.getAttribute('iconName');
                    let imageName = '';
                    if (values) {
                        imageMenuText.classList.add('active-label');
                        if (avfUtility.isValidInput(iconsName)) {
                            imageName = configModule.getConfigIcon(iconsName, 'solid');
                            buttonImage.setAttribute("url", `./app/project/assets/img/avf/${imageName}`);
                            buttonImage.getElementsByTagName('img')[0].setAttribute("src", `./app/project/assets/img/avf/${imageName}`);
                        }
                    } else {
                        imageMenuText.classList.remove('active-label');
                        if (avfUtility.isValidInput(iconsName)) {
                            imageName = configModule.getConfigIcon(iconsName, 'outline');
                            buttonImage.setAttribute("url", `./app/project/assets/img/avf/${imageName}`);
                            buttonImage.getElementsByTagName('img')[0].setAttribute("src", `./app/project/assets/img/avf/${imageName}`);
                        }
                    }
                    rowsForEachDev.setAttribute("iconNameSelected", './app/project/assets/img/avf/' + configModule.getConfigIcon(iconsName, 'solid'));
                    rowsForEachDev.setAttribute("iconNameUnselected", './app/project/assets/img/avf/' + configModule.getConfigIcon(iconsName, 'outline'));
                    break;
                case "icon":
                    let iconVaue = '';
                    if (imageMenuText.classList.contains("active-label")) {
                        iconVaue = configModule.getConfigIcon(values, 'solid');
                    } else {
                        iconVaue = configModule.getConfigIcon(values, 'outline');
                    }
                    buttonImage.setAttribute("url", `./app/project/assets/img/avf/${iconVaue}`);
                    buttonImage.getElementsByTagName('img')[0].setAttribute("src", `./app/project/assets/img/avf/${iconVaue}`);
                    buttonImage.setAttribute("iconName", values);
                    break;
                case "hassync":
                    if (values) {
                        const greenIndicator = `./app/project/assets/img/avf/greenup.png`;
                        syncEl.setAttribute("url", greenIndicator);
                        syncEl.getElementsByTagName('img')[0].setAttribute("src", greenIndicator);
                    } else {
                        const redIndicator = `./app/project/assets/img/avf/redup.png`;
                        syncEl.setAttribute("url", redIndicator);
                        syncEl.getElementsByTagName('img')[0].setAttribute("src", redIndicator);
                    }
                    break;
            }
        }
    }

    /**
    * Handle the navigation icon and footer pagination visibility
    * Based on the value received on numberOfVerticalPanels
    * @param {number} numberOfVerticalPanels
    */
    function handleVisibility(numberOfVerticalPanels) {
        if (numberOfVerticalPanels <= 0) {
            return;
        }
        // Case 1 is missing. IF case 1 is for horizontal, then even display <=0 should not be checked
        switch (numberOfVerticalPanels) {
            case 2:
                verticalPresentView.gestureable = false;
                verticalPanel3.style.display = 'none';
                verticalPanel4.style.display = 'none';
                next.style.display = 'none';
                singleDisplayMode.style.display = 'block';
                multiDisplayMode.style.display = 'none';
                break;
            case 3:
                updateSubSectionOfVerticalPresent(verticalPanel3, verticalPanel4, false, numberOfVerticalPanels);
                break;
            case 4:
                updateSubSectionOfVerticalPresent(verticalPanel3, verticalPanel4, true, numberOfVerticalPanels);
                break;
            case 5:
                updateSubSectionOfVerticalPresent(verticalPanel5, verticalPanel6, false, numberOfVerticalPanels);
                break;
            case 6:
                updateSubSectionOfVerticalPresent(verticalPanel5, verticalPanel6, true, numberOfVerticalPanels);
                break;
            case 7:
                updateSubSectionOfVerticalPresent(verticalPanel7, verticalPanel8, false, numberOfVerticalPanels);
                break;
            case 8:
                updateSubSectionOfVerticalPresent(verticalPanel7, verticalPanel8, true, numberOfVerticalPanels);
                break;
        }
    }

    /**
     * 
     * @param {Left side of the panel when 2 displays are presented} leftPanel 
     * @param {Right side of the panel when 2 displays are presented} rightPanel 
     * @param {Boolean to check if the right side panel is supposed to be visible or not} isRightPanelDisplayed 
     */
    function updateSubSectionOfVerticalPresent(leftPanel, rightPanel, isRightPanelDisplayed, numberOfVerticalPanels) {
        verticalPresentView.gestureable = true;
        leftPanel.style.display = 'block';
        rightPanel.style.display = (isRightPanelDisplayed) ? 'block' : 'none';
        next.style.display = 'block';
        singleDisplayMode.style.display = 'none';
        multiDisplayMode.style.display = 'block';
        secondNavBtn.style.display = 'inline-block';
        switch (numberOfVerticalPanels) {
            case 3:
            case 4:
                thirdNavBtn.style.display = 'none';
                fourthNavBtn.style.display = 'none';
                break;
            case 5:
            case 6:
                thirdNavBtn.style.display = 'inline-block';
                fourthNavBtn.style.display = 'none';
                break;
            case 7:
            case 8:
                thirdNavBtn.style.display = 'inline-block';
                fourthNavBtn.style.display = 'inline-block';
                break;
        }
        verticalPanelUpdateView();
    }

    prev.addEventListener('click', function () {
        verticalPresentView.previousViewChild();
    });

    next.addEventListener('click', function () {
        verticalPresentView.nextViewChild();
    });

    currentNavBtn.addEventListener('click', function () {
        verticalPresentView.previousViewChild();
    });

    secondNavBtn.addEventListener('click', function () {
        verticalPresentView.nextViewChild();
    });

    verticalPresentView.addEventListener('select', function (e) {
        avfUtility.log('select event with detail: ', e.detail);
        panelSelectedIndex = parseInt(e.detail);
        verticalPanelUpdateView();
    });

    /**
    * 
    */
    function verticalPanelUpdateView() {
        // reset before choosing the right element to highlight
        prev.style.display = 'none';
        next.style.display = 'none';
        currentNavBtn.classList.remove('active');
        secondNavBtn.classList.remove('active');
        thirdNavBtn.classList.remove('active');
        fourthNavBtn.classList.remove('active');

        // if not in the first page, then perform below logic
        if (panelSelectedIndex > 0) {
            prev.style.display = 'block'; // shows "prev" button
        }
        
        //check for "next" button's display status
        const presentationObject = sourceSelectionModule.getPresentationObject();
        const totalViews = Math.ceil(presentationObject.displayCount / 2);
        if (totalViews > (panelSelectedIndex + 1)) {
            next.style.display = 'block';
        }

        switch (panelSelectedIndex) {
            case 0:
                currentNavBtn.classList.add('active');
                break;
            case 1:
                secondNavBtn.classList.add('active');
                break;
            case 2:
                thirdNavBtn.classList.add('active');
                break;
            case 3:
                fourthNavBtn.classList.add('active');
                break;
        }
    }

    function navigateToVerticalPageAndResetView(numberOfVerticalPanels = 0) {
        handleVisibility(numberOfVerticalPanels);
        navigationModule.goToPage(navigationModule.navigationPages.verticalPresentImportPage);
    }

    return {
        updateVerticalPresentationPage,
        navigateToVerticalPageAndResetView
    };

}());