<template>
  <div :class="classNames.messageMenu">
    <img :class="classNames.moreIcon"
         :src="isMine ? moreIcon.white : moreIcon.black"
         @click="showMenu(messageId)"
    >
    <div v-if="showingMenu === messageId && !notSent && isMine"
         :class="classNames.menu"
         v-on-clickaway="hideMenu"
    >
      <p class="reply" @click="$emit('reply')">Reply</p>
      <p>Edit</p>
      <p>Delete</p>
    </div>
    <div v-else-if="showingMenu === messageId && notSent"
         :class="classNames.menu"
         v-on-clickaway="hideMenu"
    >
      <p>Resend</p>
      <p>Delete</p>
    </div>
    <div v-else-if="showingMenu === messageId && !isMine"
         :class="classNames.menu"
         v-on-clickaway="hideMenu"
    >
      <p class="reply" @click="$emit('reply')">Reply</p>
      <p>Delete</p>
    </div>
  </div>
</template>

<script>
import { mixin as clickaway } from 'vue-clickaway'
export default {
  mixins: [ clickaway ],
  name: 'MessageMenu',
  data () {
    return {
      moreIcon: {
        black: require('../assets/more-icon.svg'),
        white: require('../assets/more-icon-white.svg')
      },
      showingMenu: false
    }
  },
  props: ['classNames', 'isMine', 'messageId', 'notSent'],
  methods: {
    showMenu (key) {
      this.showingMenu = key
    },
    hideMenu () {
      this.showingMenu = false
    }
  }
}
</script>

<style lang="sass" scoped>
  @import "../styles/global"
  .message-menu
    position: relative
    z-index: 100
    .more-icon
      position: absolute
      width: 15px
      right: 0
      cursor: pointer
      padding: 10px 0
    .menu
      display: grid
      grid-row-gap: 10px
      position: absolute
      padding: 10px 20px
      top: 100%
      right: 0
      background-color: $tertiary-color
      border-radius: 5px
      color: #232323
      box-shadow: $box-shadow-color
      p
        font-size: 12px
        cursor: pointer
</style>
