<template>
  <div>
    <div>
      <div><a class="dropdown-item" @click.prevent="$emit('edit')"><itf-icon name="pen" /> {{ $t('components.customize.editProperty') }}</a></div>
      <div><hr class="dropdown-divider"></div>
      <div>
        <a class="dropdown-item" @click.prevent><itf-icon name="eye_no" /> {{ $t('components.customize.hideProperty') }}</a>
        <ul class="itf-dropdown__menu shadow dropdown-menu dropdown-submenu">
          <li><a class="dropdown-item" href="" @click.prevent="$emit('visibility', 'show')">{{ $t('components.customize.alwaysShow') }}<itf-icon v-if="field.Visible === 'show'" name="check" /></a></li>
          <li><a class="dropdown-item" href="" @click.prevent="$emit('visibility', 'filled')">{{ $t('components.customize.hideWhenEmpty') }}<itf-icon v-if="field.Visible === 'filled'" name="check" /></a></li>
          <li><a class="dropdown-item" href="" @click.prevent="$emit('visibility', 'hide')">{{ $t('components.customize.alwaysHide') }}<itf-icon v-if="field.Visible === 'hide'" name="check" /></a></li>
        </ul>
      </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 class="me-1" @delete="$emit('delete')">
          <template #activator="{ on }">
            <a class="dropdown-item text-danger" @click.prevent="on.click"><itf-icon name="trash" /> {{ $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><hr class="dropdown-divider"></div>
      <div><a class="dropdown-item" @click.prevent="$emit('customize')"><itf-icon name="toggles" /> {{ $t('components.customize.customizePage') }}</a></div>
    </div>
  </div>
</template>
<script>
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import itfTextField from '../text-field/TextField.vue';
import itfIcon from '../icon/Icon';
import itfButton from '../button/Button';
import itfDeleteConfirmModal from '../modal/DeleteConfirmModal.vue';

export default @Component({
  components: {
    itfButton,
    itfIcon,
    itfTextField,
    itfDeleteConfirmModal
  }
})

class PropertiesEditMenu extends Vue {
  @Prop() field;
}
</script>
