<template>
  <v-main class="pa-0">
    <div class="d-flex panel-wrapper">
      <!--widgtes-->
      <div class="widgets-panel">
        <div
          :style="{
            'min-height': '100%',
            'font-family': formBody.fontType,
            padding: formBody.PaddingTB + 'px 0',
          }"
          @click="backgroundClicked"
        >
          <Container
            lock-axis="y"
            drag-handle-selector=".column-drag-handle"
            @drop="onDrop"
            @drop-ready="onDropReady"
            :style="{
              'max-width': formBody.maxWidth + 'px',
              margin: formBody.margain,
              border:
                formBody.borderWidth +
                'px ' +
                formBody.borderType +
                ' ' +
                formBody.borderColor,
              'background-color': formBody.innerBackground,
              'margin-top': '30px',
              'margin-bottom': '30px',
            }"
          >
            <Draggable
              v-for="(widget, index) in widgetType"
              :key="index"
              style="overflow: visible; position: relative"
            >
              <div class="draggable-item">
                <button
                  v-if="selectedWidget == index"
                  class="column-drag-handle moveBtn"
                >
                  <v-icon>mdi-drag-variant</v-icon>
                </button>
                <WidgetWrapper
                  :widget="widget"
                  :index="index"
                  :arrayLength="widgetType.length"
                  :addToBottom="addToBottom"
                  :selectedWidget="selectedWidget"
                  :widgetDidMove="widgetDidMove"
                  :selectedDropWidget="selectedDropWidget"
                  v-on:typedText="updateWidgetValue($event, index)"
                  v-on:DeleteWidget="DeleteWidget(index)"
                  v-on:selected="selected(index)"
                  v-on:changeDropValue="changeSelectedDropWidget($event)"
                >
                  <div
                    :style="{
                      'padding-top': widget.style.padding.top + 'px',
                      'padding-bottom': widget.style.padding.bottom + 'px',
                      'padding-left': widget.style.padding.left + 'px',
                      'padding-right': widget.style.padding.right + 'px',
                      'background-color': widget.style.backgroundcolor,
                    }"
                  >
                    <GetWidget
                      :component-name="widget.type"
                      :widget="widget"
                      v-on:typedText="updateWidgetValue($event, index)"
                    ></GetWidget>
                  </div>
                </WidgetWrapper>
              </div>
            </Draggable>
            <div v-if="widgetType.length == 0" style="padding: 5px">
              <div class="no-widget">
                <span>Add Widgets By Click From Right Side</span>
              </div>
            </div>
          </Container>
        </div>
      </div>

      <!--properties-->
      <div class="properties-panel">
        <v-container v-if="selectedWidget == null">
          <!-- widget type buttons right side pannel -->
          <v-row style="justify-content: space-evenly">
            <WidgetTypeButton
              v-for="(item, index) in widgetTypeButtonContent"
              :key="index"
              v-draggable
              :name="item.name"
              :icon="item.icon"
              :secondIcon="item.secondIcon != null ? item.secondIcon : null"
              @drag-end="onDragEnd(item.type)"
              v-on:add="addToWidget(item.type)"
            ></WidgetTypeButton
          ></v-row>
        </v-container>
        <div v-else>
          <div style="height: 40px; width: 100%">
            <button @click="selectedWidget = null">x</button>
          </div>

          <div
            v-for="(file, index) in widgetType[selectedWidget].properties"
            :key="index"
          >
            <GetWidgetProperties
              :component-name="file"
              :widgetData="widgetType[selectedWidget]"
              :widgetStyle="widgetType[selectedWidget].style"
              :allSides="widgetType[selectedWidget].style.padding"
              :fieldValues="{
                name: 'Padding',
                top: 'top',
                bottom: 'bottom',
                left: 'left',
                right: 'right',
              }"
            />
          </div>
        </div>
      </div>
    </div>
  </v-main>
</template>

<script>
import { Container, Draggable } from "vue-smooth-dnd";

import { draggable, droppable } from "v-drag-drop";

import { addToWidgetList } from "@/temp/webform/widgetStructure/addWidget";

import { setProperties } from "@/temp/webform/widgetStructure/setProperties";

import WidgetWrapper from "@/temp/webform/widget_wrapper";

import WidgetTypeButton from "@/temp/webform/widget-type-button";

import GetWidget from "@/temp/webform/MainFileImports/get_widget";

import GetWidgetProperties from "@/temp/webform/MainFileImports/get_widget_properties";

import widgetType from "@/temp/widgetType.json";
import formBody from "@/temp/formBody.json";

import WidgetButtons from "@/components/editor/WidgetButtons.json";

export default {
  name: "EditorComponent",
  components: {
    GetWidget,
    GetWidgetProperties,
    // Youtube_widget,
    WidgetTypeButton,
    WidgetWrapper,
    Container,
    Draggable,
  },
  directives: {
    draggable,
    droppable,
  },
  props: {
    // formBody: Object,
    // widgetType: Array,
    // readOnly: Boolean,
    // templateDetails: Object,
    // sideTabsTemp: Object,
    // fileUploadData: Array,
  },
  data: function () {
    return {
      formBody: formBody,
      widgetType: widgetType,
      readOnly: false,
      templateDetails: {},
      sideTabsTemp: {},
      fileUploadData: [],
      // widget: [],
      // inputText: "",
      edit: false,
      selectedWidget: null,
      delete: false,
      selectDismiss: false,
      selectedWidgetTapped: false,
      widgetDidMove: false,
      dropEnd: false,
      selectedDropWidget: null,
      addToBottom: {
        value: false,
      },
      widgetTypeButtonContent: WidgetButtons,
    };
  },
  computed: {
    getKey: function () {
      return this.widgetType.length;
    },
  },
  created() {
    // console.log(this.widgetType);
    setProperties(this.widgetType, "type");

    // setProperties(this.widgetType, "component");
  },
  updated() {
    if (this.dropEnd) {
      setTimeout(() => (this.widgetDidMove = false), 600);
    }
  },
  methods: {
    printResults() {
      this.$emit("submitPost");
    },
    changeUpload(event) {
      this.$emit("changePost", event);
    },
    changeSelectedDropWidget(index) {
      this.selectedDropWidget = index;

      if (index == null) {
        hasDragEnded = false;
      }
    },
    onDrop(dragResult) {
      this.dropEnd = true;

      const { removedIndex, addedIndex, payload } = dragResult;
      if (removedIndex == addedIndex) {
      } else {
        let payload = JSON.parse(JSON.stringify(this.widgetType[removedIndex]));
        payload.component = payload.type;
        if (removedIndex === null && addedIndex === null) {
        } else {
          let itemToAdd = payload;

          if (removedIndex !== null) {
            itemToAdd = this.widgetType.splice(removedIndex, 1)[0];
          }

          if (addedIndex !== null) {
            this.widgetType.splice(addedIndex, 0, itemToAdd);
          }
        }
      }
    },
    onDragEnd(type) {
      this.hasDragEnded = true;
      if (this.selectedDropWidget != null) {
        if (this.addToBottom.value) {
          this.addToWidget(type);
        } else {
          this.addToWidget(type, this.selectedDropWidget);
        }
      }
      this.selectedDropWidget = null;
      this.addToBottom.value = false;
    },

    addToWidget(type, index = this.widgetType.length) {
      let widgetDataList = this.widgetType;
      // widgetDataList.push("tes");
      widgetDataList = addToWidgetList(widgetDataList, type, index);
      setProperties(this.widgetType, "type");
    },

    onDropReady() {
      this.widgetDidMove = true;
    },
    updateWidgetValue: function (value, key) {
      this.widgetType[key].value = value;
    },
    DeleteWidget: function () {
      this.delete = true;
    },
    selected: function (key) {
      if (this.delete) {
        this.delete = false;
        this.edit = false;
        this.selectedWidget = null;
        this.widgetType.splice(key, 1);
      } else if (this.selectedWidget == null) {
        this.selectedWidgetTapped = true;
        this.selectedWidget = key;
        // this.$set(this.widgetType[key].style, [0], "white");
        this.edit = !this.edit;
      } else if (this.selectedWidget != key) {
      } else {
        this.selectedWidgetTapped = true;
        // this.$set(this.widgetType[this.selectedWidget].style, [0], "white");
        this.selectedWidget = key;
        // this.$set(this.widgetType[key].style, 0, "white");
      }
    },
    selectedComplete: function () {
      // this.$set(this.widgetType[this.selectedWidget].style, 0, "white");
      this.edit = !this.edit;
      this.selectedWidget = null;
    },
    backgroundClicked: function () {
      if (!this.selectedWidgetTapped && this.selectedWidget != null) {
        this.$set(this.widgetType[this.selectedWidget].style, [0], "white");
        this.edit = !this.edit;
        this.selectedWidget = null;
        this.selectDismiss = false;
      } else if (this.selectedWidgetTapped) {
        this.selectedWidgetTapped = false;
      }
    },
  },
};
</script>

<style scoped>
.panel-wrapper {
  height: 100%;
  width: 100%;
}
.widgets-panel {
  /*margin: 50px;*/
  width: 100%;
  height: calc(100vh - 64px);
  overflow: scroll;
  background-color: #ececec;
}
.properties-panel {
  width: 500px;
  border-left: lightgray solid 1px;
  height: calc(100vh - 64px);
  overflow: scroll;
  background-color: white;
}
.moveBtn {
  position: absolute;
  z-index: 13;
  padding: 2px 3px;
  margin-top: auto;
  margin-bottom: auto;
  top: 0;
  bottom: 0;
  height: 30px;
  right: 0px;
  background: rgb(76, 185, 234);
  border: none;
  border-radius: 10px 0px 0px 10px;
}
</style>
