let htmlwidth = document.documentElement.clientWidth || document.body.clientWidth;
let isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
let os = (() => {
    var ua = navigator.userAgent,
        isWindowsPhone = /(?:Windows Phone)/.test(ua),
        isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
        isAndroid = /(?:Android)/.test(ua),
        isFireFox = /(?:Firefox)/.test(ua),
        isChrome = /(?:Chrome|CriOS)/.test(ua),
        isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
        isPhone = /(?:iPhone)/.test(ua) && !isTablet,
        isPc = !isPhone && !isAndroid && !isSymbian;
    return {
        isTablet: isTablet,
        isPhone: isPhone,
        isAndroid: isAndroid,
        isPc: isPc
    };
})();

/* 
* 验证邮箱
* emailStr - 用户邮箱
* @param - 邮箱字符串
* @return - 验证结果 true/false
*/
function checkEmail(emailStr) {
    let reg = /^[a-z0-9]([a-z0-9]*[-_\.]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.][a-z]{2,10}([\.][a-z]{2})?$/i;
    return reg.test(emailStr);
}

/**
 * array look up
 * @param {array} arr 待查数组
 * @param {string} key 待查键
 * @param {string} val 待查值
 */
var arrayLookup = function (arr, key, val) {
    for (var i = 0; i < arr.length; i++) {
        if (arr[i][key] == val) {
            return true;
        } else {
            return false;
        }
    }
}

/*
* show pop up
*
*/
var showPopup = function () {
    $('.oki-popup').addClass('active');
    $('.oki-popup-mask').addClass('active');
}

/*
* close pop up
*/
var closePopup = function () {
    $('.oki-popup').removeClass('active');
    $('.oki-popup-mask').removeClass('active');
}

$(document).ready(function () {

    //show loading when submit form
    $('form').submit(function () {
        $('.wrap').addClass('loading');
        $('button[type=submit]').attr('disabled','disabled');
    });


    /* initialize swiper when document ready */

    //index coupon swiper
    new Swiper('.coupon-swiper', {
        // Optional parameters
        direction: 'horizontal',
        loop: true,
        slidesPerView: 1,
        spaceBetween: 10,
        autoplay: true,
        pagination: {
            el: '.coupon-swiper-container .pagination-coupon',
            clickable: true,
        },
    })

    //index promotion swiper
    var swiper_index = new Swiper('.index-promotion-container .incomplete-slider-swiper', {
        // Optional parameters
        direction: 'horizontal',
        updateOnWindowResize: true,
        breakpoints: {
            0: {
                loop: true,
                slidesPerView: 1.2,
                spaceBetween: 0,
                allowTouchMove: true,
                navigation: {
                    nextEl: '.btn-next-index-promot',
                    prevEl: '.btn-prev-index-promot',
                },
            },
            768: {
                slidesPerView: 2.3,
                allowTouchMove: true,
                navigation: {
                    nextEl: '.btn-next-index-promot',
                    prevEl: '.btn-prev-index-promot',
                },
            },
            1300: {
                loop: false,
                slidesPerView: 4,
                allowTouchMove: false,
            }
        }
    })

    let init_search_swiper = () => {
        //index search type swiper
        new Swiper('.index-img-grids.active .incomplete-slider-swiper', {
            // Optional parameters
            direction: 'horizontal',
            loop: false,
            slidesPerView: 1.5,
            spaceBetween: 0,
            breakpoints: {
                768: {
                    slidesPerView: 3.2,
                },
                1024: {
                    loop: true,
                    slidesPerView: 3,
                    navigation: {
                        nextEl: '.btn-next-search',
                        prevEl: '.btn-prev-search',
                    },
                },
                1300: {
                    loop: true,
                    slidesPerView: 5,
                    navigation: {
                        nextEl: '.btn-next-search',
                        prevEl: '.btn-prev-search',
                    },
                }
            }
        })
    };
    init_search_swiper();

    //promotion post swiper
    new Swiper('.promotion-post-swiper', {
        // Optional parameters
        direction: 'horizontal',
        loop: true,
        slidesPerView: 'auto',
        navigation: {
            nextEl: '.promotion-post-btn-next',
            prevEl: '.promotion-post-btn-prev'
        },
        breakpoints: {
            415: {
                slidesPerView: 2,
            },
            1025: {
                slidesPerView: 3,
                navigation: {
                    nextEl: '.oki-swiper-btn-next',
                    prevEl: '.oki-swiper-btn-prev',
                },
            }
        }
    })

    //detail coupon swiper
    new Swiper('.box-content-coupon-swiper .incomplete-slider-swiper', {
        // Optional parameters
        direction: 'horizontal',
        loop: true,
        autoplay: {
            delay: 5000,
        },
        pagination: {
            el: '.box-content-coupon-swiper .pagination-coupon',
            clickable: true,
        },
        breakpoints: {
            0: {
                slidesPerView: 1.2,
                spaceBetween: 0,
            },
            768: {
                slidesPerView: 2.3,
            },
            1024: {
                slidesPerView: 3,
            }
        }
    })

    /* SearchItem Drop Down */
    $(document).on('click', '.search-container .search-select-container', function (e) {
        e.stopPropagation();
        $('.search-container .search-sub-select-container').removeClass('active');
        $(this).find('.search-sub-select-container').addClass('active');
        $('.mask').addClass('active');
        if (os.isPhone || os.isTablet) {
            $('.search-container .search-select-container').addClass('active-mobile');
        }
    });

    /* Remove Drop Down */
    function hideSelectContainer() {
        $('.search-container .search-sub-select-container').removeClass('active');
        $('.mask').removeClass('active');
        if (os.isPhone || os.isTablet) {
            $('.search-container .search-select-container').removeClass('active-mobile');
        }
    }

    $(document).on('click', '.mask,.search-container:not(.search-select-container)', function (e) {
        e.stopPropagation();
        hideSelectContainer();
    });

    /* Select search select item */
    $(document).on('click', '.search-container .search-sub-item', function (e) {
        e.stopPropagation();
        let val = e.currentTarget.dataset.val;
        let id = e.currentTarget.dataset.id;
        let type = e.currentTarget.dataset.type;
        if (type == 'area') {
            $('.search-input-area-show').val(val);
            let pid = e.currentTarget.dataset.pid;
            $('.search-input-area').val(pid);
            $('.search-input-districts').val(id);
        } else if (type == 'dishes') {
            $('.search-dishes > input').val(val)
        }
        hideSelectContainer();
    })

    /* Select search select item */
    $(document).on('click','.search-container .search-sub-title',function(e){
        e.stopPropagation();
        let type = e.currentTarget.dataset.type;
        let val = e.currentTarget.innerHTML;
        if(type == 'area'){
            let id = e.currentTarget.dataset.id;
            $('.search-input-area').val(id);
            $('.search-input-districts').val('any');
            $('.search-input-area-show').val(val);
        }else if(type == 'dishes'){
            $('.search-dishes > input').val(val)
        }
        hideSelectContainer();
    })

    $(document).on('change', '.search-select-container select', function (e) {
        hideSelectContainer();
    })

    /* Tab choose swiper  */
    $(document).on('click', '.index-tab-choose .tab', function () {
        let i = $('.index-tab-choose .tab').index($(this));
        $('.index-tab-choose .tab').removeClass('active').eq(i).addClass('active');
        $('.tab-choose-container .img-grids-container').removeClass('active').eq(i).addClass('active');

        //reinit swiper
        init_search_swiper();
    });

    /* Mobile Menu Show */
    $(document).on('click', '.header .icon-menu', function (e) {
        $('.header').addClass('active').find('.menu-container-mobile').slideDown();
        document.documentElement.style.overflow = 'hidden';
    });

    /* Mobile Menu Hide */
    $(document).on('click', '.header .icon-close', function (e) {
        $('.header').removeClass('active').find('.menu-container-mobile').slideUp();
        document.documentElement.style.overflow = '';
    });

    if (isMobile) {
        /* Change Images to Mobile Size */
        $('.introSwiper2 .promoteItem').each(function () {
            let mobileImg = $(this).find('.imgBox').data('bgmobile');
            $(this).find('.imgBox').css('background-image', `url(${mobileImg})`)
        })
    }

    /* Show back top when scroll window */
    let scroll_height = 100;
    let show_back_top = (top) => {
        if (!top) {
            top = window.scrollY;
        }
        if (top >= scroll_height) {
            $('.back-top').addClass('active');
        } else {
            $('.back-top').removeClass('active');
        }
    }
    show_back_top();
    $(window).scroll(function (e) {
        show_back_top(e.currentTarget.scrollY);
    });

    /* Fix promotion post title bar */
    if ($(document).has('.promotion-post').length) {
        let content_top = $('.promotion-post .content').offset().top;
        $(window).scroll(function (e) {
            if (window.scrollY > content_top - parseInt($('.header').height()) - parseInt($('.promotion-post .content').css('margin-top'))) {
                $('.promotion-fixed-bar').addClass('active');
            } else {
                $('.promotion-fixed-bar').removeClass('active');
            }
        })
    }

    /* Detail page fixed tab bar */
    if ($(document).has('.detail-tab-choose').length) {
        let tab_choose_top = $('.detail-tab-choose').offset().top;
        $(window).scroll(function (e) {
            if (window.scrollY > tab_choose_top - parseInt($('.header').height())) {
                let width = $('.content-tab-container').width();
                $('.detail-tab-choose').addClass('scroll-active').css('width', `${width}px`);
            } else {
                $('.detail-tab-choose').removeClass('scroll-active').css('width', 'auto');
            }
        })
    }

    /* Back top */
    $(document).on('click', '.back-top', function (e) {
        // 取消冒泡事件
        e.stopPropagation();

        $('html,body').animate({
            'scrollTop': 0
        }, 1000);
    })
    /* Tab to tab-content */
    $(document).on('click', '.detail-tab-choose .tab', function (e) {
        let type = e.currentTarget.dataset.type;
        let el = document.getElementById(type);
        let header_height = parseInt($('.header').height());
        let top = parseInt(el.offsetTop - header_height - 10);
        $(this).addClass('active').siblings().removeClass('active');

        $('html,body').animate({
            'scrollTop': top
        }, 500);
    });

    /* Tab choose for login/register container */
    $(document).on('click', '.member-tab .tab', function (e) {
        let i = $('.member-tab .tab').index($(this));
        $(this).addClass('active').siblings().removeClass('active');
        $('.member-container .form-container > div').eq(i).addClass('active').siblings().removeClass('active');
    })

    /* Tab choose of register-form */
    $(document).on('click', '.lang-choose > div', function (e) {
        let val = $(this).data('lang');
        $(this).addClass('active').siblings().removeClass('active');
        $('.preference_lang').val(val);
    })

    /* Init input phone prefix  */
    let input = document.querySelector("#phone");
    if (input) {
        let iti = window.intlTelInput(input, {
            separateDialCode: true,
            preferredCountries: ['hk', 'mo', 'cn'],
            formatOnDisplay: false,
            utilsScript: '/assets/intl-tel-input/build/js/utils.js'
        });
        // setNumber for account form input
        if ($(document).has('#phone').length > 0) {
            let phoneNum = $('#phone').data('val');
            iti.setNumber(phoneNum);
        }
        $('#phone_ccode').val(iti.getSelectedCountryData().dialCode)
        input.addEventListener("countrychange", function () {
            $('#phone_ccode').val(iti.getSelectedCountryData().dialCode);
        });
    }

    let validate_email = function (email) {
        //validate email format
        if (!checkEmail(email)) {
            $('.email').addClass('error').next().addClass('active');
            return false;
        } else {
            $('.email').removeClass('error').next().removeClass('active');
            return true;
        }
    }

    let validate_pwd = function (pwd1, pwd2) {
        // validate confirm password
        if (pwd1 != pwd2) {
            $('#pwd2').addClass('error').next().addClass('active');
            $('#pwd2').val('');
            $('#pwd1').val('');
            return false;
        } else {
            $('#pwd2').removeClass('error').next().removeClass('active');
            return true;
        }
    }

    // validate phone format
    let validate_phone = function (phone) {
        // let reg = /^[0-9]+$/g;
        // if(!reg.test(phone)){
        if(phone == '' || isNaN(phone)){
            $('#phone').addClass('error').parent().next().addClass('active');
            return false;
        }else{
            $('#phone').removeClass('error').parent().next().removeClass('active');
            return true;
        }
    }

    /* Disable submit button after submit once */
    // $(document).on('submit', '.oki-form', function (e) {
    $('.oki-form').submit(function (e) {
        let isDisabled = $(this).find('button[type=submit]').hasClass('disabled');
        let canSubmit = true;
        if(!isDisabled){
            if($(this).has('.email').length > 0){
                let email = $('.email').val();
                if(email.length > 0){
                    if(!validate_email(email)){
                        canSubmit = false;
                        $('.wrap').removeClass('loading');
                        $('button[type=submit]').removeAttr('disabled');
                        return false;
                    }
                }
            }
            if ($(this).has('#phone').length > 0) {
                let phone = $('#phone').val();
                console.log(phone)
                if (!validate_phone(phone)) {
                    canSubmit = false;
                    $('.wrap').removeClass('loading');
                    $('button[type=submit]').removeAttr('disabled');
                    return false;
                }
            }
            if($(this).has('#pwd1').length > 0 && $(this).has('#pwd2').length > 0){
                let pwd1 = $('#pwd1').val();
                let pwd2 = $('#pwd2').val();
                if(pwd1.length > 0 || pwd2.length > 0){
                    if(!validate_pwd(pwd1, pwd2)){
                        canSubmit = false;
                        $('.wrap').removeClass('loading');
                        $('button[type=submit]').removeAttr('disabled');
                        return false;
                    }
                }
            }
            if(canSubmit){
                $(this).find('button[type=submit]').addClass('disabled');
                return true;
            }
        }else{
            $('.wrap').removeClass('loading');
            $('button[type=submit]').removeAttr('disabled');
            return false;
        }
    })


    //set input[type=date] placeholder
    $(document).on('change',"#date",function(){
        if($(this).val().length > 0){
            $(this).addClass("full");
        }else{
            $(this).removeClass("full");
        }
    });

    //close pop up
    $(document).on('click', '.oki-popup .close-popup, .oki-popup .continue-popup', function () {
        closePopup();
    })
})