const lensClickUtils = {

    handleLoadVideoClick: function handleLoadVideoClick(lensId) {
        log('handleLoadVideoClick: enter');
        log('handleLoadVideoClick: lensId=' + lensId);

        const btnElemId = elemIdUtils.getElemId(lensId, elemIdUtils.BUTTON_LOAD_VIDEO_PREFIX, undefined);

        const loadBtnSelector = '#' + btnElemId;
        // get the jQuery selector for the Load Video button

        $(loadBtnSelector).hide();
        // hide the Load Video button

        var videoElemSize = lensUIUtils._getVideoElemSize(viewWidth, viewHeight);
        // get the desired size of the video element given the view dimensions

        var videoElemWidth = videoElemSize.width;
        var videoElemHeight = videoElemSize.height;

        const videoType = videoUtils.getVideoType(lensId);
        // what type of video will we create?

        log('handleLoadVideoClick: videoType=' + videoType);

        var videoHtml = '';
        var videoUrl = '';
        var vId;
        var videoElemId;

        vId = elemIdUtils.getElemId(lensId, elemIdUtils.VIDEO_CONTENT_PREFIX, true);
        // get the HTML id for the parent of the video element

        log('handleLoadVideoClick: vId=' + vId);

        videoElemId = elemIdUtils.getVideoElemId(lensId);
        // get the id of the video element

        log('handleLoadVideoClick: videoElemId=' + videoElemId);

        if (videoType === videoUtils.VIDEO_TYPE_BLOB) {
            // if blob video

            videoUrl = videoUtils.getVideoUrl(lensId);
            // get the URL of the blob

            videoHTML = videoUtils.getVideoHtml_video(lensId, videoElemWidth, videoElemHeight, videoUrl);
            // get html for the video

            $('#' + vId).append(videoHTML);
            // add the HTML for the video tag to the page

            lensUIUtils.subscribeToEventsForVideoElem(videoElemId);
            // subscribe to the events for the blob video
        }
        else {
            // if Vimeo video

            videoUrl = videoUtils.getIFrameUrl(lensId);
            // get the URL of the iFrame source

            videoHTML = videoUtils.getVideoHtml_iFrame(lensId, videoElemWidth, videoElemHeight, videoUrl);
            // get html for the Vimeo video in an iFrame

            $('#' + vId).append(videoHTML);
            // add the HTML for the iFrame to the page

            lensUIUtils.subscribeToEventsForVimeoVideo(videoElemId);
            // subscribe to the events for the blob video
        }

        log('handleLoadVideoClick: leave');
    },

    handleTabClickAsync: async function handleTabClickAsync(evt) {
        log('handleTabClickAsync: enter');

        const elem = evt.currentTarget;

        if (elem === null) {
            log('handleTabClickAsync: currentTarget is NULL');
            log('handleTabClickAsync: leave');
            return;
        }

        const id = elem.id;
        // get the id of the DOM element

        if (id === null) {
            log('handleTabClickAsync: currentTarget.id is NULL');
            log('handleTabClickAsync: leave');
            return;
        }

        log('handleTabClick: id=' + id);

        const isVideo = id.startsWith(elemIdUtils.LIST_ITEM_VIDEO_TAB_PREFIX);
        // is the tab a Video tab?

        const lensId = lensUIUtils.getLensIdFromElemId(id);
        // convert the element id to a lens id

        log('handleTabClickAsync: lensId=' + lensId);

        if (isVideo) {
            await lensUIUtils._addVideoElemToTabIfNecAsync(lensId);
            // when the user clicks the Video tab, make sure the tab contains a <video> element
        }

        const tabName = lensUIUtils.getTabNameFromElemId(id);
        // get the name of the tab, eg
        //  when
        //  how
        //  examples
        //  video

        log('handleTabClickAsync: tabName=' + tabName);

        selectedTabUtils.setSelectedTab(lensId, tabName);
        // store this value so we can read it when we refresh the page

        displayCurrentLensesCache.clear();
        // clear the lenses HTML cache because the HTML we need to generate has changed

        log('handleTabClickAsync: leave');
    },

    handleCloseBtnClickAsync: async function handleCloseBtnClickAsync(evt) {
        const logHdr = 'lensClickUtils.handleCloseBtnClickAsync: ';
        log(logHdr + 'enter');

        // NOTE: we handle a click in the lens card header close box two different ways.
        // 1) if the user has chosen a lens in the find lens combo box,
        //  clicking the close box clears the combo box.
        // 2) if the user has NOT used the find lens combo box to find a lens,
        //  clicking the close box hides the lens card.

        const foundCount = lensesToFindStorageUtils.count();
        // how many lenses has the user found via Find Lens?

        log('handleCloseBtnClickAsync: foundCount=' + foundCount);

        if (foundCount > 0) {
            // if the user has found a lens using the Find Lens feature

            log(logHdr + 'the user found a lens via the Find Lens feature, so we will respond to the close box click by clearing the combo box');

            lensesToFindStorageUtils.clear();
            // clear the found lens from storage

            tabsCardExpStorageUtils.clear();
            noTabsCardExpStorageUtils.clear();
            // clear both lists of expanded lenses: tabs and no tabs

            prevNextLensUIUtils.showHideClearBtn();
            // hide the clear button

            findLensComponent.option("value", '');
            // clear the lens name from the combo box

            prevNextLensUIUtils.hide();
            // hide the prev/next buttons

            prevNextLensUIUtils.clearSelectedListItem();
            // clear the selected item in the list
            // so the user can select it again

            await lensUIUtils.displayCurrentLensesAsync();
            // display the current set of lenses

            await uiUtils.handleLensCountChangedAsync();

            expandCollapseBtnUtils.showHideExpandCollapseBtnsAndCol();
            // show or hide the expand and collapse all buttons and their parent column as necessary

            log(logHdr + 'leave');

            return;
        }

        // if the user hasn't found a lens via the Find Lens combo box

        log(logHdr + 'the user has NOT found a lens via the Find Lens combo box');

        const showAlert = lensUIUtils._shouldShowCloseAlert();
        // should we show the hide lens alert?

        log(logHdr + 'showAlert=' + showAlert);

        if (showAlert) {
            // if we should show the alert

            var count = userStateUtils.getHideAlertCount();

            count += 1;

            userStateUtils.setHideAlertCount(count);

            const todaysDate = new Date();

            userStateUtils.setHideAlertDate(todaysDate);
            // remember when we showed this alert
            // so we don't show it for another 24 hours

            log(logHdr + 'showing the hide lens alert');

            $('#modalHideAlert').modal();
            // show the hide lens alert
        }

        const elemId = evt.currentTarget.id;
        // get the element id

        log(logHdr + 'elemId=' + elemId);

        const lensId = lensUIUtils.getLensIdFromElemId(elemId);
        // extract the lens id from the DOM element id

        log(logHdr + 'lensId=' + lensId);

        const anyPlaying = videoPlayers.isAnyPlayerPlaying();
        // are any videos currently playing?

        log(logHdr + 'anyPlaying=' + anyPlaying);

        if (anyPlaying) {
            // if any videos are currently playing

            const isTargetVideoPlaying = videoPlayers.isVideoPlaying(lensId);
            // is the video for the card we are about to close playing?
            
            log(logHdr + 'isTargetVideoPlaying=' + isTargetVideoPlaying);

            if (isTargetVideoPlaying) {
                // if the target video is playing

                log(logHdr + 'the target video is playing, so we will stop it');

                const player = videoPlayers.getPlayer(lensId);
                // get the Vimeo video player

                if (typeof player === "undefined") {
                    // if we failed to get the player

                    log(logHdr + 'we FAILED to get the player, so we give up');
                }
                else {
                    // otherwise

                    log(logHdr + 'atc player.pause');

                    player.pause();
                    // stop the video

                    log(logHdr + 'bf player.pause');
                }
            }
        }

        await showHideLensUtils.hideLensByLensIdAsync(lensId);

        log(logHdr + 'leave');
    }
};