var comment_len_max = 300;

var buildSwiper =
    () => {$.each($('.l-cardSwiper'), function(i, el) {
        var whisper_swiper = $(this).find('[data-swiper^="whisper_"]');
            nx = $(this).find('.o-cardSwiperNav--next'),
            pv = $(this).find('.o-cardSwiperNav--prev'),
            pg = $(this).find('.c-cardSwiperPage');

        new Swiper(whisper_swiper, {
            slideClass: 'l-cardSwiper__item',
            wrapperClass: 'l-cardSwiper__wrap',
            watchOverflow: true,
            slidesPerView: 3,
            spaceBetween: 10,
            observer:true,
            observerParents:true,
            breakpointsInverse: true,
            autoHeight:true,
            pagination: {
                el: pg,
                clickable: true,
                bulletClass: 'c-cardSwiperPage__dots',
                bulletActiveClass: 'is-active'
            },
            navigation: {
                nextEl: nx,
                prevEl: pv,
                disabledClass: 'is-disabled'
            },
        });
    });
};

$(document).on('click', '.toolclap', function () {
    let that_whisper_id  = $(this).data('whisper_id');
    let that_whisper_uid = $(this).data('whisper_uid');
    let that_page        = $(this).data('that_page');
    if (typeof(that_whisper_id) == 'undefined' || that_whisper_id == '' || 
        typeof(that_whisper_uid) == 'undefined' || that_whisper_uid == '') {
        form_popup({title:'表情更新失敗'});
        return;
    }
    let that = $(this);

    $.ajax({
        type:'GET',
        url: '/ajax/forum/whisper_add_emoji.php',
        data:{
            whisper_id  : that_whisper_id,
            whisper_uid : that_whisper_uid,
            that_page   : that_page,
        },
        dataType : 'json',
        success: function(result) {
            if (result.status == 'success' && typeof(result.rebuild_emoji) != 'undefined' && result.rebuild_emoji !='') {
                let clap_total = '';
                if (result.rebuild_emoji.clap_total > 0) {
                    clap_total = result.rebuild_emoji.clap_total;
                }

                that.closest('ul.l-toolBar').find('.toolclap span').text(clap_total);
                if (result.rebuild_emoji.clap == 1) {
                    that.find('input').prop('checked', true);
                } else {
                    that.find('input').prop('checked', false);
                }
            } else {
                if (result.link.length > 0 && result.link.length != '') {
                    location.href = result.link;
                } else {
                    form_popup(result.error.msg);
                }
            }
        }
    });
});

$(document).on('click', '.emotion > .l-tab__container > a, .emotion > a, .emotionList > .l-tab__container > a', function(e) {
    let input_area = $(this).closest('#popupWhisper').find('[name="popup_whisper_content"]');
    let add_text   = '[' + $(this).find('img').attr('title') + ']';

    input_area.insertAtCaret(add_text);
});

$(document).on('click', '#add_link', function () {
    let input_area = $(this).closest('#popupWhisper').find('[name="popup_whisper_content"]');
    let add_text   = '[url="請填入連結"]';

    input_area.insertAtCaret(add_text);
});

// disabled positon button
$(document).on('click', '[name="enabled_position"]', function () {
    let that_whisper_id   = $(this).data('whisper_id');
    let that_form_content = $(this).closest('div.l-formRow__content');
    if (that_form_content.find('[name="show_position"]').hasClass('hidden')) {
        $(this).text('關閉定位');
        that_form_content.find('[name="show_position"].hidden').removeClass('hidden');

        let map_dom = document.querySelector('[name="map_'+that_whisper_id+'"]');
        let pos = {}
        if (typeof(that_whisper_id) != 'undeined' && that_whisper_id != 0) {
            let lat = that_form_content.find('div[name="show_position"]').find('[name="lat"]').val();
            let lng = that_form_content.find('div[name="show_position"]').find('[name="lng"]').val();
            pos = {lat: parseFloat(lat), lng:parseFloat(lng)};
        }
        initMap(map_dom, pos);
    } else {
        $(this).text('開啟定位');
        that_form_content.find('[name="show_position"]').addClass('hidden');
        that_form_content.find('[name="use_position_'+that_whisper_id+'"]').prop('checked', false);
    }
});

$(document).on('click', '[name="edit_whisper"]', function () {
    getEditWhisperContent($(this));
});

function getEditWhisperContent(that){
    let that_type       = that.data('type');
    let that_whisper_id = 0;

    if (that_type == 'edit') {
        that_whisper_id = that.data('whisper_id');
    }

    let post_data = {
        'whisper_id' : that_whisper_id,
    };

    $.ajax({
        url:'ajax/forum/get_whisper_content.php',
        method:'GET',
        data: post_data,
        dataType: 'json',
        success:(data) => {
            $.fancybox.open({
                type : 'inline',
                src  : data.content,
                opts : {
                    beforeShow: function() {
                        if (that_type == 'add') {
                            $('[name="popupWhisper_0"]').find('[name="popup_whisper_content"]').val('');
                            $('[name="popupWhisper_0"]').find('[name="whisper_status"] option[value=1]').prop('selected', true);
                            $('[name="popupWhisper_0"] ul.c-dropdown__select li:first > span').html($('[name="whisper_status"] option:selected').html());
                            $('[name="top_0"]').prop("checked", false);
                            $('[name="popupWhisper_0"]').find('[name="position_name"]').val('');
                            $('[name="popupWhisper_0"]').find('[name="use_position_0"]').prop('checked', false);
                        }
                    },
                    afterLoad: (instance, current) => {
                        $('[data-input-type="select"]').transformSelect({
                            dropDownClass: "c-dropdown__select"
                        });

                        current.$content.find('.emotionList').toggleClass('hidden'); // 顯示M版表情符號
                        new Swiper('[data-tab-slider="fixWidth"]', {
                            slideClass: 'c-tabNav__item',
                            wrapperClass: 'c-tabNav__wrap',
                            slidesPerView: 4,
                            watchOverflow: true,
                            spaceBetween: 0,
                            navigation: {
                                nextEl: '.o-tabSwiperNav--next',
                                prevEl: '.o-tabSwiperNav--prev',
                                disabledClass: 'is-disabled'
                            },
                            breakpointsInverse: true,
                            breakpoints: {
                                1024: {
                                    slidesPerView:6
                                }
                            }
                        });

                        local_emotion = JSON.parse(localStorage.getItem("emotion"));
                        if (local_emotion && local_emotion.length > 0) {
                            let content = '';
                            $.each(local_emotion, function(index, value) {
                                if (value) {
                                    let emotionArray = value.split("-");
                                    if (emotionArray.length > 0) {
                                        if ($('link[href^="https:\/\/attach2\.mobile01\.com\/css\/main-set-dark.css"]').length == 1 || $('link[href^="https:\/\/attach2\.mobile01\.com\/css\/mobile-main-set-dark.css"]').length == 1) {
                                            emotionArray[0] = emotionArray[0].replace('/emotions/', '/emotions/dark/');
                                        }
                                        content = content + '<a><img src="'+emotionArray[0]+'" title="'+emotionArray[1]+'" loading="lazy"></a>';
                                    }
                                }
                            });

                            current.$content.find('#favorite_emotion').html(content);
                            current.$content.find('#favorite_emotion_tab').trigger('click');
                        }

                        // 動態調整黑夜模式背景
                        if ($('link[href^="https:\/\/attach2\.mobile01\.com\/css\/main-set-dark.css"]').length == 1 || $('link[href^="https:\/\/attach2\.mobile01\.com\/css\/mobile-main-set-dark.css"]').length == 1) {
                            $(current.$content.find('.l-tab__container')).addClass('l-msgBlock');
                        } else {
                            $(current.$content.find('.l-tab__container')).removeClass('l-msgBlock');
                        }
                    }
                }
            });

            if (that_type == 'edit') {
                let whisper_id = that.data('whisper_id');
                let map_dom    = document.querySelector('[name="map_'+whisper_id+'"]');
                let map_lat    = parseFloat($(data.content).find('[name="lat"]').val());
                let map_lng    = parseFloat($(data.content).find('[name="lng"]').val());
                if (typeof(map_lat) != 'undefined' && typeof(map_lng) != 'undefined' && ! isNaN(map_lat) && ! isNaN(map_lng)) {
                    initMap(map_dom, {lat: map_lat, lng: map_lng});
                }
            }
        }
    });
}

$(document).on('click', "[name='popup_whisper_send']", function () {
    let whisper_id        = $(this).data('whisper_id');
    let whisper_uid       = $(this).data('whisper_uid');
    let that_form_content = $(this).closest('div.l-form__content');
    let image_arr         = [];
    that_form_content.find("input[name='img_files[]']").each(function() {
        image_arr.push($(this).val());
    });

    let use_position = that_form_content.find('[name="use_position_'+whisper_id+'"]:checked').val();

    let post_data = {
        'whisper_id'      : whisper_id,
        'whisper_uid'     : whisper_uid,
        'whisper_content' : that_form_content.find('[name="popup_whisper_content"]').val(),
        'top'             : that_form_content.find('#top_'+whisper_id+':checked').val(),
        'whisper_status'  : that_form_content.find('[name="whisper_status"] option:selected').val(),
        'image_arr'       : image_arr,
    };

    if (typeof(use_position) != 'undefined' && use_position == 1) {
        post_data['lat']           = that_form_content.find('[name="lat"]').val();
        post_data['lng']           = that_form_content.find('[name="lng"]').val();
        post_data['position_name'] = that_form_content.find('[name="position_name"]').val();
    }

    form_post($(this), 'ajax/forum/edit_whisper.php', post_data);
});

var buildListMap = () => {
    $('[name^="listMap_"]').each(function() {
        let that_name = $(this).attr('name');
        let that_lat = $(this).data('lat');
        let that_lng = $(this).data('lng');
        let that_title = $(this).data('title');
        let map_dom  = document.querySelector("[name='"+that_name+"']");
        let title = (typeof(that_title) != 'undefined' && that_title!= '') ? that_title : '我的位置';
        initMap(map_dom, {lat: that_lat, lng: that_lng}, false, title);
    })
};

function initializeAddcomment() {
    $('[name="add_comment_btn"]').fancybox({
        beforeShow : function(instance, current) {
            let that_whisper_id = current.opts.$orig.data('whisper_id');
            $('.emotion').addClass('hidden');
            $(current.src).find('.l-input').removeClass('is-error');
            $(current.src).find('textarea').val('');
            $(current.src).find('.send_whisper_comment').attr('data-whisper_id', that_whisper_id);
        }
    });
}

$(document).on('click', '.send_whisper_comment', function() {
    let that = $(this);
    if (that.attr('disabled') == 'disabled') {
        return false;
    }
    that.attr('disabled', true);
    let whisper_id   = $(this).data("whisper_id");
    let whisper_uid  = $(this).data("whisper_uid");
    let that_comment = $(this).closest('div.l-leaveMsg__msg').find('textarea[name="comment"]');

    let comment_val  = stripHtml(that_comment.val());
    let comment_area = get_msg_area($(this));

    if ($.trim(comment_val) == '') {
        comment_area.addClass('is-error');
        comment_area.find('.o-formError span').html('請輸入留言');
        that_comment.focus();
        that.attr('disabled', false);
        return false;
    }

    if (comment_val.length > comment_len_max) {
        comment_area.addClass('is-error');
        comment_area.find('.o-formError span').html('留言不得超過'+comment_len_max+'個字');
        that_comment.focus();
        that.attr('disabled', false);
        return false;
    }

    localStorageEmotion();

    let post_obj = {
        'mode'        : 'add',
        'whisper_id'  : whisper_id,
        'comment'     : comment_val,
        'whisper_uid' : whisper_uid
    }

    form_post(that, '/ajax/forum/edit_whisper_comment.php', post_obj);
});

$(document).on('keyup', 'textarea[name=comment]', function() {
    let msg_area   = get_msg_area($(this));
    let wordLength = $(this).val().length;

    $(this).closest('.msg-textarea-area').find('.msg-word-count').html(wordLength + '/'+comment_len_max);

    if (wordLength > comment_len_max) {
        msg_area.addClass('is-error');
        msg_area.find('.o-formError span').html('留言不得超過'+comment_len_max+'個字');
    } else {
        msg_area.removeClass('is-error');
    }
});

$(document).on('click', '#send_user_desc', function () {
    let desc_val = $('#whisper_user_desc').val();
    let post_data = {
        'whisper_uid' : $(this).data('whisper_uid'),
        'detail_flag' : $(this).data('detail'),
        'whisper_id'  : $(this).data('whisper_id'),
        'user_desc'   : desc_val,
    };

    $('#whisper_user_desc').closest('.l-input').removeClass('is-error');
    if (typeof(desc_val) == 'undefined' || desc_val.length <= 0) {
        $('#whisper_user_desc').closest('.l-input').addClass('is-error');
        $('#whisper_user_desc').closest('.l-input').find('.o-formError > span').text('請填寫個人簡介');
        return false;
    }

    if (desc_val.length > 100) {
        $('#whisper_user_desc').closest('.l-input').addClass('is-error');
        $('#whisper_user_desc').closest('.l-input').find('.o-formError > span').text('個人簡介長度限制100字');
        return false;
    }

    form_post($(this), 'ajax/forum/edit_whisper_user_desc.php', post_data);
});

var map, infoWindow;
const map_center = { lat: 23.973875, lng: 120.982024 };
const zoom_val   = 16;
const show_position_title = '<span class="map-centent">我的位置</span>';

async function initMap(el, el_center='', showRepositionBtn=true, contentTitle='我的位置'){
    const { Map } = await google.maps.importLibrary("maps");
    map = new google.maps.Map(el, {
        center: map_center,
        zoom: zoom_val
    });

    infoWindow = new google.maps.InfoWindow({
        content: '<span class="map-centent">請稍後正在取得您的定位。</span>',
        position: map_center,
    });

    infoWindow.open(map);
    if (showRepositionBtn) {
        const centerControlDiv = document.createElement("div");
        const centerControl = createResetControl(map, el);
        centerControlDiv.appendChild(centerControl);
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
    }

    if (typeof(el_center.lat) != 'undefined' && typeof(el_center.lng) != 'undefined' && ! isNaN(el_center.lat) && ! isNaN(el_center.lng)) {
        infoWindow.setPosition(el_center);
        infoWindow.setContent('<span class="map-centent t1"><b>'+contentTitle+'</b></span>');
        infoWindow.open(map);
        map.setCenter(el_center);
        map.setZoom(zoom_val);
    } else if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                savePosition(el, position.coords.latitude, position.coords.longitude);
            },
            () => {
                handleLocationError(true, infoWindow, map.getCenter())
            }
        )
    } else {
        handleLocationError(true, infoWindow, map.getCenter());
    }
}

// position error
async function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos)
    infoWindow.setContent(
        browserHasGeolocation
        ? '<span class="map-centent">請打開定位服務</span>'
        : '<span class="map-centent">Error: Your browser doesnt support geolocation.</span>'
    )
    infoWindow.open(map);
}

// build reset position button
function createResetControl(map, el) {
    const controlButton = document.createElement("button");

    controlButton.style.backgroundColor = "#fff";
    controlButton.style.border          = "2px solid #fff";
    controlButton.style.borderRadius    = "3px";
    controlButton.style.boxShadow       = "0 2px 6px rgba(0,0,0,.3)";
    controlButton.style.color           = "rgb(25,25,25)";
    controlButton.style.cursor          = "pointer";
    controlButton.style.fontSize        = "16px";
    controlButton.style.lineHeight      = "38px";
    controlButton.style.margin          = "8px 0 22px";
    controlButton.style.padding         = "0 5px";
    controlButton.style.textAlign       = "center";
    controlButton.textContent           = "重新定位";
    controlButton.type                  = "button";

    controlButton.addEventListener("click", () => {
        navigator.geolocation.getCurrentPosition(
            (position) => {
                savePosition(el, position.coords.latitude, position.coords.longitude);
            },
            () => {
                handleLocationError(true, infoWindow, map.getCenter())
            }
        )
    });
    return controlButton;
}

// save position
function savePosition(el, lat, lgn) {
    const pos = {
        lat: lat,
        lng: lgn,
    }

    $('[name="'+el.getAttribute('name')+'"]').closest('div[name="show_position"]').find('[name="lat"]').val(pos.lat);
    $('[name="'+el.getAttribute('name')+'"]').closest('div[name="show_position"]').find('[name="lng"]').val(pos.lng);

    infoWindow.setPosition(pos);
    infoWindow.setContent(show_position_title);
    infoWindow.open(map);
    map.setCenter(pos);
    map.setZoom(zoom_val);
}

//檢查登入
function chk_comment_login(id, page_type='') {
    let target_link = '';
    if (page_type == 'detail') {
        target_link = 'userwhisperdetail.php?id='+id
    } else if (page_type == 'list') {
        target_link = 'userwhisper.php?id='+id;
    }
    check_login(target_link)
}