<template>
  <div class="previolet-input-actions rounded">
    <draggable :list="value" item-key="key">
      <div v-for="(item, index) in computedValues" :key="`action-${item.key}-${index}`" class="draggable-item action-element rounded _mb-2 d-flex justify-content-between">
        <div>
          {{ item.text + (item.value ? ": " : "") }}
          <span v-if="item.value" class="font-weight-bold">
            {{item.value}}
          </span>
        </div>
        <a href="javascript:;" class="text-danger" @click="removeElement(index)">
          <span class="mdi mdi-delete"></span>
        </a>
      </div>
    </draggable>

    <input-select
        class="_mb-2"
        :options="selectOptions"
        :extra_class="class_select"
        v-model="currentSelection"
    />

    <div v-if="currentSelection" class="_mb-2">
      <div v-for="(item, index) in selectedAction.helperFields" :key="`helper-field-${item.key}-${index}`">
        <input-text
          v-if="item.type === 'text'"
          :placeholder="item.placeholder"
          v-model="currentSelectionData[item.key]"
        />
        <input-select
          v-else-if="item.type === 'select'"
          :options="[...item.options]"
          :extra_class="class_select"
          v-model="currentSelectionData[item.key]"
        />

      </div>
      <input-text class="_mb-2"
          v-if="selectedAction.type === 'text'"
          v-model="currentSelectionText"
          :placeholder="selectedAction.placeholder"
      />
      <a href="javascript:;" class="btn btn-success mr-2" @click="addSelection">
        <span class="mdi mdi-plus"></span>
      </a>
      <a href="javascript:;" class="btn btn-secondary" @click="removeSelection">
        <span class="mdi mdi-close"></span>
      </a>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { inputSelect, inputText } from '../..';
export default {
  props: {
    list: Array,
    value: Array,
    class_select: {
      type: String,
      default: '',
    }
  },
  components: {
    inputSelect,
    inputText,
    draggable
  },
  computed: {
    computedValues() {
      return this.value.map((v) => {
        const option = this.list.find((listEntry) => listEntry.key === v.key);
          return {
              key: v.key,
              text: option ? option.title : '',
              value: option.type !== 'boolean' ? v.value : undefined
          }
      })
    },
    selectOptions() {
      const options = [{ name: 'Selecteaza actiune', value: undefined }];
      this.list.forEach((listEntry) => {
        // if(!this.value.find((v) => v.key === listEntry.key)) {
            options.push({ name: listEntry.title, value: listEntry.key })
        // }
      })
      return options
    },
    selectedAction() {
      return this.list.find((listEntry) => listEntry.key === this.currentSelection)
    },
    selectedType() {
      const selected = this.list.find((listEntry) => listEntry.key === this.currentSelection)
      if(!selected) return undefined
      return selected.type
    }
  },
  data() {
    return {
      currentSelection: undefined,
      currentSelectionText: '',
      currentSelectionData: {}
    }
  },
  methods: {
    removeSelection() {
      this.currentSelection = undefined
    },
    addSelection() {
      this.$emit('input', [
        ...this.value,
        {
            key: this.currentSelection,
            value: this.selectedType === 'text' ? this.currentSelectionText : true,
            data: !!this.currentSelectionData ? this.currentSelectionData : undefined
        }
      ])
      this.currentSelection = undefined
      this.currentSelectionText = ''
      this.currentSelectionData = {}
    },
    removeElement(index) {
      const vCopy = [...this.value];
      vCopy.splice(index, 1);
      this.$emit('input', vCopy);
    }
  },
  watch: {
    currentSelection: {
      handler(newValue, oldValue) {
        this.$emit('current-selection-changed', { newValue });
      },
    },
  },
}
</script>
<style lang="scss" scoped>
</style>
