<template>
  <div class="itf-append-context" style="min-width: 300px">
    <div class="d-flex align-items-center px-3 py-2" sortable-skip>
      <!--div class="me-1">
        <itf-icon-popover title="Icon" removable :value="value.Icon" @input="setParam({ Icon: $event })">
          <itf-button slot="activator" icon>
            <itf-icon :name="value.Icon" />
          </itf-button>
        </itf-icon-popover>
      </div-->
      <div class="flex-grow-1">
        <itf-text-field ref="input" :value="value.Name"  @input="setParam({ Name: $event })" />
      </div>
    </div>
    <div>
      <a class="dropdown-item d-flex justify-content-between" @click.prevent="$emit('edit')">
        <span>{{ $t('components.customize.type') }}</span>
        <span class="text-muted">{{ itemType }} ></span>
      </a>
      <ul class="itf-dropdown__menu shadow dropdown-menu dropdown-submenu">
        <li><h6 class="dropdown-header">{{ $t('components.customize.type') }}</h6></li>
        <li v-for="(type) of types">
          <a class="dropdown-item d-flex align-items-center" href="" @click.prevent="setParam({ Type: type.Type })">
            <itf-icon :name="type.Icon" :size="16" class="me-1" />
            <span v-text="type.Name"></span>
            <itf-icon v-if="value.Type === type.Type" name="check" />
          </a>
        </li>
      </ul>
    </div>
    <div v-if="isListType">
      <div class="d-flex justify-content-between pe-2">
        <h6 class="dropdown-header">{{ $t('components.customize.options') }}</h6>
        <div v-if="value.Options && value.Options.length">
          <itf-button icon small @click.prevent="addNewOption">
            <itf-icon name="plus" />
          </itf-button>
        </div>
      </div>

      <div v-if="isNewOptionVisible" class="px-3" sortable-skip>
        <itf-text-field
          ref="newOptionInput"
          v-model="newOption"
          placeholder="Type a new option..."
          @blur="onBlurOption"
          @keydown.enter="submitNewOption"
        />
      </div>
      <div v-else-if="!value.Options || !value.Options.length" class="px-3">
        <itf-button small block class="text-start" @click="addNewOption">
          <itf-icon name="plus" />
          {{ $t('components.customize.addOption') }}
        </itf-button>
      </div>

      <sortable
        require-sortable-attribute
        :value="value.Options"
        @input="setParam({ Options: $event })"
        axis="y"
        :read-only="false"
        auto-scroll="window"
      >
        <div v-for="(option, i) of value.Options" :key="`options${i}`">
          <div class="dropdown-item d-flex justify-content-between">
            <div>
              <itf-icon sortable class="dragHandle" name="drag_vertical" />
              <span>{{ option.Name }}</span>
            </div>
            <span class="text-muted">></span>
          </div>
          <ul class="itf-dropdown__menu shadow dropdown-menu dropdown-submenu">
            <!--li class="p-2">
              <itf-text-field
                ref="newOptionName"
                :value="option.Name"
                placeholder="Option name..."
                @blur="onBlurOption"
                @keydown.enter="submitNewOption"
              />
            </li-->
            <div>
              <itf-delete-confirm-modal @delete="removeItem(option)">
                <template #activator="{ on }">
                  <a class="dropdown-item text-danger align-items-center d-flex" @click.prevent="on.click"><itf-icon name="trash" class="me-1" /> {{ $t('components.customize.deleteItem') }}</a>
                </template>
                <h5 class="mb-0">{{$t('components.popover.confirmDelete')}}</h5>
                <p class="mb-0">{{ $t('components.customize.areYouSureYouWantToDeleteThisItem') }}</p>
              </itf-delete-confirm-modal>
            </div>
          </ul>
        </div>
      </sortable>
    </div>
    <div><hr class="dropdown-divider"></div>
    <div><a class="dropdown-item" @click.prevent="$emit('duplicate')"><itf-icon name="duplicate" /> {{ $t('components.customize.duplicateProperty') }}</a></div>
    <div>
      <itf-delete-confirm-modal @delete="$emit('delete')">
        <template #activator="{ on }">
          <a class="dropdown-item text-danger align-items-center d-flex" @click.prevent="on.click"><itf-icon name="trash" class="me-1" /> {{ $t('components.customize.deleteProperty') }}</a>
        </template>
        <h5 class="mb-0">{{$t('components.popover.confirmDelete')}}</h5>
        <p class="mb-0">{{ $t('components.customize.areYouSureYouWantToDeleteThisField') }}</p>
      </itf-delete-confirm-modal>
    </div>
  </div>
</template>
<script>
import { Vue, Component, Model } from 'vue-property-decorator';
import itfTextField from '../text-field/TextField.vue';
import itfIcon from '../icon/Icon';
import itfButton from '../button/Button';
import Sortable from '../sortable/Sortable';
import itfIconPopover from '../popover/IconPopover.vue';
import { INLINE_TYPES } from './constants';
import itfDeleteConfirmModal from '../modal/DeleteConfirmModal.vue';
import PropertyItem from './PropertyItem.vue';
import PropertiesPopupMenu from './PropertiesPopupMenu.vue';

export default @Component({
  components: {
    PropertiesPopupMenu,
    PropertyItem,
    itfDeleteConfirmModal,
    itfButton,
    itfIcon,
    itfTextField,
    itfIconPopover,
    Sortable
  }
})

class PropertiesEditMenu extends Vue {
  @Model('input') value;

  isNewOptionVisible = false;
  newOption = '';

  get types() {
    return INLINE_TYPES;
  }

  get itemType() {
    const type = INLINE_TYPES.find((type) => type.Type === this.value.Type);
    return type ? type.Name : '';
  }

  get isListType() {
    return ['select', 'multiselect'].includes(this.value.Type);
  }

  mounted() {
    this.$nextTick(() => {
      this.$refs.input.focus();
    });
  }

  setParam(obj) {
    this.$emit('input', { ...this.value, ...obj });
  }

  onBlurOption() {
    this.isNewOptionVisible = false;
  }

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

  removeItem(option) {
    const newOptions = this.value.Options.filter((item) => item !== option);
    this.setParam({ Options: newOptions });
  }

  submitNewOption() {
    const newOption = this.newOption;
    if (newOption) {
      this.setParam({ Options: [{ Name: newOption }, ...(this.value.Options || [])] });
      this.newOption = '';
      this.isNewOptionVisible = false;
    }
  }
}
</script>
