<template>
  <!-- Activity List -->
  <div class="bg-neutral-10 border border-neutral-300 rounded-xl px-4 w-full h-full">
    <div class="flex justify-between items-center my-2 flex-wrap">
      <p class="h2">Activity List&nbsp({{ data.length }})</p>
    </div>
    <!-- Table -->
    <div class="overflow-y-auto overflow-x-auto scrollbar -mx-2 h-[calc(100%_-_64px)]">
      <table class="border-separate border-spacing-x-2 table-auto min-w-full text-sm" :class="data.length === 0? 'h-full': null">
        <thead class="sticky top-0 left-0 z-10 bg-neutral-10">
          <tr>
            <th class="text-start font-semibold leading-10 px-2 border-b border-neutral-500">Activity</th>
            <th class="font-semibold leading-10 px-2 border-b border-neutral-500 text-start" colspan="3">Occurrences</th>
          </tr>
        </thead>
        <Draggable :list="data" group="activity" itemKey="name" tag="tbody" animation="300" @end="onEnd" :fallbackTolerance="5" :sort="false" :forceFallback="true" :ghostClass="'ghostSelected'" :dragClass="'dragSelected'">
          <template #item="{ element, index }">
            <tr @dblclick="moveActItem(index, element)">
              <td class="px-4 py-2" :id="element.label">{{ element.label }}</td>
              <td class="px-4 py-2 w-24">
                <div class="h-4 min-w-[96px] bg-neutral-300 rounded-sm overflow-hidden">
                  <div class="h-full bg-primary" :style="progressWidth(element.occ_value)"></div>
                </div>
              </td>
              <td class="px-4 py-2 text-right">{{ element.occurrences }}</td>
              <td class="px-4 py-2 text-right">{{ element.occurrence_ratio }}</td>
            </tr>
          </template>
        </Draggable>
      </table>
    </div>
  </div>
  <!-- Sequence -->
  <div class="bg-neutral-10 border border-neutral-300 rounded-xl px-4 pb-4 w-full h-full relative text-sm">
    <p class="h2 border-b border-500 my-2">Sequence&nbsp({{ listSeq.length }})</p>
    <!-- No Data -->
    <div v-if="listSequence.length === 0" class="p-4 w-[calc(100%_-_32px)] h-5/6 flex justify-center items-center absolute">
      <p class="text-neutral-500">Please drag and drop activity(s) here and sort.</p>
    </div>
    <!-- Have Data -->
    <div class="py-4 m-auto w-full  h-[calc(100%_-_56px)]">
      <div class="w-full h-full overflow-y-auto overflow-x-auto scrollbar px-4 text-center listSequence">
        <draggable class="h-full" :list="listSequence" group="activity" itemKey="name" animation="300" :forceFallback="true" :dragClass="'dragSelected'" :fallbackTolerance="5" @start="onStart" @end="onEnd" @choose="onChoose">
          <template #item="{ element, index }">
            <div>
              <div class="w-full p-2 border border-primary rounded text-primary" @dblclick="moveSeqItem(index, element)">
                <span>{{ element.label }}</span>
              </div>
              <span v-show="index !== listSeq.length - 1 && index !== lastItemIndex - 1" class="pi pi-chevron-down !text-lg inline-block py-2"></span>
            </div>
          </template>
        </draggable>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    filterTaskData: {
      type: Array,
      required: true,
    },
    progressWidth: {
      type: Function,
      required: false,
    },
    listSeq: {
      type: Array,
      required: true,
    }
  },
  data() {
    return {
      listSequence: this.listSeq,
      filteredData: this.filterTaskData,
      lastItemIndex: null,
      isDragging: false,
    }
  },
  computed: {
    data: function() {
      // TODO Activity List 的 dblclick, drag & drop 要改假刪除
      // Activity List 要排序
      return this.filteredData.sort((x, y) => y.occurrences - x.occurrences);
    }
  },
  watch: {
    listSeq(newval){
      this.listSequence = newval;
    },
    filterTaskData(newval){
      this.data = newval;
    }
  },
  methods: {
    /**
     * double click Activity List
     * @param {number} index data item index
     * @param {object} element data item
     */
    moveActItem(index, element){
      this.data.splice(index, 1);
      this.listSequence.push(element);
    },
    /**
     * double click Sequence List
     * @param {number} index data item index
     * @param {object} element data item
     */
    moveSeqItem(index, element){
      this.listSequence.splice(index, 1);
      this.data.push(element);
    },
    /**
     * Element dragging started
     */
    onStart(evt) {
      this.isDragging = true;
      // 隱藏拖曳元素原位置
      const originalElement = evt.item;
      originalElement.style.display = 'none';
      // 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
      const listIndex = this.listSequence.length - 1;
      if(evt.oldIndex === listIndex) this.lastItemIndex  = listIndex;
    },
    /**
     * Element dragging ended
     */
    onEnd(evt) {
      this.isDragging = false;
      // 顯示拖曳元素
      const originalElement = evt.item;
      originalElement.style.display = '';
      // 拖曳結束要顯示箭頭，但最後一個不用
      const lastChild = evt.item.lastChild;
      const listIndex = this.listSequence.length - 1
      evt.oldIndex !== listIndex ? lastChild.style.display = '' : null;
      // reset: 拖曳最後一個元素時，倒數第二的元素的箭頭要隱藏
      this.lastItemIndex = null;
      this.$emit('update:listSeq', this.listSequence);

    },
    /**
     * Element is chosen
     */
    onChoose(evt) {
      // 拖曳時要隱藏箭頭
      // isDragging: 只有拖曳才要隱藏，dblclick 不用
      const lastChild = evt.item.lastChild;
      if (this.isDragging) lastChild.style.display = 'none';
    }
  }
}
</script>

<style scoped>
.ghostSelected {
  /* @apply shadow-inner bg-neutral-900 shadow-neutral-500 */
  @apply shadow-[0px_0px_100px_-10px_inset] shadow-neutral-200
}
.dragSelected {
  @apply shadow-[0px_0px_4px_2px] bg-neutral-10 shadow-neutral-300 !opacity-100
}
.dragged-item {
  @apply !opacity-100
}
</style>
