(function (glb) {
    var gTypeDomMap = new Map();//column type --> which condition area show/hide and use
    var gAllDomRange = new Map();//range1 div,  range2 div
    function initTypeMap() {
        let numRangeDomRef = null, startNumDomRef = null, endNumDomRef = null;
        let dateRangeDomRef = null, startDateDomRef = null, endDateDomRef = null;
        numRangeDomRef = document.querySelector('#numRangePicker');
        if (numRangeDomRef) {
            startNumDomRef = numRangeDomRef.children[0];
            endNumDomRef = numRangeDomRef.children[2];
        }
        dateRangeDomRef = document.querySelector('#dateRangePicker');
        if (dateRangeDomRef) {
            startDateDomRef = dateRangeDomRef.children[0];
            endDateDomRef = dateRangeDomRef.children[2];
        }
        let arrNum = [numRangeDomRef, startNumDomRef, endNumDomRef];
        let arrDate = [dateRangeDomRef, startDateDomRef, endDateDomRef];
        //Dom area information
        gAllDomRange.set('NUM_ELE', arrNum);
        gAllDomRange.set('DATE_ELE', arrDate);
        //Database data type -->  Dom area
        gTypeDomMap.set('INT', 'NUM_ELE');
        gTypeDomMap.set('TINYINT', 'NUM_ELE');
        gTypeDomMap.set('VARCHAR', 'NUM_ELE');//use number temporary for string
        gTypeDomMap.set('DATETIME', 'DATE_ELE');
        gTypeDomMap.set('OtherOutofScope', 'NUM_ELE');

        //every time column changed, show/hide the area based on column data type.
        $("#column").on("change", onChangeRangeByQueryConditionType);

        //call it for 1st time hide/show selected value.
        onChangeRangeByQueryConditionType();
    };
    function onChangeRangeByQueryConditionType() {
        let showAreaKey = getAreaKey();
        gAllDomRange.forEach(function (curval, curkey, mapitself) {
            let curDomTmp = $(curval[0]);
            if (curkey === showAreaKey) {
                if (curDomTmp.hasClass("hidden"))
                    curDomTmp.removeClass("hidden");
                //if (!curDomTmp.hasClass("show"))
                //    curDomTmp.addClass("show");
            }
            else //hide
            {
                //if (curDomTmp.hasClass("show"))
                //    curDomTmp.removeClass("show");
                if (!curDomTmp.hasClass("hidden")) {
                    curDomTmp.addClass("hidden");

                    //clear value when turn to hidden ???
                    $(curval[1]).val = '';
                    $(curval[2]).val = '';
                }
            }

        });

    };
    function getAreaKey() {
        let conditionType = "INT";
        let showAreaKey = 'NUM_ELE';
        if (document.querySelector("#column").selectedOptions && document.querySelector("#column").selectedOptions.length > 0)
            conditionType = document.querySelector("#column").selectedOptions[0].dataset.coltype;
        if (gTypeDomMap.has(conditionType)) {
            showAreaKey = gTypeDomMap.get(conditionType);
        }
        else {
            showAreaKey = gTypeDomMap.get('OtherOutofScope');
        }
        return showAreaKey;
    };
    function getASelected() {
        let showAreaKey = getAreaKey();
        let domRefArr = gAllDomRange.get(showAreaKey);
        if (showAreaKey === 'DATE_ELE')
            return "'" + $(domRefArr[1]).val() + "'"; //for database mysql: between '2023-06-01' and '2023-06-06'
        else
            return $(domRefArr[1]).val();
    };
    function getBSelected() {
        let showAreaKey = getAreaKey();
        let domRefArr = gAllDomRange.get(showAreaKey);
        if (showAreaKey === 'DATE_ELE')
            return "'" + $(domRefArr[2]).val() + "'"; //for database mysql: between '2023-06-01' and '2023-06-06'
        else
            return $(domRefArr[2]).val();
    };

    let retObj = {
        initTypeMap: initTypeMap,
        getASelected: getASelected,
        getBSelected: getBSelected
    }
    glb.SwitchNumDateRange = retObj;
})(window);