CollaborationUI.initialBindAddUserButton = function () {
  // ユーザー招待メンバー検索
  $(".add_user_btn").click(function () {
    CollaborationUI.enableScroll();
    Common.showLoadingIndicator();
    ChatManagementCommon.selectedUserList = [];
    CollaborationUI.refreshMyGroupForAddUserInCollaboration();
    $("#addUserConfirmBtnInCollaboration")
      .off()
      .on("click", function () {
        $("#addUserInCollaboration").modal("hide");

        if (ChatManagementCommon.selectedUserList.length == 0) {
          return;
        }
        
        const selectedUserList =
          ChatManagementCommon.selectedUserList.join(",");
        NativeBridgeDelegate.saveSelectedUserList(selectedUserList);
        CollaborationUI.confirmInviteUserListInCollaboration();
      });
  });
};

$("#tabMyGroupOnAddUserInCollaboration").on("click", function (e) {
  CollaborationUI.refreshMyGroupForAddUserInCollaboration();
});

$("#tabAllGroupOnAddUserInCollaboration").on("click", function (e) {
  CollaborationUI.refreshAllGroupForAddUserInCollaboration("0");
});

CollaborationUI.refreshMyGroupForAddUserInCollaboration = function () {
  if (ChatManagementCommon.selectedUserList.length > 0) {
    $(".select_member_num").text(ChatManagementCommon.selectedUserList.length);
  } else {
    $(".select_member_num").text("0");
  }
  $("#favoriteListForAddUserInCollaboration").html("");
  $("#myGroupListForAddUserInCollaboration").html("");

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

  NativeBridgeDelegate.updateContactInfo();

  CollaborationUI.appendFavoriteGroupList();

  CollaborationUI.appendFavoriteUserList();

  CollaborationUI.appendMyGroupList();

  $("#addUserInCollaboration").modal("show");
  Common.dismissLoadingIndicator();
};

CollaborationUI.appendFavoriteGroupList = function () {
  // グループの様式を読み込む
  const groupTemplate = getTemplate(
    TemplateURL.ADD_USER_GROUP_LIST_IN_COLLABORATION
  );
  //お気に入りグループ取得。
  const favoriteGroupList = NativeBridgeDataSource.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);
  });
};

CollaborationUI.appendFavoriteUserList = function () {
  // ユーザの様式を読み込む
  const userTemplate = getTemplate(
    TemplateURL.ADD_USER_USER_LIST_IN_COLLABORATION
  );
  //お気に入りユーザ取得。
  const favoriteUserList = NativeBridgeDataSource.getFavoriteUsersNotInRoom();
  favoriteUserList.forEach(function (favoriteUser) {
    favoriteUser.profileUrl = Common.getProfileImgUrl(favoriteUser.profileUrl);
    let findObj = ChatManagementCommon.selectedUserList.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);
};

CollaborationUI.appendMyGroupList = function () {
  const groupUserTemplate = getTemplate(
    TemplateURL.ADD_USER_GROUP_USER_LIST_IN_COLLABORATION
  );
  const myGroupList = NativeBridgeDataSource.getMyGroupUsersNotInRoom();
  myGroupList.forEach(function (myGroup) {
    myGroup.groupUserList.forEach(function (groupUser) {
      groupUser.profileUrl = Common.getProfileImgUrl(groupUser.profileUrl);
      let findObj = ChatManagementCommon.selectedUserList.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);
  });
};

CollaborationUI.refreshAllGroupForAddUserInCollaboration = function (groupID) {
  $(".content").removeClass("none");

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

  NativeBridgeDelegate.updateGroupInfo(groupID);

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

  //DBからグループ情報を取得。
  const result = NativeBridgeDataSource.getGroupInfoForAddUser(groupID);

  //上位グループ、トップグループ遷移ボタンのイベント追加。
  CollaborationUI.appendRootGroupAndParentGroupIfNeeded(
    result.rootGroupId,
    result.parentGroupId,
    groupID
  );

  //該当グループのパースを表示。
  CollaborationUI.appendGroupPath(result.groupPathList);

  //該当グループの下位グループ表示。
  CollaborationUI.appendChildGroups(result.childGroupList);

  //該当グループの所属ユーザを表示。
  CollaborationUI.appendUsers(result.groupUserList);
};

CollaborationUI.bindOnClickParentGroup = function (parentGroupID) {
  $("#parentGroupBtnForAddUserInCollaboration").on("click", function () {
    CollaborationUI.refreshAllGroupForAddUserInCollaboration(parentGroupID);
  });
};

CollaborationUI.bindOnClickRootGroup = function (rootGroupID) {
  $("#rootGroupBtnForAddUserInCollaboration").on("click", function () {
    CollaborationUI.refreshAllGroupForAddUserInCollaboration(rootGroupID);
  });
};

CollaborationUI.displayRootGroupAndParentGroupIfNeeded = function (
  rootGroupID,
  groupID
) {
  if (typeof rootGroupID !== "undefined" && rootGroupID == 0) {
    groupID = rootGroupID;
  }

  if (groupID == rootGroupID || groupID == "0") {
    $("#rootGroupAreaInCollaboration").addClass("none");
    $("#parentGroupAreaInCollaboration").addClass("none");
  } else {
    $("#rootGroupAreaInCollaboration").removeClass("none");
    $("#parentGroupAreaInCollaboration").removeClass("none");
  }
};

CollaborationUI.appendGroupPath = function (groupPathList) {
  const groupPathTemplate = getTemplate(
    TemplateURL.ADD_USER_GROUP_PATH_IN_COLLABORATION
  );

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

CollaborationUI.appendChildGroups = function (chidGroups) {
  const groupTemplate = getTemplate(
    TemplateURL.ADD_USER_GROUP_LIST_IN_COLLABORATION
  );

  chidGroups.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);
  });
};

CollaborationUI.appendUsers = function (userList) {
  const userTemplate = getTemplate(
    TemplateURL.ADD_USER_USER_LIST_IN_COLLABORATION
  );

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

CollaborationUI.appendRootGroupAndParentGroupIfNeeded = function (
  rootGroupID,
  parentGroupID,
  groupID
) {
  if (typeof parentGroupID !== "undefined") {
    CollaborationUI.bindOnClickParentGroup(parentGroupID);
  }

  if (typeof rootGroupID !== "undefined") {
    CollaborationUI.bindOnClickRootGroup(rootGroupID);
  }

  CollaborationUI.displayRootGroupAndParentGroupIfNeeded(rootGroupID, groupID);
};

CollaborationUI.confirmInviteUserListInCollaboration = function () {
  const selectedUsers = NativeBridgeDataSource.loadSelectedUsers();
  if (selectedUsers != "") {
    $("#selectedUserListinCollaboration").html("");

    selectedUsers.forEach(function (user) {
      user.profileUrl = Common.getProfileImgUrl(user.profileUrl);
    });

    const modalTemplate = getTemplate(TemplateURL.MODAL_ADD_USER_CONFIRM);

    const html = Mustache.render(modalTemplate, {
      userList: selectedUsers,
    });
    let obj = jQuery.parseHTML(html);
    $("#modal_add_user_confirm").html(obj);
    $("#modalAddUserConfirm").modal("show");
  }

  CollaborationUI.bindCancelAddUserButton();

  CollaborationUI.bindAddUserButton(selectedUsers);
};

CollaborationUI.bindCancelAddUserButton = function () {
  $("#cancelAddUserBtn")
    .off()
    .on("click", function () {
      $("#modalAddUserConfirm").modal("hide");
      $("#addUserInCollaboration").modal("show");
    });
};

CollaborationUI.bindAddUserButton = function (selectedUsers) {
  $("#addUserBtn")
    .off()
    .on("click", function () {
      Common.showLoadingIndicator();
      let userIDList = selectedUsers.map((user) => user.shopMemberId);
      const commaJoinedUserIDList = userIDList.join(",");
      const collaborationType = globalUserInfo.collaborationType;
      scrollTo(0,0);
      NativeBridgeDelegate.inviteCollaboration(
        commaJoinedUserIDList,
        collaborationType
      );

      Common.dismissLoadingIndicator();
      $("#modalAddUserConfirm").modal("hide");
    });
};

CollaborationUI.toggleCategory = function (category) {
  $(category).toggleClass("open");
  $(category).next().slideToggle();
};