<template>
  <div class="views-tree">
    <custom-node v-for="view in views" :key="view.uuid" :view="view" :custom-style="styleObject(view)" :properties="view.properties">
      <template v-if="view.children">
        <views-tree :views="view.children"></views-tree>
      </template>
    </custom-node>
     <edit-control-view  
    :views="views" 
    :activeComponent="activeComponent"
    v-if="hasDrag"

    ></edit-control-view>
    <!-- <vue-draggable-resizable
      v-if="hasDrag"
      :prevent-deactivation="true"
      class-name="db-draggable"
      :min-width="1"
      :min-height="1"
      :z="2"
      :active="true"
      :style="dragStyleObject"
      v-bind="position"
      @dragging="handleDragging"
      @dragstop="handleDragStop"
      @resizing="handleResize"
      @resizestop="handleResizeStop"
      @deactivated="handleDeactivated"
      >
    </vue-draggable-resizable> -->
  </div>
</template>

<script>
import events from "@/global-events.js"
import { mapState, mapGetters } from 'vuex';
import { styles } from '../../../utils/common';
import customNode from '../../../components/customElement/node/index.vue';
import properties from '../../../utils/properties';
import VueDraggableResizable from 'vue-draggable-resizable';
import EditControlView from './editControlView';

export default {
  name: 'viewsTree',
  props: {
    views: {
      type: Array,
      default: []
    }
  },
  components: {
    VueDraggableResizable,
    EditControlView,
    'custom-node': customNode
  },
  computed: {
    ...mapState(['project']),
    ...mapGetters(['activeComponent', 'activeComponentCopy', 'componentList', 'activeComponentId']),
    active() {
      
      return !!this.activeComponentId;
    },
    dragStyleObject() {
      return styles.getComponentStyle(this.activeComponentCopy, this.project, this.componentList, true);
    },
    position() {
      let _props = this.activeComponentCopy.properties || {};
      const props = properties.node.props;
       console.log('********', _props);
      let result = {
        x: _props.x || props.x.default,
        y: _props.y || props.y.default,
        w: _props.width || props.width.default,
        h: _props.height || props.height.default,
      };
      
       console.log('view.children', this.views);
       console.log('####position', result);

      return result;
    },
    hasDrag() {
      let _ids = this.views.map(v => v.uuid);
      // console.log('_ids', _ids);
      // console.log('activeComponentId', this.activeComponentId, _ids.indexOf(this.activeComponentId));
      return this.activeComponentId && _ids.indexOf(this.activeComponentId) > -1 ? true : false;
    }
  },
  methods: {
    styleObject(view) {
      let result = '';
      if (view.uuid === this.activeComponentCopy.uuid) {
        result = styles.getComponentStyle(this.activeComponentCopy, this.project, this.componentList);
      } else {
        result = styles.getComponentStyle(view, this.project, this.componentList);
      }
      return result;
    },
    handleDeactivated() {
      // this.$store.dispatch('changeEditaleStatus', false);
    },
    handleResize(x, y, w, h) {
      if (!this.active || !this.activeComponentId) {
        return false;
      }
      let _prop = this.activeComponentCopy.properties;

      if (_prop.x !== x || _prop.y !== y || _prop.width !== w || _prop.height !== h) {
        this.$store.dispatch('modifyCopyProperties', {
          x: x,
          y: y,
          width: w,
          height: h
        });
      }
    },

    handleDragging(x, y) {
      if (!this.active || !this.activeComponentId) {
        return false;
      }
      let _prop = this.activeComponentCopy.properties;

      if (_prop.x !== x || _prop.y !== y) {
        this.$store.dispatch('modifyCopyProperties', {
          x: x,
          y: y
        });
      }
    },
    handleResizeStop(x, y, w, h) {
      if (!this.active || !this.activeComponentId) {
        return false;
      }
      let _prop = this.activeComponent.properties;

      if (_prop.x !== x || _prop.y !== y || _prop.width !== w || _prop.height !== h) {
        this.$store.dispatch('modifyProperties', {
          x: x,
          y: y,
          width: w,
          height: h
        });
      }
    },
    handleDragStop(x, y) {
      if (!this.active || !this.activeComponentId) {
        return false;
      }
      let _prop = this.activeComponent.properties;

      if (_prop.x !== x || _prop.y !== y) {
        this.$store.dispatch('modifyProperties', {
          x: x,
          y: y
        });
      }
    }
  }
};
</script>

<style>
.views-tree{
  position: absolute;
  z-index: 99;
}
</style>
