<template>
<div id="client-window">
  <div
    v-show="!(isSmallWidth && currentRoomId)"
    class="rooms-side">
    <template v-if="isInitialised">
      <div class="header">
        <auto-complete
          v-model="searchField"
          :clearable="true"
          placeholder="Search"
          @on-select="onSelectSearch">
          <i-option
            v-for="room in searchOptions"
            :value="room.roomId"
            :key="room.name">{{ room.name }}</i-option>
        </auto-complete>
        <div class="header-controls">
          <i-button
            type="text"
            icon="md-add"
            @click="roomToEdit = null; showRoomFormModal = true" />
        </div>
      </div>
      <scroll
        class="rooms-list">
        <room-list
          :current-room-id="currentRoomId"
          @click-on-room="clickOnRoom"
          @close-room="onCloseRoom" />
      </scroll>
    </template>
    <template v-else>
      Trying to connect...
    </template>
  </div>
  <div
    v-if="isInitialised"
    v-show="!(isSmallWidth && !currentRoomId)"
    class="conversation-side">
    <template v-if="currentRoomId">
      <div style="height: 100%;">
        <room-info
          :current-room-id="currentRoomId"
          @edit-room="onEditRoom"
          @close-room="onCloseRoom"/>
        <message-list
          v-if="isInitialised"
          :current-room-id="currentRoomId" />
      </div>
      <div>
        <template v-if="currentRoomId && myRoomMember">
          <template v-if="myRoomMember.membership === 'join'">
            <message-form :current-room-id="currentRoomId" />
          </template>
          <template v-else>
            <room-invitation-reply-form
              :current-room-id="currentRoomId" />
          </template>
        </template>
      </div>
    </template>
    <template v-else>
      Select conversation
    </template>
  </div>
  <modal
    v-model="showRoomFormModal"
    :footer-hide="true">
    <room-form
      :model-value="roomToEdit"
      :visible="showRoomFormModal"
      @success="showRoomFormModal = false" />
  </modal>
</div>
</template>

<script>
import MessageForm from "./MessageForm";
import MessageList from "./MessageList";
import RoomForm from "./RoomForm";
import RoomInfo from "./RoomInfo";
import RoomInvitationReplyForm from "./RoomInvitationReplyForm";
import RoomList from "./RoomList";

export default {
  components: {
    MessageForm,
    MessageList,
    RoomForm,
    RoomInfo,
    RoomInvitationReplyForm,
    RoomList
  },
  data() {
    return {
      horizontalSplit: 0.2,
      verticalSplit: 0.65,
      currentRoomId: null,
      isInitialised: false,
      showRoomFormModal: false,
      roomToEdit: null,
      windowWidth: 0,
      searchField: '',
    };
  },
  computed: {
    rooms() {
      if (this.$matrix.client === null) {
        return [];
      }
      return this.$matrix.client.getRooms();
    },

    currentRoom() {
      if (this.isInitialised && this.currentRoomId) {
        return this.$matrix.client.getRoom(this.currentRoomId);
      }
      return null;
    },
    myRoomMember() {
      if (!this.currentRoom) {
        return null;
      }
      return this.currentRoom.getMember(this.$matrix.client.getUserId());
    },
    isSmallWidth() {
      // TODO: Make through constant
      // SM iView width
      return this.windowWidth < 768;
    },

    searchOptions() {
      if (!this.searchField) {
        return [];
      }
      return this.$matrix.state.rooms.filter(r => r.name.toUpperCase().indexOf(this.searchField.toUpperCase()) !== -1);
    },
  },
  created() {
    if (this.$matrix.client) {
      this.isInitialised = true;
    }

    this.$matrix.event.$on("started", () => (this.isInitialised = true));

    window.addEventListener("resize", this.handleResize);
    this.handleResize();
  },
  destroyed() {
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    clickOnRoom(room) {
      this.currentRoomId = room.roomId;
    },

    editCurrentRoom() {
      this.showRoomFormModal = true;
    },

    onEditRoom() {
      this.roomToEdit = this.currentRoom;
      this.showRoomFormModal = true;
    },

    onCloseRoom() {
      this.currentRoomId = null;
      this.roomToEdit = null;
    },

    onSelectSearch(roomId) {
      if (!roomId) {
        return;
      }
      this.currentRoomId = roomId;
      this.$nextTick(() => this.searchField = '');
    },

    handleResize() {
      this.windowWidth = window.innerWidth;
    },
  }
};
</script>

<style lang="less" scoped>
// #cw-vertical-split {
//   height: 100%;
// }

@border-color-base: #dddee1;
@background-color-select-hover: #dddee1;
@primary-color: blue;

@header-height: 56px;

#client-window {
  display: inline-flex;
  height: calc(~'100vh - 48px - 108px');
  width: 100%;

  .header {
    width: 100%;
    padding: 12px 16px;
    display: inline-flex;
    align-items: center;
    border-bottom: 1px solid @border-color-base;
    height: @header-height;

    div:first-of-type {
      flex: 1;
      margin-right: 16px;
    }
  }

  .rooms-side {
    max-width: 28em;
    border-right: 1px solid @border-color-base;

    .header {
      border-bottom: 1px solid transparent;
    }

    .rooms-list {
      height: calc(~'100% - 56px');

      & > div {
        height: 100%;
      }
    }
  }

  .conversation-side {
    flex: 1;
    position: relative;

    .empty {
      height: 100%;
      text-align: center;
      display: flex;
      width: 100%;
      justify-content: center;
      align-items: center;
    }

    .messages-list {
      position: absolute;
      width: 100%;
      height: calc(~'100vh - 364px');
    }
    .message-form {
      background-color: white;
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 16px 12px;
    }
  }

  @media (max-width: 768px) {
    .rooms-side {
      width: 100%;
      max-width: 100%;
      border-right: none;
    }
  }
}
</style>

<style lang="less">
.rooms-list {

  & > div {
    height: 100% !important;
  }
}
</style>

