<template>
  <div :class="classNames.sendMessageContainer">
    <input v-show="false"
             type="file"
             @change="imageFileChanged"
             ref="openImageFiles"
             accept="image/*"
             multiple>
    <input v-show="false"
             type="file"
             @change="textFileChanged"
             ref="openTextFiles"
             accept="text/plain"
             multiple>
    <div :class="classNames.selectedFileBox" v-if="images.length || selectedFiles.length">
      <div :class="classNames.showImages">
        <div :class="classNames.addMore" v-on="{click: images.length ? uploadImageFile : uploadTextFile}">
          <img :class="classNames.addIcon" src="../assets/plus-icon.svg">
          <p>Add More</p>
        </div>
        <swiper :options="selectedImageSwiperOption" ref="showFileSwiper" v-if="images.length">
          <swiper-slide class="images" :key="image" v-for="image in images">
            <img :src="image"
                 @click="$emit('preview', image)"
            >
          </swiper-slide>
        </swiper>
        <swiper :options="selectedImageSwiperOption" ref="showFileSwiper" v-else-if="selectedFiles.length">
          <swiper-slide :key="selectedFile" v-for="selectedFile in selectedFiles">
            <div class="files">
              <img class="file-icon" src="../assets/file-icon.svg" alt="">
              <p>{{ selectedFile }}</p>
            </div>
          </swiper-slide>
        </swiper>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
      </div>
      <div :class="classNames.cancelIcon">
        <img
           src="../assets/cancel-icon.svg"
           @click="closesImagesContainer"
        >
      </div>
    </div>
    <div :class="classNames.selectFiles"
         v-if="showAttachIcons && images.length === 0 && selectedFiles.length === 0"
    >
      <img :class="classNames.imageAttach"
           src="../assets/image-attach-icon.svg"
           @click="uploadImageFile"
      >
      <img :class="classNames.fileAttach"
           src="../assets/file-attach-icon.svg"
           @click="uploadTextFile"
      >
      <img :class="classNames.cancelIcon"
           src="../assets/cancel-icon.svg"
           @click="showAttachIcons = false"
      >
    </div>
    <div :class="classNames.replyMessageBox" v-if="showReplyBox">
      <img class="reply-icon" src="../assets/reply-icon.svg">
      <span class="name">{{ replyMessage.name}}</span>
      <span class="text">{{ replyMessage.text }}</span>
      <img class="cancel-icon" src="../assets/cancel-icon.svg" @click="closesReplyBox">
    </div>
    <div :class="classNames.sendMessage">
      <div class="attach-button">
        <img class="attach-icon"
             src="../assets/attach-icon.svg"
             @click="showAttachIcons = true"
        >
      </div>
      <textarea :class="classNames.message"
                name="message"
                placeholder="type here..."
                >

      </textarea>
      <div :class="classNames.sendButton">
        <img class="send-icon"
             src="../assets/send-message-icon.svg"
        >
      </div>
    </div>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'SendMessage',
  props: ['classNames', 'replyMessage', 'text'],
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      showAttachIcons: false,
      images: [],
      selectedFiles: [],
      fileNames: [],
      selectedImageSwiperOption: {
        slidesPerView: 9,
        spaceBetween: 15,
        loopFillGroupWithBlank: false,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      showReplyBox: false
    }
  },
  methods: {
    uploadImageFile () {
      this.$refs.openImageFiles.click()
    },
    uploadTextFile () {
      this.$refs.openTextFiles.click()
    },
    imageFileChanged (event) {
      const files = event.target.files
      for (let file of files) {
        this.images.push(URL.createObjectURL(file))
      }
    },
    textFileChanged (event) {
      const files = event.target.files
      for (let file of files) {
        this.selectedFiles.push(file.name)
      }
    },
    closesImagesContainer () {
      this.showAttachIcons = false
      this.images = []
      this.selectedFiles = []
    },
    closesReplyBox () {
      this.showReplyBox = false
      this.$emit('nullifyReplyMessage')
    },
    showFileSwiper () {
      return this.$refs.showImageSwiper.swiper
    }

  },
  watch: {
    'replyMessage' (newValue) {
      if (newValue) {
        this.showReplyBox = true
      }
    }
  }
}
</script>

<style lang="sass" scoped>
  @import "../styles/global"
  .send-message-container
    grid-column: 1 / -1
    display: grid
    grid-template-rows: auto auto
    position: relative
    background-color: #FFF
    .selected-file-box
      position: absolute
      display: grid
      box-sizing: border-box
      grid-template-columns: 20px 1fr 20px
      grid-column-gap: 25px
      width: 100%
      bottom: 100%
      padding: 15px 25px 0 20px
      background-color: #FFF
      z-index: 1005
      .show-images
        display: grid
        grid-column: 2
        grid-template-columns: 88px 1fr
        grid-template-rows: 88px
        grid-column-gap: 15px
        border-radius: 5px
        .swiper-container
          margin: 0 !important
          .swiper-slide
            margin-right: 15px !important
            width: 88px !important
        .images
          overflow: hidden
          align-content: center
          justify-content: center
          img
            height: 100%
        .add-more, .files
          display: grid
          grid-template-rows: auto auto
          justify-items: center
          grid-row-gap: 5px
          height: 100%
          border: 1px solid $dark-primary-color
          border-radius: 5px
          width: 100%
          box-sizing: border-box
          &.files
            width: 88px !important
          &.add-more
            cursor: pointer
          .add-icon
            width: 15px
            align-self: center
          .file-icon
            width: 30px
            align-self: center
      .cancel-icon
        width: 15px
        justify-self: center
        cursor: pointer
    .select-files
      display: grid
      grid-template-columns: auto auto 1fr
      grid-column-gap: 20px
      padding: 15px 20px 0 65px
      .file-attach, .image-attach
        width: 30px
      .cancel-icon
        width: 15px
        display: grid
        justify-self: end
        cursor: pointer
    .reply-message-box
      display: grid
      position: absolute
      grid-template-columns: auto 1fr auto
      grid-template-rows: 1fr 1fr
      grid-row-gap: 10px
      grid-column-gap: 20px
      padding: 14px 20px 8px 20px
      bottom: 100%
      width: 100%
      box-sizing: border-box
      background-color: #FFF
      align-items: center
      img
        grid-row: 1 / -1
        align-self: start
        &:last-of-type
          grid-column-end: -1
      .message-text
        display: grid
        grid-template-rows: 1fr 1fr
        grid-row-gap: 10px
      .ellipsis
        white-space: nowrap
        overflow: hidden
        text-overflow: ellipsis
        .name
          font-size: 18px
      span
        overflow: hidden
        white-space: nowrap
        -ms-text-overflow: ellipsis
        text-overflow: ellipsis
      .cancel-icon
        width: 15px
        cursor: pointer
      .reply-icon
        width: 24px
        align-self: center
    .send-message
      display: grid
      grid-template-columns: auto 1fr auto
      padding: 12px 20px
      grid-column-gap: 20px
      .attach-button
        align-self: center
        .attach-icon
          width: 24px
          cursor: pointer
      .message
        padding: 5px
        resize: none
        border-radius: 5px
    .send-button
      align-self: center
      border: none
      border-radius: 5px
      cursor: pointer
      .send-icon
        width: 24px
</style>
