<template>
  <div class="b-properties-list">
    <sortable
      require-sortable-attribute
      v-model="list"
      axis="y"
      :read-only="!editable"
      auto-scroll="window"
    >
      <div v-for="(item, n) of listToHide" :key="n" class="b-properties-list__item align-items-center" v-show="item.isVisible || isShowAll">
        <div v-if="editable && sortable" role="button" tabindex="-1" class="b-properties-list__draghandler" sortable>
          <itf-icon class="dragHandle" name="drag_vertical" />
        </div>
        <div class="b-properties-list__item_content" sortable-skip>
          <slot name="item" :item="item.item"></slot>
        </div>
      </div>
    </sortable>

    <div v-if="editable" class="text-start">
      <itf-button v-if="hiddenItemsCount" small class="text-muted" @click="toggleShowAll">
        <itf-icon :name="isShowAll ? 'chevron_up' : 'chevron_down'" />
        {{isShowAll ? $tc(hidePropertiesText, hiddenItemsCount, { n: hiddenItemsCount }) : $tc(showPropertiesText, hiddenItemsCount, { n: hiddenItemsCount })}}
      </itf-button>

      <itf-dropdown ref="newItemDd" class="flex-grow-1 mw-100" shadow :button-options="{ small: true }">
        <template #button>
            <span class="text-muted d-flex align-items-center">
              <itf-icon name="plus" />
              {{ addPropertyText }}
            </span>
        </template>
        <slot name="dropdown"></slot>
      </itf-dropdown>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.itf-dropdown__menu {
  div {
    position: relative;
  }
  .dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
  }
  .dropdown-submenu-left {
    right: 100%;
    left: auto;
  }
  & div:hover > .dropdown-submenu {
    display: block;
  }
}
.b-properties-list {
  display: flex;
  flex-direction: column;
  padding: 5px 3px 5px 15px;

  &__item {
    display: flex;
    margin-left: -18px;
  }
  &__item_content {
    flex-grow: 1
  }
  &__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);
  }
  &__item:hover &__draghandler {
    opacity: 1;
  }
}
</style>
<script>
import { Vue, Component, 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.vue';

export default @Component({
  name: 'itfEditableList',
  components: {
    itfIcon,
    itfDropdown,
    itfTextField,
    itfLabel,
    itfButton,
    Sortable
  }
})
class itfPropertiesList extends Vue {
  @PropSync('items', { type: Array, required: true }) list;
  @Prop({ type: Function, default: () => true }) isVisible;
  @Prop({ type: Boolean, default: false }) loading;
  @Prop({ type: Boolean, default: false }) editable;
  @Prop({ type: Boolean, default: false }) sortable;
  @Prop({ type: String, default: 'components.customize.showMoreProperties' }) showPropertiesText;
  @Prop({ type: String, default: 'components.customize.hideMoreProperties' }) hidePropertiesText;
  @Prop({ type: String, default: function() { return this.$t('components.customize.addProperty') } }) addPropertyText;

  isShowAll = false;

  toggleShowAll() {
    this.isShowAll = !this.isShowAll;
  }

  get hiddenItemsCount() {
    return this.listToHide.filter((item) => !item.isVisible).length;
  }

  get listToHide() {
    return this.items.map((item) => {
      return {
        item,
        isVisible: this.isVisible(item)
      }
    });
  }
}
</script>
