<template>
  <div class="contact-page">
    <ContactListPanel class="contact-list-panel" />
    <GroupDetailView
      v-if="sharedContactState.currentGroup"
      :group="sharedContactState.currentGroup"
      class="contact-detail-container"
    />
    <ChannelDetailView
      v-else-if="sharedContactState.currentChannel"
      :channel="sharedContactState.currentChannel"
      class="contact-detail-container"
    />
    <OrganizationDetailView v-else-if="sharedContactState.currentOrganization" class="contact-detail-container" />
    <UserDetailView
      v-else-if="sharedContactState.currentFriend"
      :user="sharedContactState.currentFriend"
      class="contact-detail-container"
    />
    <FriendRequestDetailView
      v-else-if="sharedContactState.currentFriendRequest"
      :user="sharedContactState.currentFriendRequest._target"
      :friend-request="sharedContactState.currentFriendRequest"
      class="contact-detail-container"
    />
    <div v-else class="contact-empty-container">
      <h1>^~^</h1>
    </div>
  </div>
</template>

<script>
import ContactListPanel from "./ContactListPanel.vue";
import GroupDetailView from "./contact/GroupDetailView.vue";
import store from "@/store.js";
import UserDetailView from "./contact/UserDetailView.vue";
import FriendRequestDetailView from "./contact/FrienRequestDetailView.vue";
import ChannelListView from "./contact/ChannelListView";
import ChannelDetailView from "./contact/ChannelDetailView";
import OrganizationDetailView from "./contact/OrganizationTreeView.vue";

export default {
  name: "ContactPage",
  data() {
    return {
      sharedContactState: store.state.contact,
    };
  },
  components: {
    ChannelDetailView,
    ChannelListView,
    FriendRequestDetailView,
    UserDetailView,
    GroupDetailView,
    ContactListPanel,
    OrganizationDetailView,
  },
};
</script>

<style lang="css" scoped>
.contact-page {
  display: flex;
  flex: 1;
  height: 100%;
}

.contact-list-panel {
  background-color: #fafafa;
  width: 261px;
  height: 100%;
}

ul {
  list-style: none;
}

.contact-detail-container {
  flex: 1;
  background-color: white;
}

.contact-empty-container {
  flex: 1;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-right-radius: var(--main-border-radius);
  border-bottom-right-radius: var(--main-border-radius);
}

.contact-empty-container h1 {
  font-size: 17px;
  font-weight: normal;
}
</style>
