<template>
  <!-- ion-item-sliding -->
  <ion-item-sliding lines="none" class="loc-item" ref="slidingItem">
    <ion-item lines="none"  @click="$emit('openChat', chat)">
      <ion-avatar class="loc-avatar" slot="start">
        <img :src="avatar">
        <span v-if="!replied" class="red-circle"></span>
      </ion-avatar>

      <ion-label class="loc-label">

        <div class="first-line">
          <span class="name" :dynClass="!isSeen ? 'is-seen' : ''">{{name}}</span>
          <span class="date">{{datetime}}</span>
        </div>

        <div class="second-line" :dynClass="!isSeen ? 'is-seen' : ''">{{chat.post ? chat.post.subject : ''}}</div> 
        
        <div class="third-line">
          <span class="last-message" 
                :dynClass="!isSeen ? 'is-seen' : ''">{{chat.lastMessage ? chat.lastMessage.message : ''}}
          </span>
          <span class="chat-type-icon" 
                v-if="chat.post.chat_type === 'single' && !recoDate" 
                v-bind:style="{ color: chat.post.category.color}"> <ion-icon name="person"></ion-icon> </span>
          <span class="chat-type-icon" 
                v-else-if="chat.post.chat_type === 'group' && !recoDate" 
                v-bind:style="{ color: chat.post.category.color}"> <ion-icon name="people"></ion-icon> </span>
          <span class="chat-type-icon" 
                v-else-if="chat.post.chat_type === 'forum' && !recoDate" 
                v-bind:style="{ color: chat.post.category.color}"> <ion-icon name="paper"></ion-icon> </span>
        </div>

      </ion-label>
    </ion-item>
    <ion-item-options>
      <ion-item-option color="danger">
        <ion-icon 
        name="trash" 
        class="chat-del-button"         
        @click="chatDelButtonClicked()"></ion-icon>
      </ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

</template>

<script lang="ts">
import moment from 'moment';


export default {
  components: {
    
  },
  props: {
    me: {
      type: Object
    },
    chat: {
      type: Object
    },
    recoDate:{
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      
    };
  },
  computed: {
    avatar() {
      if (this.chat.lastMessage.sender.uid != this.me.uid) {
        return this.chat.lastMessage.sender.avatar;
      }
      for (var i = 0; i < this.chat.participants.length; ++i) {
        if (this.chat.participants[i].uid != this.me.uid) {
          return this.chat.participants[i].avatar;
        }
      }
    },
    name() {
      let users = [];
      if (this.chat.lastMessage.sender.uid !== this.me.uid) {
        return this.chat.lastMessage.sender.name;
      }
      for (var i = 0; i < this.chat.participants.length; ++i) {
        if (this.chat.participants[i].uid !== this.me.uid) {
          return this.chat.participants[i].name || this.chat.participants[i].nickname;
        }
      }
      return 'Unknown';
    },
    isSeen() {
      let lastMessage = this.chat.lastMessage;
      if (lastMessage.seenBy.includes(this.me.uid) && !(lastMessage.setToBeUnreadBy && lastMessage.setToBeUnreadBy.includes(this.me.uid))) {
        return true;
      }
      return false;
    },
    replied(){
      if(this.chat.post.chat_type === 'forum'){
        return true;
      }
      let lastMessage = this.chat.lastMessage;
      return lastMessage.sender.uid === this.me.uid;
    },
    prefix() {
      if (this.chat.post.user.uid == this.me.uid) {
        return "IN";
      }
      return "RE";
    },
    datetime() {
      let messageTstamp = this.chat.lastMessage.tstamp;
      let currentTstamp = moment().unix()*1000;

      // More than a week ago
      if(messageTstamp < currentTstamp - 7*24*60*60*1000) {
        return moment(messageTstamp).format('MMM D');
      }

      // More than a day ago
      if(messageTstamp < currentTstamp - 24*60*60*1000) {
        return moment(messageTstamp).format('ddd HH:mm');
      }

      // Less than a day ago
      return moment(messageTstamp).format('HH:mm');
    }
  },
  methods: {
    presentActionSheet() {
      return this.$ionic.actionSheetController
        .create({
          header: 'Options',
          buttons: [
            {
              text: 'Hide',
              handler: () => {
                console.log('Share clicked')
              },
            },
            {
              text: 'Mark as Unread',
              handler: () => {
                console.log('Play clicked')
              },
            },
            {
              text: 'Delete',
              role: 'destructive',
              handler: () => {
                console.log('Delete clicked')
              },
            },
            {
              text: 'Cancel',
              role: 'cancel',
              handler: () => {
                console.log('Cancel clicked')
              },
            },
          ],
        })
        .then(a => a.present())
    },
    chatDelButtonClicked(){
       this.$refs.slidingItem.close();
      return this.$ionic.alertController
        .create({
          header: 'Are you sure?',
          message: this.closeConfirmationText,
          buttons: [
            {
              text: 'No',
              role: 'cancel',
            },
            {
              text: 'Yes',
              handler: () => {
                this.$emit('deleteChat', this.chat);
              },
            },
          ]
        })
        .then(a => a.present());       
    }
  },    
}
</script>

<style scoped lang="css">
  .first-line{
    color: #666;
    font-size: 15px;
    text-transform: capitalize;
    width: 95%;
    padding-bottom: 3px;
  }

  .second-line{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #666; 
    width: 95%;
    font-size: 12px;
    color: black;
    padding-bottom: 2px;
  }

  .third-line{   
    width: 95%;
    display: flex;
    justify-content: space-between;
  }

  .name{
    color:black;
  }
  .date{
    float:right;
  }
  .chat-type-icon{
     flex: 0 0 auto;
  }

  .last-message{
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #666;    
    font-size: 13px;
  }
  .name[dynClass~=is-seen],
  .last-message[dynClass~=is-seen],
  .second-line[dynClass~=is-seen]  {
    font-weight: 700;
  }

  .loc-item {
    margin-top: 10px;
    --padding-start: 8px;
  }
  .loc-options {
    margin-top: 10px;
  }
  .loc-label {
    margin-right: 0px;
  }

  .loc-avatar {
    position: relative;
    margin-right: 12px;
    margin-left: -8px;
    width: 49px;
    height: 49px;
    background-color:#fff;
    bottom: 3px;
  }
  .loc-avatar .red-circle {
    position: absolute;
    top: 34px;
    left: 36px;
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background: rgb(237, 21, 86);
    border: 2px solid #fff;
  }
  .chat-del-button{
    font-size: 1.8em;
  }
</style>