var CollaborationUI = {};

document.addEventListener("DOMContentLoaded", function () {
  CollaborationUI.disableScroll();

  // メニューオーバーレイ表示
  CollaborationUI.bindMenuButton();

  // ユーザーリストオーバーレイ表示
  CollaborationUI.bindDisplayUsersButton();

  // モーダルonモーダル(前のモーダルを非表示に)
  // ホスト変更ボタン押下イベント
  CollaborationUI.bindChangeHostButton();
});

document.addEventListener("readystatechange", () => {
  if (document.readyState === "complete") {
    CollaborationUI.initialBindAddUserButton();
    // 閉じるイベント
    CollaborationUI.bindCloseButton();
    // ユーザー追加イベント
    CollaborationUI.bindInviteButton();
  }
});

/*********************************
 *  Buttons binding events
 ********************************/
CollaborationUI.bindMenuButton = function () {
  $(".menu_btn").click(function () {
    $(this).toggleClass("hide");
    $("#overlay_menu .item").toggleClass("hide");
  });
};

CollaborationUI.bindDisplayUsersButton = function () {
  $(".user_btn").click(function () {
    const width = $(this).width();
    $("#overlay_user_list.overlay").stop();
    $(this).toggleClass("hide");
    $("#overlay_user_list.overlay")
      .toggleClass("slidein")
      .animate({ left: "+=width" }, 500, function () {
        scrollTo(0, 0);
      });

    if ($(this).hasClass("hide")) {
      CollaborationUI.enableScroll();
    } else {
      CollaborationUI.disableScroll();
    }
  });
};

CollaborationUI.userListSlideOut = function () {
  const userButtonWidth = $(".user_btn").width();
  $(".user_btn").removeClass("hide");
  $("#overlay_user_list.overlay")
    .removeClass("slidein")
    .css({ transform: "translateX(" & -userButtonWidth & ")" });
  scrollTo(0, 0);
  CollaborationUI.disableScroll();
};

CollaborationUI.bindChangeHostButton = function () {
  $(".ch_host_btn").click(function () {
    const target = $(this).val();
    const beforeModal = $(target);
    const afterModal = $("#changeHostModal");
    /* モーダルの切り替え */
    beforeModal.modal("hide");
    afterModal.modal("show");
  });
};

CollaborationUI.bindCloseButton = function () {
  $(".close_btn").click(function () {
    scrollTo(0, 0);
    CollaborationUI.disableScroll();
  });
};

CollaborationUI.bindInviteButton = function () {
  $(".inv_btn").click(function () {
    scrollTo(0, 0);
  });
};

/*********************************
 *  Scroll Controls
 ********************************/
CollaborationUI.disableScroll = function () {
  document.addEventListener("mousewheel", CollaborationUI.scrollControl, {
    passive: false,
  });
  document.addEventListener("touchmove", CollaborationUI.scrollControl, {
    passive: false,
  });
};

// スクロール禁止解除
CollaborationUI.enableScroll = function () {
  document.removeEventListener("mousewheel", CollaborationUI.scrollControl, {
    passive: false,
  });
  document.removeEventListener("touchmove", CollaborationUI.scrollControl, {
    passive: false,
  });
};

CollaborationUI.scrollControl = function (event) {
  if (event.cancelable) {
    event.preventDefault();
  }
};

/*********************************
 *  NameCard in Collaboration
 ********************************/
CollaborationUI.makeNameCard = function (shopMemberID) {
  if (currentUserInfo.shopMemberID == shopMemberID) {
    return;
  }

  const namecardTemplate = getTemplate(TemplateURL.COLLABORATION_PROFILE);

  const nameCardInfo = NativeBridgeDataSource.getNameCardData(shopMemberID);
  nameCardInfo.profileUrl = Common.getProfileImgUrl(nameCardInfo.profileUrl);

  let isCollaborationHost = coview_api.getRoomUsers();

  const 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,
    collaborationId: globalUserInfo.shopName + "_" + nameCardInfo.loginId,
  });

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

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

CollaborationUI.removeFavoriteUserInCollaboration = function (shopMemberID) {
  Common.showLoadingIndicator();
  $("#userNameCardInCollaboration").modal("hide");
  NativeBridgeDataSource.removeFavoriteUser(shopMemberID);
  Common.dismissLoadingIndicator();
};

CollaborationUI.insertFavoriteUserInCollaboration = function (shopMemberID) {
  $("#userNameCardInCollaboration").modal("hide");
  NativeBridgeDataSource.addFavoriteUser(shopMemberID);
  Common.dismissLoadingIndicator();
};

CollaborationUI.refreshForOffline = function () {
  serverInfo.isOnline = false;
  if (typeof coview_api == "undefined") {
    return;
  }
  const alertString = getLocalizedString("err_weak_network_exit_collaboration");
  alert(alertString);

  NativeBridgeDelegate.finishCollaboration();

  if (globalUserInfo.joinType != COLLABORATION_JOIN_TYPE.INVITED) {
    NativeBridgeDelegate.joinRoom(roomInfo.roomID, roomInfo.name);
  } else {
    NativeBridgeDelegate.openCommunicationHome();
  }
};

CollaborationUI.displayAddUserButtonIfNeeded = function () {
  if (roomInfo.roomType == ChatRoomType.DM) {
    $(".add_user_btn").removeClass("none");
  }
};