<template>
  <div>
    <div class="assets-container">
      <template v-if="!displayList.length">
        <div class="p-absolute-middle">
          {{ $t('product.noAsset') }}
        </div>
      </template>
      <template v-else>
        <el-row>
          <el-col
            :xs="24"
            :sm="12"
            :lg="8"
            :xl="6"
            v-for="(item, index) in displayList"
            :key="index"
          >
            <div
              class="mother-div"
              @mouseenter="item.show = true"
              @mouseleave="item.show = false"
              draggable="true"
              @dragstart="getBeforeIndex(index)"
              @drop="getAfterIndex(index)"
              @dragenter.prevent
              @dragover.prevent
            >
              <div class="banner-container text-center">
                <img :src="item.url" alt="" v-if="item.file_type === 'IMAGE'" />

                <div v-else>
                  <video class="w-100 position" :src="item.url"></video>
                </div>
              </div>

              <div
                :class="{
                  'img-overlap-reorder': item.show,
                  'default-hidden': !item.show
                }"
              >
                <div>
                  <em
                    v-if="index !== 0"
                    class="el-icon-arrow-left img-icon border"
                    @click="imageReorderByIcon(index, 'left')"
                  ></em>
                  <em
                    v-if="index !== displayList.length - 1"
                    class="el-icon-arrow-right ml-20 img-icon border"
                    @click="imageReorderByIcon(index, 'right')"
                  ></em>
                </div>
              </div>

              <div
                :class="{
                  'img-overlap': item.show,
                  'default-hidden': !item.show
                }"
              >
                <div>
                  <em
                    class="el-icon-view img-icon"
                    @click="onPreview(item)"
                  ></em>
                  <em
                    class="el-icon-delete ml-15 img-icon"
                    @click="onRemove(index)"
                    v-if="type !== 'BANNER_REARRANGE'"
                  ></em>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </template>
    </div>

    <el-dialog
      width="60%"
      :title="$t('general.preview')"
      :visible.sync="showPreview"
      :destroy-on-close="true"
      append-to-body
    >
      <PreviewDams :item="selectedFilePreview" :edit="false" />
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import { DamsItem } from '../../model/dams/dams-item.model'
import { confirmMsg } from '../../utils/message'
import PreviewDams from '../../components/Dams/components/preview-dams.vue'

@Component({
  name: 'DisplayDragDrop',
  components: {
    PreviewDams
  }
})
export default class extends Vue {
  @Prop({ default: [] }) private list!: any
  @Prop({ default: 'PRODUCT' }) private type!: 'PRODUCT' | 'BANNER_REARRANGE'

  displayList: any = []

  dragBeforeIndex = 0
  dragAfterIndex = 0

  showPreview = false
  selectedFilePreview = new DamsItem()

  showUploadDams = false
  selectedFiles: DamsItem[] = []

  @Watch('list')
  watchList() {
    this.displayList = this.list
  }

  imageReorderByIcon(i: number, direction: 'left' | 'right') {
    this.dragBeforeIndex = i
    if (direction === 'left') {
      this.dragAfterIndex = i - 1
    } else {
      this.dragAfterIndex = i + 1
    }
    this.getAfterIndex(this.dragAfterIndex)
  }

  getBeforeIndex(i: number) {
    this.dragBeforeIndex = i
  }

  getAfterIndex(i: number) {
    this.dragAfterIndex = i
    const before = this.displayList[this.dragBeforeIndex]
    const after = this.displayList[this.dragAfterIndex]

    this.$nextTick(() => {
      this.displayList[this.dragBeforeIndex] = after
      this.displayList[this.dragAfterIndex] = before

      if (this.type === 'PRODUCT') {
        if (this.displayList[0].file_type === 'VIDEO') {
          this.$message({
            message: this.$t('product.videoCannotFirst') as string,
            type: 'warning'
          })
          this.displayList[this.dragBeforeIndex] = before
          this.displayList[this.dragAfterIndex] = after
          return
        }
      }

      if (this.displayList && this.displayList.length) {
        this.displayList = this.displayList.map((item: any) => {
          const _i = item
          _i.show = false
          return _i
        })

        this.emitNewList()

        if (this.type === 'BANNER_REARRANGE') {
          this.$emit('rearrange', [before, after])
        }
      }
    })
  }

  onPreview(url: DamsItem) {
    if (url) {
      this.selectedFilePreview.url = url.url
      this.selectedFilePreview.file_type = url.file_type
      if (this.selectedFilePreview.url) {
        this.selectedFilePreview.url = decodeURI(this.selectedFilePreview.url)
      }
      this.showPreview = true
    }
  }

  async onRemove(i: number) {
    if (this.type === 'BANNER_REARRANGE') {
      return
    }

    if (await confirmMsg('product.confirmRemoveAsset', true, true)) {
      this.displayList.splice(i, 1)

      this.emitNewList()
    }
  }

  emitNewList() {
    this.$emit('newlist', this.displayList)
  }
}
</script>

<style lang="scss" scoped>
.assets-container {
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  box-sizing: border-box;
  min-height: 180px;
  text-align: center;
  position: relative;
  overflow: hidden;

  .mother-div {
    position: relative;
    width: 100%;

    &:hover {
      height: 100%;
      width: 100%;
      cursor: pointer;

      .banner-container {
        background-color: grey;

        img {
          opacity: 0.5;
        }
      }
    }

    .banner-container {
      margin: 10px;
      border: 1px solid rgba(220, 220, 220, 1);
      background-color: rgba(220, 220, 220, 0.2);
      position: relative;
      height: 300px;

      img,
      video {
        position: relative;
        width: 100%;
        height: 298px;
        object-fit: contain;
      }
    }

    .img-overlap-reorder {
      position: absolute;
      top: 8%;
      left: 50%;
      transform: translateX(-50%);
    }

    .img-overlap {
      position: absolute;
      bottom: 10%;
      left: 50%;
      transform: translateX(-50%);
    }

    .default-hidden {
      display: none;
    }

    .img-icon {
      color: white;
      font-size: 20px;
      width: 25px;
      height: 25px;
      cursor: pointer;

      &.border {
        font-size: 15px;
        padding-top: 4px;
        border: 1px solid white;
        border-radius: 50%;
      }
    }
  }
}
</style>

<style lang="scss">
.is-error {
  .assets-container {
    border-color: #ff4949 !important;
  }
}

.el-form.disabled {
  .el-icon-arrow-left,
  .el-icon-arrow-right,
  .el-icon-delete {
    display: none !important;
  }
}
</style>
