<template>
  <section
    class="search-result-container"
    v-if="sharedSearchState.show"
    v-bind:class="{ active: sharedSearchState.show }"
    v-click-outside="hideSearchView"
    @click="hideSearchView"
  >
    <div class="search-result">
      <ul>
        <li class="category-item" v-if="sharedSearchState.userSearchResult.length > 0">
          <label>{{ $t("search.new_user") }}</label>
          <ul>
            <li v-for="(user, index) in toShowUserList" :key="index">
              <div class="search-result-item contact" @click.stop="chatToContact(user)">
                <img :src="user.portrait" />
                <span>{{ user.displayName }}</span>
                <button @click.stop="addFriend(user)">{{ $t("common.add") }}</button>
              </div>
            </li>
          </ul>
          <div
            v-if="!shouldShowAllUser && this.sharedSearchState.userSearchResult.length > 5"
            class="show-all"
            @click.stop="showAllUser"
          >
            {{ $t("search.view_all") + this.sharedSearchState.userSearchResult.length }}
          </div>
        </li>
        <li class="category-item" v-if="sharedSearchState.channelSearchResult.length > 0">
          <label>{{ $t("common.channel") }}</label>
          <ul>
            <li v-for="(channel, index) in toShowChannelList" :key="index">
              <div class="search-result-item contact" @click.stop="chatToChannel(channel)">
                <img :src="channel.portrait" />
                <span>{{ channel.name }}</span>
              </div>
            </li>
          </ul>
          <div
            v-if="!shouldShowAllChannel && this.sharedSearchState.channelSearchResult.length > 5"
            class="show-all"
            @click.stop="showAllChannel"
          >
            {{ $t("search.view_all") + this.sharedSearchState.channelSearchResult.length }}
          </div>
        </li>
        <li class="category-item" v-if="sharedSearchState.contactSearchResult.length > 0">
          <label>{{ $t("common.contact") }}</label>
          <ul>
            <li v-for="(contact, index) in toShowContactList" :key="index">
              <div class="search-result-item contact" @click.stop="chatToContact(contact)">
                <img :src="contact.portrait" />
                <span>{{ contact._displayName }}</span>
              </div>
            </li>
          </ul>
          <div
            v-if="!shouldShowAllContact && this.sharedSearchState.contactSearchResult.length > 5"
            class="show-all"
            @click.stop="showAllContact"
          >
            {{ $t("search.view_all") + this.sharedSearchState.contactSearchResult.length }}
          </div>
        </li>
        <li class="category-item" v-if="sharedSearchState.groupSearchResult.length > 0">
          <label>{{ $t("contact.group") }}</label>
          <ul>
            <li v-for="(group, index) in toShowGroupList" :key="index">
              <div class="search-result-item group" @click="chatToGroup(group)">
                <img :src="group.portrait" />
                <span>{{ group.remark ? group.remark : group.name }}</span>
              </div>
            </li>
          </ul>
          <div
            v-if="!shouldShowAllGroup && this.sharedSearchState.groupSearchResult.length > 5"
            class="show-all"
            @click.stop="showAllGroup"
          >
            {{ $t("search.view_all") + this.sharedSearchState.groupSearchResult.length }}
          </div>
        </li>
        <li class="category-item" v-if="sharedMiscState.isElectron">
          <label>{{ $t("search.message_history") }}</label>
          <div class="search-result-item message" @click="showMessageHistoryPage">
            <p>{{ $t("search.search_message_history") }}</p>
          </div>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
import ClickOutside from "vue-click-outside";
import store from "@/store.js";
import Conversation from "../../../wfc/model/conversation";
import ConversationType from "../../../wfc/model/conversationType";
import FriendRequestView from "../contact/FriendRequestView.vue";
import IpcEventType from "@/wfc/ipcEventType";
import { ipcRenderer } from "../../../platform";
import wfc from "../../../wfc/client/wfc";

export default {
  name: "SearchResultView",
  props: ["query"],
  data() {
    return {
      sharedSearchState: store.state.search,
      sharedMiscState: store.state.misc,
      shouldShowAllUser: false,
      shouldShowAllChannel: false,
      shouldShowAllContact: false,
      shouldShowAllGroup: false,
    };
  },

  mounted() {
    // do nothing
  },

  beforeDestroy() {
    store.setSearchQuery("");
  },

  watch: {
    // "query":function (val, oldVal){
    //   console.log('searchView query changed:', val, oldVal)
    // }
    // or
    query() {
      console.log("searchView query changed:", this.query);
      store.setSearchQuery(this.query);
    },
  },

  methods: {
    isFriend(userId) {
      return wfc.isMyFriend(userId);
    },
    addFriend(user) {
      this.$modal.show(
        FriendRequestView,
        {
          userInfo: user,
        },
        {
          name: "friend-request-modal",
          width: 600,
          height: 250,
          clickToClose: false,
        },
        {}
      );
    },
    showAllUser() {
      this.shouldShowAllUser = true;
    },
    showAllChannel() {
      this.shouldShowAllChannel = true;
    },
    showAllContact() {
      this.shouldShowAllContact = true;
    },

    showAllGroup() {
      this.shouldShowAllGroup = true;
    },

    hideSearchView(e) {
      if (e.target.id !== "searchInput") {
        store.toggleSearchView(false);
      }
    },

    chatToContact(contact) {
      if (this.$router.currentRoute.path !== "/home") {
        this.$router.replace("/home");
      }
      let conversation = new Conversation(ConversationType.Single, contact.uid, 0);
      store.setCurrentConversation(conversation);
      store.toggleSearchView(false);
    },

    chatToChannel(channel) {
      if (this.$router.currentRoute.path !== "/home") {
        this.$router.replace("/home");
      }
      let conversation = new Conversation(ConversationType.Channel, channel.channelId, 0);
      store.setCurrentConversation(conversation);
      store.toggleSearchView(false);
    },

    chatToGroup(group) {
      if (this.$router.currentRoute.path !== "/home") {
        this.$router.replace("/home");
      }
      let conversation = new Conversation(ConversationType.Group, group.target, 0);
      store.setCurrentConversation(conversation);
      store.toggleSearchView(false);
    },

    showMessageHistoryPage() {
      let hash = window.location.hash;
      let url = window.location.origin;
      if (hash) {
        url = window.location.href.replace(hash, "#/message-history");
      } else {
        url += "/message-history";
      }
      ipcRenderer.send(IpcEventType.showMessageHistoryPage, {
        url: url,
      });
      console.log(IpcEventType.showMessageHistoryPage, url);
    },
  },

  computed: {
    toShowUserList: function () {
      return !this.shouldShowAllUser && this.sharedSearchState.userSearchResult.length > 5
        ? this.sharedSearchState.userSearchResult.slice(0, 4)
        : this.sharedSearchState.userSearchResult;
    },
    toShowChannelList: function () {
      return !this.shouldShowAllChannel && this.sharedSearchState.channelSearchResult.length > 5
        ? this.sharedSearchState.channelSearchResult.slice(0, 4)
        : this.sharedSearchState.channelSearchResult;
    },
    toShowContactList: function () {
      return !this.shouldShowAllContact && this.sharedSearchState.contactSearchResult.length > 5
        ? this.sharedSearchState.contactSearchResult.slice(0, 4)
        : this.sharedSearchState.contactSearchResult;
    },
    toShowGroupList: function () {
      return !this.shouldShowAllGroup && this.sharedSearchState.groupSearchResult.length > 5
        ? this.sharedSearchState.groupSearchResult.slice(0, 4)
        : this.sharedSearchState.groupSearchResult;
    },
  },

  directives: {
    ClickOutside,
  },
};
</script>

<style lang="css" scoped>
.search-result-container {
  display: none;
}

.search-result-container.active {
  display: block;
  z-index: 100;
  overflow: auto;
  /*background-color: red;*/
  background-color: #f3f3f3e5;
}

.search-result-container ul {
  list-style: none;
  background-color: white;
}

.category-item label {
  color: #b2b2b2;
  display: block;
  padding-top: 10px;
  padding-bottom: 2px;
  margin-left: 12px;
  font-size: 13px;
  border-bottom: 1px solid #eeeeee;
}

.search-result-item {
  background-color: white;
  padding: 10px 12px;
}

.search-result-item:active {
  background-color: #d9d9d9;
}

.search-result-item.contact {
  width: 100%;
  display: flex;
  align-items: center;
}

.search-result-item.contact img {
  width: 34px;
  height: 34px;
  border-radius: 2px;
}

.search-result-item.contact span {
  font-size: 14px;
  padding-left: 10px;
}

.search-result-item.contact button {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 3px;
  border: 1px solid #cccccc;
  outline: none;
}

.search-result-item.contact button:active {
  background: #cccccc;
}

.search-result-item.group {
  width: 100%;
  display: flex;
  align-items: center;
}

.search-result-item.group img {
  width: 34px;
  height: 34px;
  border-radius: 2px;
}

.search-result-item.group span {
  font-size: 14px;
  padding-left: 10px;
}

.search-result-item.message {
  height: 54px;
  display: flex;
  align-items: center;
  font-size: 13px;
}

.show-all {
  padding-left: 12px;
  color: #66789d;
  font-size: 12px;
}
</style>
