var socket;

// 名前空間
var CHAT_SOCKET = {};

CHAT_SOCKET.connectSocket = function () {
    if (IS_ONLINE == 'true') {
        socket = io(CHAT_SERVER_URL);
        console.log(socket);
        setSocketAction();
    } else {
        //オフラインの場合、DBからルーム一覧を表示。
        if (CHAT_UTIL.isIOS()) {
             //TODO IOSの場合
        } else if (CHAT_UTIL.isAndroid()) {

        }
    }
};

/* ---------------------------------------------------
 * Socket Connect/Disconnectc
 * --------------------------------------------------- */
function setSocketAction () {
    socket.on('connect', function() {
        // socketが接続されたらチャット画面で画面を更新する
        $('.overlay').removeClass('active undismissable');
        // loadingIndicatorを表示
        CHAT_UI.showLoadingIndicator();
        // チャットルームに入場する際、sid, loginId, shopName, roomId, roomNameの情報を取得しNodeJsに渡す
        if (CHAT_UTIL.isIOS()) {
            webkit.messageHandlers.loginInfoRequestMessageHandlerId.postMessage({});
        } else if (CHAT_UTIL.isAndroid()) {
            android.getLoginParameter();
        }
        CHAT_UI.dismissLoadingIndicator();
    });

    socket.on('disconnect', function() {
        console.log('disconnect');
        //socketが切断されたら黒画面で画面を更新する
        $('.overlay').addClass('active undismissable');
        //alert('Disconnected from the server');
        CHAT_UI.dismissLoadingIndicator();
    });

    socket.on('connect_error', function() {
        console.log('connect_error');
        CHAT_UI.dismissLoadingIndicator();
    });

    /* ----------------------------------------------------------------------
     *
     * Chat Room List Tab
     *
     * ---------------------------------------------------------------------- */

    // Update Room List
    //TODO APIの連動が終わったら削除予定
    /*socket.on('refreshRoomList', function(rooms, activeRoomId = null){
        CHAT.globalIsInvite = false;


        // #36146に対応
        let keywordSearchMode = false;
        if ($('#room-search').val().length > 0) {
            keywordSearchMode = true;
        }

        $('#room_list').html('');
        let roomListTitle = getLocalizedString("roomListTitle");
        $('.titleRoomName').text(roomListTitle);

        if (rooms.length === 0) {
            // #36146に対応
            // 検索結果がない場合のメッセージを追加
            if (!keywordSearchMode) {
                let emptyListString = getLocalizedString("roomListEmptyString")
                $('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`);
            } else {
                let emptyListString = getLocalizedString("searchRoomListEmptyString")
                $('#room_list').append(`<center class="text-secondary">${emptyListString}</center>`);
            }
        }

        // チャットルームの様式を読み込む
        const template = $('#room-template').html();

        rooms.forEach( function(room) {
            room.profileImagePath = ASSET_PATH + 'images/user-profile.png'

            if (room.message) {
                room.message = room.message.toString()
            } else {
                room.message = getLocalizedString("noMessages")
            }

            let html = Mustache.render(template, {
                roomName: room.roomName,
                roomId: room.roomId,
                profileImage: room.profileImagePath,
                active: activeRoomId === room.roomId ? 'active_chat' : null, // 現在、入っているルームだとhilight表示
                lastMessage: room.message.includes('<img') ? getLocalizedString("image") : (keywordSearchMode ? `${room.message}${getLocalizedString("searchResult")}` : room.message) ,
                time: room.time ? CHAT_UTIL.formatDate(room.time.time).createdAt : '',
                unreadMsgCnt: room.unreadCnt,
                userCnt: room.userCnt
            });

            // Click event
            let obj = $(jQuery.parseHTML(html)).on('click',function(){
                if (activeRoomId === room.roomId) {
                    // 既存チャットルームをタッチする場合、チャット画面に遷移
                    $('#pills-chat-tab').tab('show');
                } else {
                    // loadingIndicatorを表示しない
                    CHAT_UI.showLoadingIndicator();
                    // 新しいチャットルームをタッチする場合、チャットルームの接続処理を実行
                    socket.emit('joinRoom', room.roomId, room.roomName, function (){
                        CHAT.saveRoomInfo(room.roomId, room.roomName);
                        $('#messages').html('');
                        // チャットルーム名を変更する
                        $('.titleRoomName').text(room.roomName).data('roomName', room.roomName);
                    });
                }
            });
            // チャットルームリストに追加する
            $('#room_list').append(obj);
        });

        // #36146に対応
        if(rooms.length > 0) {
            if(!keywordSearchMode) {
                $(".roomListIcon").show()
                $('#roomDeleteButton, #arrangeRooms').show()
            } else {
                $(".roomListIcon").show()
                $('#roomDeleteButton, #arrangeRooms').hide()
            }
        } else {
            if(!keywordSearchMode) {
                $(".roomListIcon").hide()
            } else {
                $(".roomListIcon").show()
                $('#roomDeleteButton, #arrangeRooms').hide()
            }
        }

        $('#createChatRoom').show()

        // Rotate
        if(CHAT_UI.isLandscapeMode()) {
            $(".chat_list").removeClass("col-12").addClass("col-6");
        }

        $("#userSelectionDeleteBtn").hide();
        // チャットルームリスト画面に遷移
        $('#pills-chatlist-tab').tab('show');

        // loadingIndicatorを表示しない
        CHAT_UI.dismissLoadingIndicator();
    });*/

    // New Message
    // #36170
    socket.on('newMessage', function(message, roomId, roomName) {
        let messageTime = CHAT_UTIL.formatDate(message.createdAt);
        var userMessageTemplate;
        $.get({ url: "./template/template_user_message.html", async: false }
          , function(text) {
            userMessageTemplate = text;
        });
        var myMessageTemplate;
        $.get({ url: "./template/template_my_message.html", async: false }
          , function(text) {
            myMessageTemplate = text;
        });
        var systemMessageTemplate;
        $.get({ url: "./template/template_system_message.html", async: false }
          , function(text) {
            systemMessageTemplate = text;
        });

        let template = userMessageTemplate;
        if (message.id === socket.id) {
            // ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する
            template = myMessageTemplate;
        }

         message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath)
         try {
             message.text = decodeURIComponent(message.text)
         } catch(e) {
             message.text = message.text
         }
         var replacePath = message.text;
         replacePath = replacePath.replaceAll('?fileName=', '?sid=' + CHAT.globalLoginParameter.sid + '&fileName=');
         message.text = replacePath;
         let html = Mustache.render(template, {
             text: message.text,
             from: message.from,
             profileImage: message.profileImagePath,
             createdAtDay: messageTime.createdAtDay,
             createdAtTime: messageTime.createdAtTime
         });
         // イメージの場合、img tagを追加する
         html = message.text.includes('attachedImages') || message.text.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
         $('#messages').append(html);

         // 画像、動画の描画を待ってからスクロール
        setTimeout(function () {
            CHAT_UI.scrollToBottom();
        }, 300);
    });

    // Notification
    socket.on('newNotification', function(keyword, event) {
        var notificationString = getLocalizedString(event, keyword)
        $('#messageNotification').finish().text(notificationString).delay(500).slideDown().delay(1500).slideUp();
    });

    // 新しいメッセージを受信する場合の処理
    // #36170
//    socket.on('loadMessages', function(messages, shopMemberId, users, roomId, roomName){
//        let jQueryMessages = $('#messages');
//        // スクロールの変化を防ぐため以前画面の高さを保存する
//        let beforeHeight = jQueryMessages.prop('scrollHeight');
//        // メッセージ文字列の生成
//        let workVal = "";
//        messages.forEach(function(message) {
//            let template = $('#message-template').html();
//            if (message.shopMemberId == shopMemberId) {
//                 template = $('#message-template-me').html();
//            }
//            let messageTime = CHAT_UTIL.formatDate(message.time.time);
//
//            if (users != undefined) {
//                let user = users.find((user) => user.loginId == message.loginId)
//
//                // userProfilePathが使えるpathかをcheckして使えないpathの場合、default画像の経路に変更
//                if (user) {
//                     message.profileImagePath = CHAT.getProfileImgUrl(user.profileImagePath)
//                } else {
//                     message.profileImagePath = CHAT.getProfileImgUrl("")
//                }
//            } else {
//                message.profileImagePath = CHAT.getProfileImgUrl(message.profileImagePath)
//            }
//
//             // #36147
//             message.message = message.message.toString();
//             var replacePath = message.message;
//             replacePath = replacePath.replaceAll('/acms',CHAT_SERVER_URL+'/acms');
//             message.message = replacePath;
//             let html = Mustache.render(template, {
//                 text: message.message,
//                 from: message.loginId,
//                 profileImage: message.profileImagePath,
//                 createdAtDay: messageTime.createdAtDay,
//                 createdAtTime: messageTime.createdAtTime
//             });
//             html = message.message.includes('attachedImages') || message.message.includes('attachedVideos') ? CHAT_UTIL.htmlDecode(html) : html;
//             workVal = html + workVal;
//        })
//
//        // メッセージの画面描画
//        jQueryMessages.prepend(workVal);
//        if (beforeHeight !== 0) {
//            // 追加のメッセージ読み込み時は読み込み前のスクロール位置を維持
//            setTimeout(function () {
//                jQueryMessages.scrollTop(jQueryMessages.prop('scrollHeight') - beforeHeight);
//            }, 400);
//        } else {
//            // 新規に入室の場合は最下部へスクロール
//            CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom);
//            // タブレット等、画面サイズが大きい場合、スクロール出来なくならないよう追加で10件メッセージを取得
//            if ($(window).height() > jQueryMessages.height()) {
//                $('#messages').scroll();
//            }
//        }
//
//        // ユーザ削除ボタン表示しない
//        $("#userSelectionDeleteBtn").hide();
//
//        CHAT_UI.dismissLoadingIndicator();// add some...
//
//        // チャットに遷移する
//        $('#pills-chat-tab').tab('show');
//    });

    // Update User List In Room
    // サイドバーのユーザーリストアップデート。
/*    socket.on('updateUserList', function(users, onlineUsers) {
        console.log(users);
        console.log(onlineUsers);

        if (users.length > 0) {
            $('#users').removeData();
            $('#users').data(users);
        } else {
            const data = $('#users').data();
            if (data && Object.keys(data).length > 0) {
                 users = Object.keys(data).map(function(key) {
                     return data[key];
                });
            }
        }

        const ul = $('<ul/>', {class: 'list-unstyled components'});
        // ユーザーリストを入れる前にユーザー招待ボタンを入れてくれる。
        let inviteString = getLocalizedString("inviteUsersButton")

        ul.append($('<li/>').append(`<a>${inviteString} <i class='fa fa-user-plus'><i/></a>`).on('click', function(event) {
            $('#dismiss').click();
            // loadingIndicatorを表示
            CHAT_UI.showLoadingIndicator();
            let isInvite = true;
            CHAT.globalIsInvite = isInvite;
            socket.emit('getGroupList', isInvite);
        }));

        // ユーザーリストを入れる
        users.forEach(function(user) {
             let li = $('<li/>');
             let a = $('<a/>').text(user);
             if (onlineUsers.includes(user)) {
             // 接続されているユーザにバッジを付ける。
             a.append($('<span/>',{class:'badge badge-success'}).text('online'));
            }
            li.append(a);
            ul.append(li);
        });
    $('#users').html(ul);
    });*/

    // Update Group List(Invite)
    socket.on('refreshGroupList', function(groups, isInvite) {
        $('#group_list').html('');
        const template = $('#group-template').html();
        if (groups.length === 0) {
            $('#group_list').append('<center class="text-secondary">'+ getLocalizedString(everyoneIsHere) +'</center>');
        }
        // グループ名と人数を表記する。
        groups.forEach(function(group) {
            let html = Mustache.render(template, {
                name: group.groupName,
                info: group.memberCnt + getLocalizedString("people")
            });
            // グループをクリックすると、該当グループのユーザーリストを読み込むようにイベントを与える
            let obj = $(jQuery.parseHTML(html)).on('click', function() {
                // loadingIndicatorを表示
                CHAT_UI.showLoadingIndicator();
                socket.emit('getUserListInGroup', group.groupId, isInvite);
                $('#groupName').text(group.groupName);
            });
            $('#group_list').append(obj);
        });

        // Rotate
        if (CHAT_UI.isLandscapeMode()) {
            $(".group_list").addClass("col-6").removeClass("col-12");
        }

        // Set Title
        let memberSelectTitle = getLocalizedString("groupSearch")

        $('#pills-group-tab').tab('show');

        $('#backButton').show();

        if (isInvite) {
            $('.titleRoomName').text(memberSelectTitle);
            $('#newRoomName, .roomListIcon, .chatRoomIcon').hide();
            $('#userSelectionConfirmBtn').show();
            $("#userSelectionConfirmBtn").off().on('click', function() {
                CHAT_UI.setConfirmButtonEvent(isInvite);
            });
        } else {
            $('.titleRoomName').text(memberSelectTitle);
            $('.roomListIcon, .chatRoomIcon, #newRoomName').hide();
            $('#userSelectionConfirmBtn').show();
            $("#userSelectionConfirmBtn").off().on('click', function() {
                CHAT_UI.setConfirmButtonEvent(isInvite);
            });
        }

        if (CHAT.globalSelectedUserList.length > 0) {
            $('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
        } else {
            $('#userSelectionLength').text('');
        }

        $('#backButton').off().on('click', function() {
            // loadingIndicatorを表示
            CHAT_UI.showLoadingIndicator();
            if (isInvite) {
                $('#pills-chat-tab').tab('show');
            } else {
                if (IS_ONLINE == 'true') {
                    android.updateRoomList();
                    CHAT_UI.refreshRoomList(chatRoomType.DM);
                    CHAT_UI.dismissLoadingIndicator();
                }
            }
        });
    });

    // Update User List(Invite)
    // #36170
    socket.on('refreshUserListInGroup', function(users, groupId, isInvite) {
        $('#user_list').html('');
        const template = $('#user-template').html();

        // Set Title
        let memberSelectTitle = getLocalizedString("userSearch")
        $('.titleRoomName').text(memberSelectTitle);

        users.forEach( function(user) {
            // loadingIndicatorを表示
            CHAT_UI.showLoadingIndicator();

            user.profileImagePath = CHAT.getProfileImgUrl(user.profileImagePath)

            let html = Mustache.render(template, {
                id: user.shopMemberId,
                profileImage: user.profileImagePath,
                name: user.loginId
            });

            // クリックするとactive クラスを与え、チェック表示を出させる。
            let obj = $(jQuery.parseHTML(html)).on('click',function() {
                if ($(this).find('.userCheckBox.active').length > 0) {
                    // remove
                    CHAT.globalSelectedUserList = CHAT.globalSelectedUserList.filter(function(element) {
                        return user.loginId != element.loginId;
                    });
                } else {
                    // add
                    CHAT.globalSelectedUserList.push({loginId:user.loginId, shopMemberId : user.shopMemberId, profileImagePath: user.profileImagePath});
                }
                $(this).find('.userCheckBox').toggleClass('active');

                if (CHAT.globalSelectedUserList.length > 0) {
                    $('#userSelectionLength').text(CHAT.globalSelectedUserList.length);
                } else {
                    $('#userSelectionLength').text('');
                }
            });

            let findObj = CHAT.globalSelectedUserList.find(function(selectedUser) {
                return selectedUser.loginId == user.loginId;
            })

            if (findObj) {
                $(obj).find('.userCheckBox').toggleClass('active');
            }

            $('#user_list').append(obj);
        })
        $('.userCheckBox').show();

        // Rotate
        if (CHAT_UI.isLandscapeMode()) {
            $(".user_list").addClass("col-6").removeClass("col-12");
            $(".squareBoxContent span").addClass("landscape_span");
        }

        $('#backButton').off().on('click', function() {
            // loadingIndicatorを表示
            CHAT_UI.showLoadingIndicator();
            socket.emit('getGroupList', isInvite)
        });

        $("#userSelectionConfirmBtn").off().on('click', function() {
            // loadingIndicatorを表示
            CHAT_UI.showLoadingIndicator();
            CHAT_UI.setConfirmButtonEvent(isInvite);
        });

        $('#backButton').show();
        $('.roomListIcon, .chatRoomIcon').hide();
        $('#userSelectionConfirmBtn').show();
        $('.userCheckBox').show();
        $('#pills-user-tab').tab('show');
    });

    /* ---------------------------------------------------------------------- */
    /* Show Error Log */
    /* ---------------------------------------------------------------------- */

    socket.on('showServerError', function(message) {
        // #36174

        // #36215
        if (message.includes("SC_FORBIDDEN"))
        {
            alert('SC_FORBIDDEN');
            return;
        }

        if (message == 'server error Ocurred') {
            message = getLocalizedString("serverErrorOccured");
        } else if (message == 'Room not found') {
            message = getLocalizedString("errorRoomNotFound");
        }
        $("#customAlertTitle").text(message);
        $("#customAlertOk").text(getLocalizedString("yesTitle"));

        $('#customAlert').appendTo("body").modal({
            backdrop: 'static',
            keyboard: false
        })
        .on('click', '#customAlertOk', function(e) {
        });
        CHAT_UI.dismissLoadingIndicator();

        if (message == "Room not found") {
            CHAT.saveRoomInfo();
        }
    });

    // server's request : user info (retry join)
    socket.on("retryJoinProcess", () => {
        var ua = window.navigator.userAgent.toLowerCase();
        //if ((ua.indexOf('iphone') > 0 || ua.indexOf('ipad') > 0) && ua.indexOf("safari") == -1) {
        if (CHAT_UTIL.isIOS()) {
            // iosでの場合
            webkit.messageHandlers.loginInfoRequestMessageHandlerId.postMessage({});
        // } else if (ua.indexOf('android') > 0 && ua.indexOf('linux') == -1){
        } else if (CHAT_UTIL.isAndroid()) {
            // androidでの場合
            android.getLoginParameter();
        } else {
            CHAT_UI.htmlElementTextInitialize("ko")
            // webでのsocket connect
            socket.emit('join', params, function(err) {
                if (err) {
                    // #36174
                    $("#customAlertTitle").text(err);
                    $("#customAlertOk").text(getLocalizedString("yesTitle"));

                    $('#customAlert').appendTo("body").modal({
                        backdrop: 'static',
                        keyboard: false
                    })
                    .on('click', '#customAlertOk', function(e) {
                    });
                } else {
                    if (params.roomName != undefined) {
                        $('.titleRoomName').text(params.roomName).data('roomName', params.roomName);
                    } else {
                        let roomListTitle = getLocalizedString("roomListTitle")
                        $('.titleRoomName').text(roomListTitle)
                    }
                }
                // loadingIndicatorを表示しない
                CHAT_UI.dismissLoadingIndicator();
            });
        }
    })
}