<template>
<div class="header header-messages-list">
  <div class="close-conversation-button">
    <i-button
      type="text"
      icon="md-arrow-round-back"
      @click="$emit('close-room')"/>
  </div>
  <div
    v-if="currentRoom"
    class="header-main-item">
    <span>{{ currentRoom.name }}</span>
    <p class="members-count">
      {{ currentRoom.currentState.getJoinedMemberCount() }} members
    </p>
  </div>
  <div class="header-controls">
    <dropdown
      placement="bottom-end"
      trigger="click"
      @on-click="onMoreMenuClick">
      <i-button
        type="text"
        icon="md-more"/>
      <dropdown-menu slot="list">
        <dropdown-item name="members">Members</dropdown-item>
        <dropdown-item name="edit-room">Edit room name</dropdown-item>
        <dropdown-item
          v-show="myMembership === 'join'"
          name="leave">Leave</dropdown-item>
      </dropdown-menu>
    </dropdown>
  </div>

  <Modal
    v-model="showMembersModal"
    :footer-hide="true"
    title="Members">
    <div
      v-if="currentRoom">
      <i-form>
        <form-item>
          <p v-if="pluginConfig.strictNameFilter">
            {{ dictionary.getMessage(dictionary.locale, 'matrix.enter_user_name_help') }}
          </p>
          <auto-complete
            v-model="searchUserTerm"
            :placeholder="dictionary.getMessage(dictionary.locale, 'matrix.enter_user_name')"
            @on-search="searchUser"
            @on-select="onUserSelect">
            <i-option
              v-for="option in searchUserOptions"
              :value="option.display_name"
              :key="option.user_id">{{ option.display_name }}
              <template v-if="pluginConfig.showUsernames"> ({{ option.user_id }})</template></i-option>
          </auto-complete>
        </form-item>
        <form-item>
          <i-button
            type="primary"
            @click="inviteMember">Invite</i-button>
        </form-item>
      </i-form>
      <div class="members-list">
        <div
          v-for="member in currentRoom.currentState.getMembers()"
          :key="member.userId"
          class="member">
          <avatar
            shape="square"
            icon="md-person"
            class="avatar" />
          <span class="member-name">{{ member.name }}</span>
          <i-button
            type="text"
            icon="md-close"
            @click="kickMember(member)">Kick</i-button>
        </div>
      </div>
    </div>
  </Modal>
</div>
</template>

<script>
import MatrixClient from "../plugin";

export default {
  props: {
    currentRoomId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      searchUserTerm: "",
      selectedUserId: "",
      searchUserOptions: [],
      searchUserLoading: false,
      showMembersModal: false
    };
  },
  computed: {
    currentRoom() {
      return this.$matrix.client.getRoom(this.currentRoomId);
    },

    myMembership() {
      if (!this.currentRoom) {
        return null;
      }
      return this.currentRoom.getMember(this.$matrix.client.getUserId())
        .membership;
    },
    pluginConfig() {
      return MatrixClient.config;
    },
    dictionary() {
      return MatrixClient.i18nDriver;
    }
  },
  methods: {
    onMoreMenuClick(name) {
      switch (name) {
        case "members":
          this.showMembersModal = true;
          break;
        case "edit-room":
          this.$emit("edit-room");
          break;
        case "leave":
          this.$matrix.client.leave(this.currentRoomId).then(() => {
            // custom event is used, because default 'RoomState.members' or 'RoomMember.membership' will be not fired
            // TODO: try to avoid custom event and use one of existing
            this.$matrix.event.$emit("left-room", this.currentRoom);
          });
          break;
      }
    },
    inviteMember(userId) {
      this.$matrix.client.invite(this.currentRoomId, userId).then(() => {
        this.searchUserTerm = "";
        this.searchUserOptions = [];
      });
    },
    searchUser(query) {
      this.searchUserLoading = true;
      this.$matrix.client
        .searchUserDirectory({
          term: query
        })
        .then(response => {
          this.searchUserLoading = false;
          this.searchUserOptions = response.results;
        });
    },
    onUserSelect(value) {
      this.inviteMember(value);
      this.searchUserTerm = "";
    },
    kickMember(member) {
      this.$matrix.client.kick(this.currentRoomId, member.userId);
    }
  },
  i18n: {
    messages: {
      "en-us": {
        matrix: {
          enter_user_name: "Enter user name",
          enter_user_name_help: "Enter full user name"
        }
      }
    }
  }
};
</script>

<style lang="less">
.header-messages-list {
  display: inline-flex;
  width: 100%;
  align-items: center;
  border-bottom: 1px solid grey;

  .header-main-item {
    flex: 1;

    span {
      font-weight: bold;
    }
  }
}

.members-list {
  .member {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    &:last-of-type {
      margin-bottom: 0;
    }

    .avatar {
      margin-right: 10px;
    }

    .member-name {
      font-weight: bold;
      flex: 1;
    }
  }
}
</style>
