var bindOnRefreshUserListInGroup = function () {
  // Update User List(Invite)
  // #36170
  socket.on(
    SOCKET_KEY.REFRESH_USERLIST_INGROUP,
    function (users, groupId, isInvite) {
      $("#user_list").html("");

      // Set Title
      updateTitle();

      addUserList(users);

      // Rotate
      handleRotateOnUserListInGroup();
      setupBackButtonOnUserListInGroup(isInvite);
      setupUserSelectionConfirmButton(isInvite);
      updateUIOnUserListInGroup();
    }
  );
};

var updateTitle = function () {
  let memberSelectTitle = getLocalizedString("userSearch");
  $(".titleRoomName").text(memberSelectTitle);
};

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

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

    // クリックするとactive クラスを与え、チェック表示を出させる。
    let obj = activateCheckUser(
      user.loginId,
      user.shopMemberId,
      user.profileImagePath
    );

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

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

    $("#user_list").append(obj);
  });
};

var renderUser = function (template, userID, profileImagePath, userName) {
  return Mustache.render(template, {
    id: userID,
    profileImage: profileImagePath,
    name: userName,
  });
};

var activateCheckUser = function (loginID, shopMemberID, profileImagePath) {
  const template = $("#user-template").html();
  let html = renderUser(template, shopMemberID, profileImagePath, loginID);

  return $(jQuery.parseHTML(html)).on("click", function () {
    if ($(this).find(".userCheckBox.active").length > 0) {
      // remove
      CHAT.globalSelectedUserList = filterRemovedUser(loginID);
    } else {
      // add
      addSelectedUser(loginID, shopMemberID, profileImagePath);
    }
    $(this).find(".userCheckBox").toggleClass("active");
    updateUserSelectionLength();
  });
};

var filterRemovedUser = function (userID) {
  return CHAT.globalSelectedUserList.filter(function (element) {
    return userID != element.loginId;
  });
};

var addSelectedUser = function (loginID, shopMemberID, profileImagePath) {
  CHAT.globalSelectedUserList.push({
    loginId: loginID,
    shopMemberId: shopMemberID,
    profileImagePath: profileImagePath,
  });
};

var handleRotateOnUserListInGroup = function () {
  if (CHAT_UI.isLandscapeMode()) {
    $(".user_list").addClass("col-6").removeClass("col-12");
    $(".squareBoxContent span").addClass("landscape_span");
  }
};

var setupBackButtonOnUserListInGroup = function (isInvite) {
  const backButton = $("#backButton");
  backButton.off().on("click", function () {
    // loadingIndicatorを表示
    CHAT_UI.showLoadingIndicator();
    socket.emit("getGroupList", isInvite);
  });
  backButton.show();
};

var setupUserSelectionConfirmButton = function (isInvite) {
  const userSelectionConfirmButton = $("#userSelectionConfirmBtn");
  userSelectionConfirmButton.off().on("click", function () {
    // loadingIndicatorを表示
    CHAT_UI.showLoadingIndicator();
    CHAT_UI.setConfirmButtonEvent(isInvite);
  });
  userSelectionConfirmButton.show();
};

var updateUIOnUserListInGroup = function () {
  $(".roomListIcon, .chatRoomIcon").hide();
  $(".userCheckBox").show();
  $("#pills-user-tab").tab("show");
};
