<template>
  <div class="b-properties-list__inner">
    <div class="b-properties-list__name" :class="{'editable': editable && !lockFields}">
      <div class="b-properties-list__icon">
        <div v-if="editable && !lockFields" role="button" tabindex="-1" class="b-properties-list__draghandler" sortable>
          <itf-icon class="dragHandle" name="drag_vertical" />
        </div>
      </div>

      <itf-dropdown text :disabled="!editable || lockFields" ref="editDd" autoclose="outside" class="flex-grow-1 mw-100 editable-field" shadow @close="onClose">
        <div slot="button">
          <div class="d-flex align-items-center">
<!--            <itf-icon :name="field.Icon" :size="16" class="me-1" />-->

            <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" v-text="field.Name" />
          </div>
        </div>
        <properties-edit-menu
          v-if="isEditMode"
          :value="field"
          :loading="loading"
          @input="onChange($event)"
          @delete="$emit('delete')"
          @duplicate="$emit('duplicate')"
        />
        <properties-popup-menu
          v-else
          :field="field"
          :loading="loading"
          @edit="isEditMode = true"
          @delete="$emit('delete')"
          @duplicate="$emit('duplicate')"
          @customize="$emit('customize')"
          @visibility="onVisibilityChange(field, $event)"
        />
      </itf-dropdown>
    </div>
    <div class="b-properties-list__value rounded-2" :class="{'editable': editable, 'active shadow rounded-2 bg-body': focusId === field.Id}" sortable-skip>
      <property-inline-edit
        @focus="onFocus(field.Id)"
        @blur="onBlur(field.Id)"
        class="flex-grow-1 b-properties-list__inline-editor editable-field"
        :field="field"
        :value="value"
        :editable="editable"
        :focused="focusId === field.Id"
        @input="$emit('input', $event)"
      />
    </div>
  </div>
</template>
<style lang="scss">
.b-properties-list {
  .editable .editable-field {
    &.dropdown {
      min-height: 24px;
      padding: 5px;
      font-size: 14px;
      color: rgba(55, 53, 47, 0.65);
    }
    &:hover {
      background: rgba(0, 0, 0, 0.05);
    }
  }
  &__draghandler {
    user-select: none;
    transition: opacity 150ms ease-in 0s;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 24px;
    opacity: 0;
    border-radius: 3px;
    fill: rgba(55, 53, 47, 0.35);
  }
  &__inner:hover &__draghandler {
    opacity: 1;
  }
  &__inner {
    display: flex;
    padding-bottom: 4px;
    width: 100%;
  }
  &__name, &__value {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    border-radius: 3px;
    padding: 0 6px;

    &.editable {
      cursor: pointer;
    }
  }
  &__name {
    display: flex;
    align-items: center;
    height: 34px;
    width: 250px;
    flex: 0 0 auto;
  }
  &__icon {
    width: 22px;
    margin-left: -22px;
    opacity: 1;
  }
  &__value {
    display: flex;
    margin-left: 4px;
    height: 100%;
    min-width: 0;
    padding: 0.25rem;
    min-height: 34px;

    &.editable &:hover, &.editable.active {
      background-color: rgba(55, 53, 47, 0.08);
    }
  }
}
</style>
<script>
import { Vue, Component, Model, Prop, PropSync } from 'vue-property-decorator';
import itfIcon from '../icon/Icon';
import itfButton from '../button/Button';
import itfDropdown from '../dropdown/Dropdown.vue';
import itfLabel from '../form/Label.vue';
import itfTextField from '../text-field/TextField.vue';
import Sortable from '../sortable/sortable-shopify';
import PropertiesPopupMenu from './PropertiesPopupMenu.vue';
import PropertiesEditMenu from './PropertiesEditMenu.vue';
import PropertyInlineEdit from './PropertyInlineEdit.vue';
import { INLINE_TYPES } from './constants';

export default @Component({
  name: 'itfPropertyItem',
  components: {
    itfIcon,
    itfDropdown,
    itfTextField,
    itfLabel,
    itfButton,
    Sortable,
    PropertiesPopupMenu,
    PropertiesEditMenu,
    PropertyInlineEdit
  }
})
class itfPropertyItem extends Vue {
  @Model('input') value;
  @Prop() field;
  @Prop({ type: Boolean, default: false }) loading;
  @Prop({ type: Boolean, default: false }) editable;
  @Prop({ type: Boolean, default: false }) lockFields;

  isEditMode = false;
  focusId = null;

  get types() {
    return INLINE_TYPES;
  }

  onFocus(id) {
    if (!this.editable) {
      return;
    }
    this.focusId = id;
  }

  onBlur() {
    this.focusId = null;
  }

  onClose() {
    this.isEditMode = false;
  }

  onChange(item) {
    this.$emit('update:field', item);
  }

  onVisibilityChange(field, value) {
    const newField = { ...field };
    newField.Visible = value;
    this.$emit('update:field', newField);
  }

  hideEditMenu() {
    if (this.$refs.editDd) {
      this.$refs.editDd.hide();
    }
  }

  showEditMenu() {
    if (this.$refs.editDd) {
      this.$refs.editDd.show();
    }
    this.$nextTick(() => {
      this.isEditMode = true;
    });
  }
}
</script>
