// 名前空間
var CHAT = {};
// test comment
//招待するメンバーを保存する変数
CHAT.globalSelectedUserList = new Array();
CHAT.globalIsInvite = false;

//ログイン中の部屋情報を保存する変数
CHAT.globalLoginParameter;

CHAT.saveRoomInfo = function(roomId, roomName) {
    CHAT.globalLoginParameter.roomId = roomId;
    CHAT.globalLoginParameter.roomName = roomName;
    if (CHAT_UTIL.isIOS()) {
        webkit.messageHandlers.roomInfosaveMessageHandlerId.postMessage({"roomId":roomId, "roomName":roomName});
    } else if (CHAT_UTIL.isAndroid()) {
        if (roomId == undefined && roomName == undefined) {
            android.saveVisitRoomInfo('', '');
        } else {
            android.saveVisitRoomInfo(roomId, roomName);
        }
    }
}

// #36170 画像パスが存在しない場合はデフォルトの画像を返す
// 存在する場合はプロフィール画像取得用APIのURLを生成して返す
CHAT.getProfileImgUrl = function(path) {
    if (path == undefined || path == "") {
        return ASSET_PATH + 'img/noImage.png';
    } else {
        var userInfo = path.split("/").reverse();
        return CMS_SERVER_URL + '/chatapi/user?profileFileName=' + userInfo[0] + '&profileGetLoginId=' + userInfo[1] + '&sid=' + CHAT.globalLoginParameter.sid + '&cmd=12';
    }
}

// Video のサムネイルファイル生成する
CHAT.createVideoThumbnailAndUpload = function(sourceImage, callback) {
    var fileReader = new FileReader();

    fileReader.onload = function() {
        var blob = new Blob([fileReader.result], {type: sourceImage.type});
        var url = URL.createObjectURL(blob);
        var video = document.createElement('video');
        var timeupdate = function() {
            if (snapImage()) {
                video.removeEventListener('timeupdate', timeupdate);
                video.pause();
            }
        };
        video.addEventListener('loadeddata', function() {
            if (snapImage()) {
                video.removeEventListener('timeupdate', timeupdate);
            }
        });
        var snapImage = function() {
            var canvas = document.createElement('canvas');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

            fetch(canvas.toDataURL("image/jpeg"))
                .then(function(res) {
                    return res.arrayBuffer();
                })
                .then(function(buf) {
                    // 回転された画像をFormDataに保存
                    const newFile = new File([buf], sourceImage.name, {type:"image/jpeg"});
                    callback(newFile, true);
                    // ajax End
                }).catch((error) => { // fetch Error catch Block
                        if (error) {
                            console.log(error)
                        }
                });
            return true;
        };
        video.addEventListener('timeupdate', timeupdate);
        video.preload = 'metadata';
        video.src = url;
        // Load video in Safari / IE11
        video.muted = true;
        video.playsInline = true;
        video.play();
    };
    fileReader.readAsArrayBuffer(sourceImage);
}

// Ajaxでイメージをアップロードする
CHAT.uploadImage = function(formData) {
    formData.append('roomId', CHAT.globalLoginParameter.roomId);
    jQuery.ajax({
        async: true,
        url:    CMS_SERVER_URL+"/file/upload",
        type: "post",
        data: formData,
        contentType: false,
        processData: false
    }).done(function(res) {
        // 8
        var imgPath = CMS_SERVER_URL + '/file/getImage?fileName=' + res.fileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
        var imageName = res.fileName

        // uploadFileの判断
        var extension = imageName.substr(imageName.lastIndexOf('.') + 1).toLowerCase();

        // 画像の処理
        if (res.fileType == "jpeg" || res.fileType == "jpg" || res.fileType == "png") {
            if (res.thumbnailPath && res.thumbnailPath.length > 0) {
                imgPath = CMS_SERVER_URL + '/file/getImage?fileName=' + res.thumbImageFileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
                imageName = res.thumbImageFileName;
            }

            let downloadPath = CMS_SERVER_URL + '/file/download?fileName=' + imageName + '&roomId=' + CHAT.globalLoginParameter.roomId;
            // アップロードが終了した後ローディング画面から離れてメッセージをメッセージを転送する
            const lightbox = $('<a/>',{href:imgPath, 'data-lightbox':'attachedImages','data-title':imageName});
            const image = $('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
            const downloadIcon = $('<a/>',{href:downloadPath, class:'fa fa-download', download:res.fileName});

            lightbox.append(image);
            lightbox.append(downloadIcon);
            let text = lightbox.prop('outerHTML')
            let encodedText
            try {
                encodedText = encodeURIComponent(text)
            } catch(e) {
                encodedText = text;
            }

            socket.emit('createMessage', {
                text: encodedText
            }, 1);

        } else {    // 動画の処理
            if (res.thumbnailPath && res.thumbnailPath.length > 0) {
                imgPath = CMS_SERVER_URL + '/file/getImage?fileName=' + res.thumbImageFileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
            }

            let downloadPath = CMS_SERVER_URL + '/file/download?fileName=' + imageName + '&roomId=' + CHAT.globalLoginParameter.roomId;
            const aTag = $('<a/>', {id:"attachedImages"})
            const image = $('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
            const downloadIcon = $('<a/>',{href:downloadPath, class:'fa fa-download', download:res.fileName});

            aTag.append(image);
            aTag.append(downloadIcon);

            let text = aTag.prop('outerHTML');
            let encodedText
            try {
                encodedText = encodeURIComponent(text)
            } catch(e) {
                encodedText = text;
            }

            socket.emit('createMessage', {
                text: encodedText
            }, 1);
        }

        $('.overlay').removeClass('active undismissable');
        $('.loader').removeClass('active');
        CHAT_UI.dismissLoadingIndicator();
    })
}

// Thumbnailのファイルを生成する。
CHAT.createThumbnailAndUpload = function(sourceImage, callback) {
    const fileReader = new FileReader();
    const img = new Image();
    fileReader.onloadend = function() {
            img.src = fileReader.result
    }

    img.onload = function() {
        const elem = document.createElement('canvas');
        var rate
        var width = img.width
        var height = img.height
        if ((img.width <= 500) && (img.height <= 500))
        {
            callback(undefined, false)
            return
        }

        if (img.width > img.height)
        {
            rate = 500/img.width
        } else {
            rate = 500/img.height
        }
        elem.width = width * rate;
        elem.height = height * rate;

        const ctx = elem.getContext('2d')

        ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, elem.width, elem.height);
        // ctx.drawImage(img, 0, 0, width, height);

        fetch(elem.toDataURL("image/jpeg"))
        .then(function(res) {
            return res.arrayBuffer();
        })
        .then(function(buf) {
            const newFile = new File([buf], sourceImage.name, {type:"image/jpeg"});

            callback(newFile, true)

        }).catch((error) => { // fetch Error catch Block
                if (error) {
                    console.log(error)
                }
        });
    }

    fileReader.readAsDataURL(sourceImage);
}

// 該当チャットルームに参加するためログイン情報をサーバに渡す
getLoginParameter = function(sid, loginId, shopName, roomId = undefined, roomName = undefined, languageCode) {
    var loginParam = new Object()
    loginParam.sid = sid;
    loginParam.loginId = loginId;
    loginParam.shopName = shopName;
    loginParam.roomId = roomId;
    loginParam.roomName = roomName;

    CHAT.globalLoginParameter = loginParam;

    if (!languageCode) {
        languageCode = "en"
    }
    CHAT_UI.htmlElementTextInitialize(languageCode)

    if (IS_ONLINE == 'true') {
        socket.emit('join', loginParam, 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 {
                console.log('No error');
                if (loginParam.roomName != undefined && loginParam.roomName != "null") {
                    $('.titleRoomName').text(loginParam.roomName).data('roomName', loginParam.roomName);
                } else {
                    // 設定されていたroomNameがない場合
                    let roomListTitle = getLocalizedString("roomListTitle")
                    $('.titleRoomName').text(roomListTitle).data('roomName', roomListTitle);
                }
            }
            // loadingIndicatorを表示しない
            CHAT_UI.dismissLoadingIndicator();
        });
    } else {
        // loadingIndicatorを表示しない
        CHAT_UI.dismissLoadingIndicator();
    }

}

CHAT.leaveRoom = function() {
    socket.emit('leaveRoom', function() {
    });
}

CHAT.requestMyinfo = function() {
    jQuery.ajax({
            async: true,
            url: CMS_SERVER_URL + "/chatapi/user?sid=" + CHAT.globalLoginParameter.sid + "&cmd=" + userAPICmd.MYINFO,
            type: "get",
            processData: false,
            contentType: false
    }).done(function(res) {
            console.log(res);
            return res;
    })
}

$(function() {
  // ルーム開設メンバー数カウント
  $('input:checkbox').change(function() {
    if($(this).prop('checked')){
      $(this).attr('checked', true);
    }else{
      $(this).removeAttr('checked');
    }
  }).trigger('change');

  // チェックした人数カウント
  $('input:checkbox').change(function() {
      var cnt = $('.checkbox input:checkbox:checked').length;
      $('.select_member_num').text(cnt);
  }).trigger('change');

  // ルーム人数選択確認イベント
  $('.make_room_btn button').click(function(){
    $('form').submit();
  });
  // ルーム人数選択イベント
  $('.make_room_confirm_btn button').click(function(){
    $('form').submit();
  });
  // ユーザー追加確認イベント
  $('.add_user_confirm_btn button').click(function(){
    $('form').submit();
  });
  // ユーザー追加イベント
  $('.add_user_btn button').click(function(){
    $('form').submit();
  });
  // ルーム名変更イベント
  $('.change_room_name_btn button').click(function(){
    $('form').submit();
  });

  // 検索アイコン押下イベント
  $('.nav_item_wrap .search_menu').click(function(){
    $('.nav_item_wrap').addClass('none');
    $('.chat_room_src_form').removeClass('none');
    $('.room_container').addClass('none');
    $('.overlay_src_msg').removeClass('none');
    // フィルタ表示
    $('#filter').removeClass('none');
    $('#user_list').addClass('none');
  });
  $('.chat_room_src_form .cancel').click(function(){
    $('.nav_item_wrap').removeClass('none');
    $('.chat_room_src_form').addClass('none');
    $('.chat_room_src_form input').val('');
    $('.room_container').removeClass('none');
    $('.overlay_src_msg').empty();
    // ユーザーリスト表示
    $('#filter').addClass('none');
    $('#user_list').removeClass('none');
  });

  // フィルタ選択イベント
  $('#filter .img_wrap').click(function(){
    // チェックアイコン追加
    $(this).toggleClass("filter");
  });

  // チャットメンバー検索
  $('#chat .search_form input[type="search"]').keyup(function(){
    $.ajax({
      url: 'search_message_user_list.html',
      type: 'POST',
      datatype: 'html'
    }).done(function (data) {
      $('.overlay_src_msg').html(data);
      })
  });
  // ルームメンバー検索
  $('#chat_room .search_form input[type="search"]').keyup(function(){
    $.ajax({
      url: 'search_message_user_list.html',
      type: 'POST',
      datatype: 'html'
    }).done(function (data) {
      $('.overlay_src_msg').html(data);
      })
  });
  // ユーザー招待メンバー検索
  $('#chat_add_user .search_form input[type="search"]').keyup(function(){
    $.ajax({
      url: 'search_message_user_list.html',
      type: 'POST',
      datatype: 'html'
    }).done(function (data) {
      $('.overlay_src_msg').html(data);
      })
  });

  // チャットルーム
  // メッセージ検索イベント
  $('.chat_room_src_form input[type="search"]').keyup(function(){
    $.ajax({
      url: 'search_message.html',
      type: 'POST',
      datatype: 'html'
    }).done(function (data) {
      $('.overlay_src_msg').html(data);
      })
  });

});
