<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="{ name: 'activity', pull: 'clone', put: false }" itemKey="name" tag="tbody" animation="300" @end="onEnd"  :fallbackTolerance="5" :forceFallback="true" :ghostClass="'ghostSelected'" :dragClass="'dragSelected'" :sort="false">
          <template #item="{ element, index }">
            <tr @dblclick="moveActItem(index, element)" :class="listSequence.includes(element) ? 'text-primary' : ''">
              <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="{name: 'activity'}" itemKey="name" animation="300" :forceFallback="true" :fallbackTolerance="5" :dragClass="'!opacity-100'" @start="onStart" @end="onEnd" :component-data="getComponentData()" >
          <template #item="{ element, index }">
            <div>
              <div class="flex justify-center items-center">
                <div class="w-full p-2 border border-primary rounded text-primary bg-neutral-10" @dblclick="moveSeqItem(index, element)"><span>{{ element.label }}</span>
                </div>
                <span class="material-symbols-outlined pl-1 cursor-pointer duration-300 hover:text-danger" @click.stop.native="moveSeqItem(index, element)">close</span>
              </div>
              <span v-show="index !== listSeq.length - 1 && index !== lastItemIndex - 1" class="pi pi-chevron-down !text-lg inline-block py-2 pr-7"></span>
            </div>
          </template>
        </draggable>
      </div>
    </div>
  </div>
</template>
<script>
import { sortNumEngZhtwForFilter } from '@/module/sortNumEngZhtw.js';

export default {
  props: {
    filterTaskData: {
      type: Array,
      required: true,
    },
    progressWidth: {
      type: Function,
      required: false,
    },
    listSeq: {
      type: Array,
      required: true,
    }
  },
  data() {
    return {
      listSequence: [],
      filteredData: this.filterTaskData,
      lastItemIndex: null,
    }
  },
  computed: {
    data: function() {
      // Activity List 要排序
      this.filteredData = this.filteredData.sort((x, y) => {
        y.occurrences - x.occurrences
        if(y.occurrences === x.occurrences) sortNumEngZhtwForFilter(x.label, y.label);
      });
      return this.filteredData;
    }
  },
  watch: {
    listSeq(newval){
      this.listSequence = newval;
    },
    filterTaskData(newval){
      this.filteredData = newval;
    }
  },
  methods: {
    /**
     * double click Activity List
     * @param {number} index data item index
     * @param {object} element data item
     */
    moveActItem(index, element){
      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);
    },
    /**
     * get listSequence
     */
     getComponentData(){
      this.$emit('update:listSeq', this.listSequence);
    },
    /**
     * Element dragging started
     */
    onStart(evt) {
      const lastChild = evt.to.lastChild.lastChild;
      lastChild.style.display = 'none';
      // 隱藏拖曳元素原位置
      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) {
      // 顯示拖曳元素
      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;
    },
  }
}
</script>
<style scoped>
.ghostSelected {
  @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
}
</style>
