<template>
  <div :class="classNames.chatBox">
    <div class="chat-details"
         v-for="(item, index) in messageContainer"
         :key="item.id"
    >
      <div class="date-separator"
           v-if="showDate(index)"
      >
        <span>
          {{ getMonth(item.date) }}<span v-if="showYear(index)">, {{ getYear(item.date) }}</span>
        </span>
      </div>
      <div class="show-message"
           v-if="item.messageType === 'message'"
           :class="item.isMine ? classNames.myMessage : classNames.otherMessage"
      >
        <avatar :avatarPath="item.avatarPath"
              v-if="!item.isMine"
              :isOnline="item.isOnline"
              :classNames="classNames"
        />
        <div :class="classNames.messageContainer">
          <div :class="classNames.messageHeader">
            <p :class="classNames.messageTitle">
              {{ item.name }}
            </p>
            <message-menu :classNames="classNames"
                          :isMine="item.isMine"
                          :messageId="item.id"
                          :notSent="item.notSent"
                          @reply="passReplyData(item)"
            />
          </div>
          <p :class="classNames.messageText">
            {{ item.text }}
          </p>
          <div :class="classNames.messageMetaData">
            <p>{{ formatDate(item.date) }}</p>
            <v-popover v-if="item.read">
              <i class="icon icon-read-by-icon-tick"
              >
              </i>
              <message-viewers :classNames="classNames"
                               :viewers="item.viewers"
                               slot="popover"
              />
            </v-popover>
            <i class="icon icon-deliver-send-icon"
               v-if="item.isMine && item.deliver">
            </i>
            <i class="icon icon-not-send-icon"
               v-if="item.isMine && item.notSent">
            </i>
          </div>
        </div>
      </div>
      <div class="room-event-box" v-else-if="item.messageType === 'event'">
        <room-event>{{ item.text }}</room-event>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import Avatar from './../components/Avatar'
import RoomEvent from './../components/RoomEvent'
import MessageMenu from './../components/MessageMenu'
import MessageViewers from './../components/MessageViewers'
import { mixin as clickaway } from 'vue-clickaway'
import VTooltip from 'v-tooltip'
Vue.use(VTooltip)
export default {
  name: 'ChatBox',
  mixins: [ clickaway ],
  data () {
    return {
      messageContainer: [
        {
          name: 'David',
          text: 'ipsum dolor sit amet, consectetur adipisicing elitLorem ipsum dolor sit amet,ip' +
            'elitLorem ipsum dolor sit amet,ipsuming elitLorem ipsum dolor sit amet,ipsuming el' +
            'amet,ipsuming elitLorem ipsum dolor sit amet,ipsuming elitLorem ipsum dolor sit amet,' +
            'amet,ipsuming elitLorem ipsum dolor sit amet amet,ipsuming elitLorem ipsum dolor sit ' +
            'amet amet,ipsuming elitLorem ipsum dolor sit amet amet,ipsuming elitLorem ipsum dolor ',
          messageType: 'message',
          isMine: false,
          avatarPath: require('../assets/member-icon-01.png'),
          isOnline: false,
          date: '2016-11-14T05:19:30.118Z',
          read: true,
          id: 1,
          viewers: [
            {
              id: 1
            },
            {
              id: 2
            },
            {
              id: 3
            },
            {
              id: 4
            },
            {
              id: 5
            }
          ]
        },
        {
          name: 'Helen',
          text: 'ipsum',
          messageType: 'message',
          isMine: false,
          avatarPath: require('../assets/member-icon-01.png'),
          isOnline: true,
          date: '2017-04-01T11:19:30.118Z',
          read: true,
          id: 2,
          viewers: [
            {
              id: 1
            },
            {
              id: 2
            },
            {
              id: 3
            }
          ]
        },
        {
          text: 'Status is changed',
          messageType: 'event',
          date: '2017-04-01T11:19:35.118Z',
          id: 3
        },
        {
          name: 'Me',
          text: 'consectetur adipisicing' +
            'ipsum dolor sit amet, consectetur adipisicingipsum dolor sit amet, consecteturad ' +
            'pisicing ipsum dolor sit amet, consectetur adipisicingipsum dolor sit amet' +
            'consectetur adipisicingipsum dolor sit amet, consectetur adipisicingipsum dolor' +
            'adipisicingipsum dolor sit amet, consectetur adipisicingipsum dolor sit amet, consec' +
            'dolor sit amet, consectetur adipisicing ipsum dolor sit amet, consectetur adipisicin' +
            'consectetur adipisicingipsum dolor sit amet, consectetur adipisicingipsum dolor sit' +
            'consectetur adipisicingipsum dolor sit amet, consectetur adipisicingipsum dolor sit' +
            'consectetur adipisicingipsum dolor sit amet, consectetur adipisicingipsum dolor sit ' +
            'adipisicing',
          messageType: 'message',
          isMine: true,
          avatarPath: require('../assets/member-icon-01.png'),
          isOnline: false,
          date: '2018-09-25T11:19:30.118Z',
          deliver: false,
          notSent: true,
          read: false,
          id: 4
        },
        {
          name: 'Me',
          text: 'consectetur adipisicingipsum dolor sit amet, consectetur adipisicingipsum dolor' +
            'sit amet',
          messageType: 'message',
          isMine: true,
          isOnline: false,
          date: '2018-09-25T11:19:30.118Z',
          deliver: true,
          notSent: false,
          read: false,
          id: 5,
          viewers: [
            {
              id: 1
            },
            {
              id: 2
            },
            {
              id: 3
            }
          ]
        },
        {
          name: 'Me',
          text: 'consectetur adipisicingipsum dolor sit amet, consecteturdolor sit amet,' +
            'consectetur adipisicingipsum dolordolor sit amet, consectetur adipisicingipsum' +
            'dolordolor sit amet, consectetur adipisicingipsum dolordolor sit amet, consectetur ' +
            'adipisicingipsum dolordolor sit amet, consectetur adipisicingipsum dolordolor sit amet'+
            'consectetur adipisicingipsum dolor dolor sit amet, consectetur adipisicingipsum' +
            'dolordolor sit amet, consectetur adipisicingipsum dolor',
          messageType: 'message',
          isMine: true,
          isOnline: false,
          date: '2018-10-25T11:19:30.118Z',
          deliver: false,
          notSent: false,
          read: true,
          id: 6,
          viewers: [
            {
              id: 1
            },
            {
              id: 2
            }
          ]

        }
      ],
      showingReadByBox: false
    }
  },
  components: {
    RoomEvent,
    Avatar,
    MessageMenu,
    MessageViewers
  },
  props: ['classNames', 'previewImage'],
  methods: {
    isThisYear (isoDateString) {
      let now = new Date()
      let date = new Date(isoDateString)
      return now.getFullYear() === date.getFullYear()
    },
    formatDate (isoDateString) {
      let date = new Date(isoDateString)
      let formatedDate = ''

      // handling months and days

      const months = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
      ]
      formatedDate = `${months[date.getMonth()]} ${date.getDate()}`

      // Handling year

      if (!this.isThisYear(isoDateString)) {
        formatedDate += `, ${date.getFullYear()}`
      }

      // Handling time

      let hour = date.getHours()
      let amOrPm = 'AM'
      if (hour >= 12) {
        hour -= 12
        amOrPm = 'PM'
      }
      formatedDate += `    ${hour}:${date.getMinutes()} ${amOrPm}`
      return formatedDate
    },
    passReplyData (message) {
      this.$emit('selectedMessage', message)
    },
    getMonth (isoDateString) {
      const months = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
      ]
      let date = new Date(isoDateString)
      return months[date.getMonth()]
    },
    getYear (isoDateString) {
      let date = new Date(isoDateString)
      return date.getFullYear()
    },
    getMonthYear (isoDateString) {
      return `${this.getMonth(isoDateString)}, ${this.getYear(isoDateString)}`
    },
    showDate (index) {
      return index === 0 ||
        (this.getMonthYear(this.messageContainer[index].date) !==
        this.getMonthYear(this.messageContainer[index - 1].date))
    },
    showYear (index) {
      return index === 0 ||
        (this.getYear(this.messageContainer[index].date) !==
        this.getYear(this.messageContainer[index - 1].date))
    }
  }
}
</script>

<style lang="sass" scoped>
  @import "../styles/global"
  .chat-box
    display: grid
    align-content: start
    padding: 40px
    grid-row-gap: 25px
    overflow-y: auto
    grid-column: 1 / 2
    grid-row: 1 / 2
    .show-image-preview
      display: grid
      grid-template-rows: auto 1fr
      position: absolute
      width: 100%
      z-index: 1000
      .close-preview
        display: grid
        grid-template-columns: 1fr 1fr
        background-color: $light-primary-color
        padding: 20px 40px
        font-size: 18px
        color: #FFF
        .icon-close-icon
          font-size: 16px
          justify-self: end
      .image-preview
        background-color: #FFF
        justify-items: center
        padding: 110px 200px
        height: 100%
    .chat-details
      display: grid
      grid-template-rows: auto auto
      grid-row-gap: 20px
      .date-separator
        display: grid
        justify-self: center
        padding: 10px
        background-color: #C9C9C9
        border-radius: 5px
        font-size: 14px
        color: $dark-placeholder-text-color
      .room-event-box
        display: grid
        grid-template-columns: minmax(auto, calc(100% - 400px))
        justify-content: center
      .title
        font-size: 18px
      .other-message, .my-message
        display: grid
        justify-content: start
        align-items: start
        .message-container
          grid-row-gap: 10px
          padding: 10px 20px
          min-width: 20%
          display: grid
          border-radius: 5px
          &:last-child
            background-color: red
          .text
            line-height: 20px
            font-size: 14px
          .message-meta-data
            display: grid
            justify-self: end
            grid-template-columns: auto auto
            grid-column-gap: 10px
            font-size: 12px
            position: relative
            .icon
              display: grid
              align-self: center
              font-size: 10px
              &.icon-not-send-icon
                font-size: 20px
              &.icon-read-by-icon-tick
                cursor: pointer
        &.other-message
          grid-template-columns: auto minmax(auto, 45%)
          grid-column-gap: 20px
          color: $dark-text-color
          .message-container
            justify-self: start
            background-color: #FFF
            .message-meta-data
              color: rgba(35, 35, 35, .5)
        &.my-message
          grid-template-columns: minmax(auto, 45%)
          justify-content: end
          .message-container
            justify-self: end
            background-color: $light-primary-color
            color: #FFF
            .message-meta-data
              color: rgba(255, 255, 255, .5)
        .message-header
          display: grid
          grid-template-columns: auto 1fr
          position: relative

</style>
