// displayByUtils
//  updateBtns
//      read from storage to determine which button to select, then select that button
//  showGroup
//  hideGroup
//  showGroupIfNec
//  handleAlphaBtnClick
//  handleGroupBtnClick

const displayByUtils = {

    MIN_WIDTH_DISPLAY_BY: 736, // if viewport is narrower than this value, hide the display by group

    updateBtns: function updateBtns() {
        // update the style of the "display by" buttons to indicate which is selected
        // reads data from displayByStateUtils

        const logHeader = 'displayByUtils.updateBtns: ';
        log(logHeader + 'enter');

        const displayAlpha = displayByStateUtils.getDisplayAlpha();
        // are we set to display alphabetically?

        log(logHeader + 'displayAlpha=' + displayAlpha);

        const elemGroup = $('#labGroup');
        // get the label element for "group"

        const elemAlpha = $('#labAlpha');
        // get the label element for "alphabetical"

        if (displayAlpha) {
            // if we are displaying lenses alphabetically, without groups

            elemAlpha.removeClass('btn-outline-info');
            // remove the outline class

            elemAlpha.addClass('btn-info');
            // add the filled class

            elemGroup.removeClass('btn-info');
            // remove the filled class

            elemGroup.addClass('btn-outline-info');
            // add the outline class
        }
        else {
            // if we are displaying lenses by group

            elemGroup.removeClass('btn-outline-info');
            // remove the outline class

            elemGroup.addClass('btn-info');
            // add the filled class

            elemAlpha.addClass('btn-outline-info');
            // add the outline class

            elemAlpha.removeClass('btn-info');
            // remove the filled class
        }

        log(logHeader + 'leave');
    },

    showGroup: function showGroup() {
        log('displayByUtils.showGroup: enter');

        const groupElem = $('#divColFindWhichGroupBy');

        groupElem.addClass('column');
        groupElem.addClass('col-auto');
        // now we can show it

        groupElem.css('display', '');
        // show it

        topBtnsUIUtils.showHideTopBtnsHR();
        // show or hide the top buttons horizontal rule

        log('displayByUtils.showGroup: leave');
    },

    hideGroup: function hideGroup() {
        log('displayByUtils.hideGroup: enter');

        const groupElem = $('#divColFindWhichGroupBy');

        groupElem.removeClass('column');
        groupElem.removeClass('col-auto');

        groupElem.css('display', 'none');
        // now we can hide it

        topBtnsUIUtils.showHideTopBtnsHR();
        // show or hide the top buttons horizontal rule

        log('displayByUtils.hideGroup: leave');
    },

    handleAlphaBtnClick: async function handleAlphaBtnClick() {
        // handle a click in the "alpha" button

        log('handleAlphaBtnClick: enter');

        const tmrAll = tmrUtils.newTimer("handleAlphaBtnClick").start();

        displayByStateUtils.setDisplayAlpha(true);
        // display lenses alphabetically

        displayByUtils.updateBtns();
        // update the "display by" buttons to show the new selection

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

        tmrAll.stop();
        log('handleAlphaBtnClick: TIME: ' + tmrAll);
        log('handleAlphaBtnClick: leave');
    },

    handleGroupBtnClickAsync: async function handleGroupBtnClickAsync() {
        // handle a click in the By Group button

        const logHdr = 'displayByUtils.handleGroupBtnClickAsync: ';
        log(logHdr + 'enter');

        //const tmrAll = tmrUtils.newTimer("handleGroupBtnClick").start();

        displayByStateUtils.setDisplayAlpha(false);
        // display lenses by group

        displayByUtils.updateBtns();
        // update the "display by" buttons to show the new selection

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

        //tmrAll.stop();
        //logTime('handleGroupBtnClick: TIME: ' + tmrAll);

        log(logHdr + 'leave');
    },

    hideDisplayBy: function hideDisplayBy() {
        const logHeader = 'displayByUtils.hideDisplayBy: ';
        log(logHeader + 'enter');

        const rowJQ = $('#divGroupByBtnsNav');

        rowJQ.removeClass('d-flex');
        rowJQ.removeClass('flex-row');
        rowJQ.removeClass('flex-wrap');

        rowJQ.css('display', 'none');
        // hide the row

        lensUIUtils.showHideFindWhichDisplayByColAsNec();
        // show or hide the parent column as necessary

        log(logHeader + 'leave');
    },

    showDisplayBy: function showDisplayBy() {
        const logHeader = 'displayByUtils.showDisplayBy: ';
        log(logHeader + 'enter');

        const rowJQ = $('#divGroupByBtnsNav');

        rowJQ.addClass('d-flex');
        rowJQ.addClass('flex-row');
        rowJQ.addClass('flex-wrap');

        rowJQ.css('display', '');
        // show the row

        lensUIUtils.showHideFindWhichDisplayByColAsNec();
        // show or hide the parent column as necessary

        log(logHeader + 'leave');
    },

    showHideDisplayByAsNec: function showHideDisplayByAsNec() {
        // show or hide the "show by alpha / group" button group as necessary

        const logHeader = 'displayByUtils.showHideDisplayByAsNec: ';
        log(logHeader + 'enter');

        if (viewWidth <= this.MIN_WIDTH_DISPLAY_BY) {
            // if the view is narrow

            displayByUtils.hideDisplayBy();
            // hide the display by button group

            log(logHeader + 'leave');
            return;
        }

        const toShowCount = showHideLensUtils.lensesToShowCount();
        // how many lenses will be displayed on the page?
        // important to call this function and not the one that counts div's on the page
        // because the page may not have been rendered yet when this function is called

        log(logHeader + 'toShowCount=' + toShowCount);

        if (toShowCount < 2) {
            // if fewer than two lenses visible

            log(logHeader + 'fewer than two lenses are visible, so we hide the display by button group');

            displayByUtils.hideDisplayBy();
            // hide the group

            log(logHeader + 'leave');
            return;
        }

        log(logHeader + 'show the display by button group');

        displayByUtils.showDisplayBy();
        // otherwise, show the group

        log(logHeader + 'leave');
    },

    isDisplayByVisible: function isDisplayByVisible() {
        const logHeader = 'displayByUtils.isDisplayByVisible: ';
        log(logHeader + 'enter');

        const rowJQ = $('#divGroupByBtnsNav');

        const displayValue = rowJQ.css('display');
        // get the value of the display item

        const visible = (displayValue !== 'none');
        // if not hidden it's visible

        log(logHeader + 'visible=' + visible);
        log(logHeader + 'leave');

        return visible;
    }
};