CHAT_UI.joinCollaboration = function (collaborationType, meetingId = 0) {
  if (CHAT_UTIL.isIOS()) {
    const COLLABORATION_TYPE_KEY = POST_MESSAGE_KEY.COLLABORATION_TYPE;
    const MEETING_ID_KEY = POST_MESSAGE_KEY.MEETING_ID;
    webkit.messageHandlers.joinCollaboration.postMessage({
      COLLABORATION_TYPE_KEY: collaborationType,
      MEETING_ID_KEY: meetingId,
    });
  } else if (CHAT_UTIL.isAndroid()) {
    if (
      collaborationType == COLLABORATION_TYPE.DOCUMENT &&
      androidVersion < ANDROID_SDK_VERSION.O
    ) {
      alert(getLocalizedString("not_support_version"));
      return;
    }
    android.joinCollaboration(collaborationType, meetingId);
  }
};

CHAT_UI.startCollaboration = function (collaborationType) {
  if (CHAT_UTIL.isAndroid()) {
    if (
      collaborationType == COLLABORATION_TYPE.DOCUMENT &&
      androidVersion < ANDROID_SDK_VERSION.O
    ) {
      alert(getLocalizedString("not_support_version"));
      return;
    }
  }

  if ($(".collabo_area.start").length != 0) {
    if (!confirm(getLocalizedString("already_exist_collaboration"))) {
      CHAT_UI.dismissLoadingIndicator();
      return;
    }
    socket.emit(
      "createMessage",
      {
        text: DATA_MESSAGE_SCHEME + FINISH_ALL_COLLABORATION_SIGNAL,
      },
      0
    );
    if (CHAT_UTIL.isIOS()) {
      webkit.messageHandlers.finishAllCollaboration.postMessage({});
    } else if (CHAT_UTIL.isAndroid()) {
      android.finishAllCollaboration();
    }
  }

  if (CHAT_UTIL.isIOS()) {
    webkit.messageHandlers.startCollaboration.postMessage(collaborationType);
  } else if (CHAT_UTIL.isAndroid()) {
    android.startCollaboration(collaborationType);
  }
};

CHAT_UI.refreshJoinedCollaboration = function (loginIdList) {
  for (var count = 0; count < loginIdList.length; count++) {
    loginIdList[count] = loginIdList[count].replaceAll(
      globalUserInfo.shopName + "_",
      ""
    );
  }

  CHAT_UI.showLoadingIndicator();
  $("#collaboration_overlay_user_list").html("");

  var joinedUserListTemplate;
  $.get(
    { url: "./collaboration_overlay_user_list.html", async: false },
    function (text) {
      joinedUserListTemplate = text;
    }
  );

  var joinedUserList = CHAT_DB.getUserListByLoginId(loginIdList);
  var sortedUserList = new Array();

  loginIdList.forEach(function (userId) {
    joinedUserList.forEach(function (user) {
      if (userId == user.loginId) {
        sortedUserList.push(user);
      }
    });
  });

  sortedUserList.forEach(function (user) {
    user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
  });

  let html = Mustache.render(joinedUserListTemplate, {
    joinedUserList: sortedUserList,
  });

  let obj = jQuery.parseHTML(html);
  $("#collaboration_overlay_user_list").append(obj);

  CHAT_UI.dismissLoadingIndicator();
};

CHAT_UI.refreshMyGroupForAddUserInCollaboration = function () {
  if (CHAT.globalSelectedUserList.length > 0) {
    $(".select_member_num").text(CHAT.globalSelectedUserList.length);
  } else {
    $(".select_member_num").text("0");
  }
  $("#favoriteListForAddUserInCollaboration").html("");
  $("#myGroupListForAddUserInCollaboration").html("");

  $("#tabMyGroupOnAddUserInCollaboration").prop("checked", true);

  // グループの様式を読み込む
  var groupTemplate = getTemplate(
    TemplateURL.ADD_USER_GROUP_LIST_IN_COLLABORATION
  );

  // ユーザの様式を読み込む
  var userTemplate = getTemplate(
    TemplateURL.ADD_USER_USER_LIST_IN_COLLABORATION
  );

  var groupUserTemplate = getTemplate(
    TemplateURL.ADD_USER_GROUP_USER_LIST_IN_COLLABORATION
  );

  if (IS_ONLINE == "true") {
    if (typeof android != "undefined") {
      android.updateGroupInfo("0");
      android.updateMyInfo();
      android.updateGroupUser();
      android.updateFavorite();
    } else {
      webkit.messageHandlers.updateGroupInfo.postMessage("0");
      webkit.messageHandlers.updateMyInfo.postMessage({});
      webkit.messageHandlers.updateGroupUser.postMessage({});
      webkit.messageHandlers.updateFavorite.postMessage({});
    }
  }

  //お気に入りグループ取得。
  var favoriteGroupList = CHAT_DB.getFavoriteGroups();
  favoriteGroupList.forEach(function (favoriteGroup) {
    let html = Mustache.render(groupTemplate, {
      name: favoriteGroup.groupName,
      id: favoriteGroup.groupId,
    });

    let obj = $(jQuery.parseHTML(html)).on("click", function () {});
    $("#favoriteListForAddUserInCollaboration").append(obj);
  });
  //お気に入りユーザ取得。
  var favoriteUserList = CHAT_DB.getFavoriteUsersNotInRoom();
  favoriteUserList.forEach(function (favoriteUser) {
    favoriteUser.profileUrl = CHAT.getProfileImgUrl(favoriteUser.profileUrl);
    let findObj = CHAT.globalSelectedUserList.find(function (shopMemberId) {
      return shopMemberId == favoriteUser.shopMemberId;
    });
    if (findObj) {
      favoriteUser.checked = "checked";
    }
  });
  let html = Mustache.render(userTemplate, {
    userList: favoriteUserList,
  });
  let obj = jQuery.parseHTML(html);
  $("#favoriteListForAddUserInCollaboration").append(obj);

  var myGroupList = CHAT_DB.getMyGroupUsersNotInRoom();
  myGroupList.forEach(function (myGroup) {
    myGroup.groupUserList.forEach(function (groupUser) {
      groupUser.profileUrl = CHAT.getProfileImgUrl(groupUser.profileUrl);
      let findObj = CHAT.globalSelectedUserList.find(function (shopMemberId) {
        return shopMemberId == groupUser.shopMemberId;
      });
      if (findObj) {
        groupUser.checked = "checked";
      }
    });
    let html = Mustache.render(groupUserTemplate, {
      groupName: myGroup.groupName,
      groupUserList: myGroup.groupUserList,
    });
    let obj = $(jQuery.parseHTML(html)).on("click", function () {});

    $("#myGroupListForAddUserInCollaboration").append(obj);
  });
  $("#addUserInCollaboration").modal("show");
  CHAT_UI.dismissLoadingIndicator();
};

CHAT_UI.refreshAllGroupForAddUserInCollaboration = function (paramGroupId) {
  var groupId = paramGroupId;
  $(".content").removeClass("none");

  $("#tabAllGroupOnAddUserInCollaboration").prop("checked", true);

  //オンライン状態であればサーバから情報更新。
  if (IS_ONLINE == "true") {
    if (typeof android != "undefined") {
      android.updateGroupInfo(groupId);
    } else {
      webkit.messageHandlers.updateGroupInfo.postMessage(groupId);
    }
  }

  //画面エリアを初期化。
  $("#parentGroupBtnForAddUserInCollaboration").off();
  $("#rootGroupBtnForAddUserInCollaboration").off();
  $("#childGroupListAreaForAddUserInCollaboration").html("");
  $("#userInGroupListForAddUserInCollaboration").html("");
  $("#groupPathAreaForAddUserInCollaboration").html("");

  //DBからグループ情報を取得。
  var result = CHAT_DB.getGroupInfoForAddUser(groupId);
  //上位グループ、トップグループ遷移ボタンのイベント追加。
  if (typeof result.parentGroupId !== "undefined") {
    $("#parentGroupBtnForAddUserInCollaboration").on("click", function () {
      CHAT_UI.refreshAllGroupForAddUserInCollaboration(result.parentGroupId);
    });
  }
  if (typeof result.rootGroupId !== "undefined") {
    if (paramGroupId == 0) {
      groupId = result.rootGroupId;
    }
    $("#rootGroupBtnForAddUserInCollaboration").on("click", function () {
      CHAT_UI.refreshAllGroupForAddUserInCollaboration(result.rootGroupId);
    });
  }
  if (groupId == result.rootGroupId || paramGroupId == "0") {
    $("#rootGroupAreaInCollaboration").addClass("none");
    $("#parentGroupAreaInCollaboration").addClass("none");
  } else {
    $("#rootGroupAreaInCollaboration").removeClass("none");
    $("#parentGroupAreaInCollaboration").removeClass("none");
  }
  //該当グループのパースを表示。
  var groupPathTemplate = getTemplate(
    TemplateURL.ADD_USER_GROUP_PATH_IN_COLLABORATION
  );

  var groupPathCount = 0;
  result.groupPathList.forEach(function (groupPath) {
    if (!(groupPathCount < result.groupPathList.length - 3)) {
      let html = Mustache.render(groupPathTemplate, {
        name: groupPath.groupName,
        id: groupPath.groupId,
      });
      let obj = jQuery.parseHTML(html);
      $("#groupPathAreaForAddUserInCollaboration").append(obj);
    }
    groupPathCount++;
  });

  //該当グループの下位グループ表示。
  var groupTemplate = getTemplate(
    TemplateURL.ADD_USER_GROUP_LIST_IN_COLLABORATION
  );

  result.childGroupList.forEach(function (childGroup) {
    let html = Mustache.render(groupTemplate, {
      name: childGroup.groupName,
      id: childGroup.groupId,
    });

    let obj = $(jQuery.parseHTML(html)).on("click", function () {});
    $("#childGroupListAreaForAddUserInCollaboration").append(obj);
  });

  //該当グループの所属ユーザを表示。
  var userTemplate = getTemplate(
    TemplateURL.ADD_USER_USER_LIST_IN_COLLABORATION
  );

  result.groupUserList.forEach(function (groupUser) {
    groupUser.profileUrl = CHAT.getProfileImgUrl(groupUser.profileUrl);
    let findObj = CHAT.globalSelectedUserList.find(function (shopMemberId) {
      return shopMemberId == groupUser.shopMemberId;
    });
    if (findObj) {
      groupUser.checked = "checked";
    }
  });
  let html = Mustache.render(userTemplate, {
    userList: result.groupUserList,
  });
  let obj = jQuery.parseHTML(html);
  $("#userInGroupListForAddUserInCollaboration").append(obj);
};

CHAT_UI.makeNameCardInCollaboration = function (shopMemberId) {
  if (CHAT.globalLoginParameter.shopMemberId == shopMemberId) {
    return;
  }
  var nameCardInfo = CHAT_DB.getNameCardData(shopMemberId);
  var namecardTemplate;
  var changeHostTemplate;

  $.get({ url: "./modal_collabo_profile.html", async: false }, function (text) {
    namecardTemplate = text;
  });

  let isCollaborationHost = coview_api.getRoomUsers();
  nameCardInfo.profileUrl = CHAT.getProfileImgUrl(nameCardInfo.profileUrl);
  let whosHost = $("#collaboration_user_" + nameCardInfo.loginId).hasClass(
    "host"
  );
  let namecardHtml = Mustache.render(namecardTemplate, {
    shopMemberId: nameCardInfo.shopMemberId,
    profileUrl: nameCardInfo.profileUrl,
    loginId: nameCardInfo.loginId,
    name: nameCardInfo.shopMemberName,
    groupPathList: nameCardInfo.groupPathList,
    isFavorite: nameCardInfo.isFavorite,
    isHost: isCollaborationHost,
    whosHost: whosHost,
  });

  let namecardObj = $(jQuery.parseHTML(namecardHtml)).on(
    "click",
    function () {}
  );

  $("#userProfileModalInCollaboration").html(namecardObj);
  $("#userNameCardInCollaboration").modal("show");
};

CHAT_UI.removeFavoriteUserInCollaboration = function (shopMemberId) {
  CHAT_UI.showLoadingIndicator();
  $("#userNameCardInCollaboration").modal("hide");
  var result;
  if (typeof android != "undefined") {
    result = android.removeFavoriteUser(shopMemberId);
  } else {
    result = CHAT_DB.removeFavoriteUser(shopMemberId);
  }
  CHAT_UI.dismissLoadingIndicator();
};

CHAT_UI.insertFavoriteUserInCollaboration = function (shopMemberId) {
  $("#userNameCardInCollaboration").modal("hide");
  var result;
  if (typeof android != "undefined") {
    result = android.addFavoriteUser(shopMemberId);
  } else {
    result = CHAT_DB.addFavoriteUser(shopMemberId);
  }
  CHAT_UI.dismissLoadingIndicator();
};

CHAT_UI.confirmInviteUserListInCollaboration = function () {
  var selectedUsers = CHAT_DB.loadSelectedUsers();
  if (selectedUsers != "") {
    $("#selectedUserListinCollaboration").html("");

    var selectedUserList = CHAT_DB.loadSelectedUsers();
    selectedUserList.forEach(function (user) {
      user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
    });

    var modalTemplate;
    $.get(
      { url: "./modal_add_user_confirm.html", async: false },
      function (text) {
        modalTemplate = text;
      }
    );
    let html = Mustache.render(modalTemplate, {
      userList: selectedUserList,
    });
    let obj = jQuery.parseHTML(html);
    $("#modal_add_user_confirm").html(obj);
    $("#modalAddUserConfirm").modal("show");
  } else {
  }
  $("#cancelAddUserBtn")
    .off()
    .on("click", function () {
      console.log("cancelClick");
      $("#modalAddUserConfirm").modal("hide");
      $("#addUserInCollaboration").modal("show");
    });

  $("#addUserBtn")
    .off()
    .on("click", function () {
      CHAT_UI.showLoadingIndicator();
      let userIdList = new Array();
      selectedUserList.forEach(function (user) {
        userIdList.push(user.shopMemberId);
      });
      if (typeof android != "undefined") {
        android.inviteCollaboration(
          userIdList.join(","),
          CHAT_UTIL.getCollaborationType(globalUserInfo.coWorkType)
        );
      } else {
        const USER_ID_LIST_KEY = POST_MESSAGE_KEY.USER_ID_LIST;
        const COLLABORATION_TYPE_KEY = POST_MESSAGE_KEY.COLLABORATION_TYPE;
        webkit.messageHandlers.inviteCollaboration.postMessage({
          USER_ID_LIST_KEY: userIdList.join(","),
          COLLABORATION_TYPE_KEY: CHAT_UTIL.getCollaborationType(
            globalUserInfo.coWorkType
          ),
        });
      }
      $("#modalAddUserConfirm").modal("hide");
    });
};
