<template>
  <container-wrapper :designer="designer" :widget="widget" :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList">
    <div :key="widget.id" class="dialog-container" :class="[selected ? 'selected' : '', customClass]" @click.stop="selectWidget(widget)">
      <draggable
      	:list="widget.widgetList"
      	v-bind="{ group: 'dragGroup', ghostClass: 'ghost', animation: 200 }"
      	handle=".drag-handler"
      	@add="evt => onContainerDragAdd(evt, widget.widgetList)"
      	@update="onContainerDragUpdate"
      	:move="checkContainerMove"
      >
      	<transition-group name="fade" tag="div" class="vf-dialog-drop-zone">
      		<template v-for="(subWidget, swIdx) in widget.widgetList">
      			<template v-if="'container' === subWidget.category">
      				<component
      					:is="subWidget.type + '-widget'"
      					:widget="subWidget"
      					:designer="designer"
      					:key="subWidget.id"
      					:parent-list="widget.widgetList"
      					:index-of-parent-list="swIdx"
      					:parent-widget="widget"
      				></component>
      			</template>
      			<template v-else>
      				<component
      					:is="subWidget.type + '-widget'"
      					:field="subWidget"
      					:designer="designer"
      					:key="subWidget.id"
      					:parent-list="widget.widgetList"
      					:index-of-parent-list="swIdx"
      					:parent-widget="widget"
      					:design-state="true"
      				></component>
      			</template>
      		</template>
      	</transition-group>
      </draggable>
    </div>
  </container-wrapper>
</template>

<script>
import Draggable from 'vuedraggable';
import i18n from '../../../../../components/xform/utils/i18n';
import containerMixin from '../../../../../components/xform/form-designer/form-widget/container-widget/containerMixin';
import ContainerWrapper from '../../../../../components/xform/form-designer/form-widget/container-widget/container-wrapper';
import refMixinDesign from '../../../../../components/xform/form-designer/refMixinDesign';

import FieldComponents from '../../../../../components/xform/form-designer/form-widget/field-widget/index';
export default {
  name: 'vf-dialog-widget',
  componentName: 'VfDialogWidget',
  mixins: [i18n, containerMixin, refMixinDesign],
  inject: ['refList'],
  components: {
    ContainerWrapper,
    Draggable,
    ...FieldComponents
  },
  props: {
    widget: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object
  },
  data: function() {
    return {};
  },
  computed: {
    selected: function() {
      return this.widget.id === this.designer.selectedId;
    },
    customClass: function() {
      return this.widget.options.customClass || '';
    }
  },
  created: function() {
    this.initRefList();
  },
  methods: {
    onDialogDragEnd: function(e, t) {},
    onDialogDragAdd: function(e, t) {
      var i = e.newIndex;
      t[i] && this.designer.setSelected(t[i]), this.designer.emitHistoryChange(), this.designer.emitEvent('field-selected', this.widget);
    },
    onDialogDragUpdate: function() {
      this.designer.emitHistoryChange();
    },
    selectWidget: function(e) {
      console.log('id: ' + e.id), this.designer.setSelected(e);
    },
    checkContainerMove: function(e) {
      return this.designer.checkWidgetMove(e);
    },
    selectParentWidget: function() {
      this.parentWidget ? this.designer.setSelected(this.parentWidget) : this.designer.clearSelected();
    },
    moveUpWidget: function() {
      this.designer.moveUpWidget(this.parentList, this.indexOfParentList);
    },
    moveDownWidget: function() {
      this.designer.moveDownWidget(this.parentList, this.indexOfParentList);
    },
    removeWidget: function() {
      var e = this;
      if (this.parentList) {
        var t = null;
        1 === this.parentList.length
          ? this.parentWidget && (t = this.parentWidget)
          : (t = this.parentList.length === 1 + this.indexOfParentList ? this.parentList[this.indexOfParentList - 1] : this.parentList[this.indexOfParentList + 1]),
          this.$nextTick(function() {
            e.parentList.splice(e.indexOfParentList, 1), e.designer.setSelected(t), e.designer.emitHistoryChange();
          });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.dialog-container.selected {
  outline: 2px solid #409eff !important;
}
.dialog-container {
  width: 100%;
  min-height: 120px;
  border: 2px dashed #ccc;
  position: relative;
}
.dialog-container .vf-dialog-drop-zone {
    min-height: 116px;
}
</style>
