<template>
  <div class="itf-board-column-wrapper">
    <div class="itf-board-cards-wrapper" ref="container" :class="{'empty-column': !items.length}">
      <template v-if="!items.length">
        <div class="empty-column-bg">
          <slot name="empty"></slot>
        </div>
      </template>
      <template v-else>
        <div v-for="(item, index) of items" :key="index" :data-card="index" :class="item.hidden ? 'd-none' : ''">
          <div accept-group="board-cards"
               class="itf-board-card-space"
               @enter="cardHighlight(index, 'enter', 'drop')"
               @leave="cardHighlight(index, 'leave', 'drop')"
               v-dropzone="{ payload: { index, item, column } }">
            <div class="itf-board-header-dropzone"></div>
          </div>
          <div group="board-cards"
               @drop="board.reorderCards"
               v-draggable="{ handle: true, payload: { index, item, column }, mirror: { xAxis: true, yAxis: true } }">
            <slot name="item" :item="item" :index="index"></slot>
          </div>
        </div>
      </template>
      <div @enter="cardHighlightLast('enter', 'drop')"
           @leave="cardHighlightLast('leave', 'drop')"
           accept-group="board-cards"
           class="itf-board-card-space bottom"
           v-dropzone="{ payload:{ last: true, column } }">
        <div class="itf-board-header-dropzone"></div>
      </div>

      <div v-if="isNewOptionVisible">
        <itf-text-field
          style="margin: -4px 0"
          ref="newOptionInput"
          v-model="newOption"
          :placeholder="newItemPlaceholder"
          @blur="onBlurOption"
          @keydown.enter="submitNewOption"
        />
      </div>
      <itf-button v-else-if="showAddButton" :loading="loading" block small class="text-muted" @click="addNewOption">
        <itf-icon name="plus" />
        {{ newItemText }}
      </itf-button>

    </div>
  </div>
</template>
<script>
import { Component, Prop, Vue, Inject } from 'vue-property-decorator';
import itfIcon from '../icon/Icon';
import itfButton from '../button/Button';
import loading from '../../directives/loading';
import itfForm from '../form/Form';
import itfEditButton from '../editable/EditButton';
import itfTextField from '../text-field/TextField.vue';
import createDraggable from '../sortable/draggable';

const { Node, ...draggableDirectives } = createDraggable({
  mirror: {
    yAxis: true,
    xAxis: true,
    constrainDimensions: true
  },
  scrollable: {
    speed: 20,
    sensitivity: 80
  }
});

export default @Component({
  components: {
    itfTextField,
    itfIcon,
    itfForm,
    itfEditButton,
    itfButton
  },
  directives: {
    ...draggableDirectives,
    loading
  }
})
class BoardColumn extends Vue {
  @Inject({ default: null }) board;

  @Prop() title;
  @Prop() column;
  @Prop(Array) items;
  @Prop(Boolean) showAddButton;
  @Prop(Boolean) cardSorting;
  @Prop(Boolean) loading;
  @Prop({ type: String, default: 'Add new task' }) newItemText;
  @Prop({ type: String, default: 'Type a new task...' }) newItemPlaceholder;

  isNewOptionVisible = false;
  newOption = '';

  beforeDestroy() {
    if (this.cardSorting) {
      Node.removeContainer(this.$refs.container);
    }
  }

  mounted() {
    if (this.cardSorting) {
      Node.addContainer(this.$refs.container);
    }
  }

  cardHighlight(index, state, className = 'over') {
    this.isHaveHighlight = state === 'enter';
    Array.from(this.$el.querySelectorAll(`[data-card="${index}"]`)).forEach(t=>{
      state === 'enter' ? t.classList.add(className) : t.classList.remove(className)
    });
  }
  cardHighlightLast(state, className = 'over') {
    Array.from(this.$el.querySelectorAll(`[data-card="${this.items.length - 1}"]`)).forEach(t=>{
      if (state === "enter") {
        t.classList.add(className);
        t.classList.add('bottom');
      } else {
        t.classList.remove(className);
        t.classList.remove('bottom');
      }
    });
  }

  onBlurOption() {
    this.isNewOptionVisible = false;
  }

  addNewOption() {
    this.newOption = '';
    this.isNewOptionVisible = true;
    this.$nextTick(() => {
      this.$refs.newOptionInput.focus();
    });
  }

  submitNewOption() {
    const newOption = this.newOption;
    if (newOption) {
      this.$emit('create', newOption);
      this.newOption = '';
      this.isNewOptionVisible = false;
    }
  }
}
</script>
