<template>
  <v-main class="pa-0">
    <div class="d-flex panel-wrapper">
      <!--webFormComponents-->
      <div class="widgets-panel" :style="{ height: componentHeight }">
        <div @click="backgroundClicked">
          <Container
            class="drop-wrapper"
            lock-axis="y"
            drag-handle-selector=".column-drag-handle"
            @drop="onDrop"
            @drop-ready="onDropReady"
          >
            <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 color="white" small>mdi-arrow-up-down</v-icon>
                </button>
                <widget-wrapper
                  :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,
                    }"
                  >
                    <render-widget
                      :component-name="widget.type"
                      :widget="widget"
                      :form-body="formBody"
                      v-on:typedText="updateWidgetValue($event, index)"
                    />
                  </div>
                </widget-wrapper>
              </div>
            </Draggable>
            <div v-if="widgetType.length === 0">
              <v-container class="no-widget">
                <span>Add Widgets By Click From Right Side</span>
              </v-container>
            </div>
          </Container>
        </div>
      </div>

      <!--properties-->
      <div class="properties-panel">
        <!--        <div class="properties-panel-header">-->
        <!--          <v-tabs v-model="tab">-->
        <!--            <v-tab>Home</v-tab>-->
        <!--            <v-tab>Form Style</v-tab>-->
        <!--          </v-tabs>-->
        <!--        </div>-->
        <div
          class="properties-panel-scroll"
          :style="{ height: componentHeight }"
        >
          <v-container v-if="selectedWidget == null">
            <!-- widget type buttons right side panel -->
            <v-container
              v-for="(item, index) in widgetTypeButtonContent"
              :key="index"
              class="pa-0"
            >
              <widget-type-button
                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)"
              ></widget-type-button
              ><v-divider class="ma-2"
            /></v-container>
            <v-row>
              <v-col
                ><v-btn small @click="copyToClipboard()">Copy Template</v-btn>
                <v-snackbar v-model="snackbar" :timeout="1000">
                  <span>Template copied to clipboard</span>
                  <template v-slot:action="{ attrs }">
                    <v-btn
                      color="pink"
                      text
                      v-bind="attrs"
                      @click="snackbar = false"
                    >
                      Close
                    </v-btn>
                  </template>
                </v-snackbar>
              </v-col>
            </v-row>
          </v-container>
          <div v-else>
            <v-expansion-panels accordion multiple v-model="panel">
              <render-properties
                v-for="(file, index) in widgetType[selectedWidget].properties"
                :key="index"
                @visible="panel.push(index)"
                :component-name="file"
                :widgetData="widgetType[selectedWidget]"
                :widgetStyle="widgetType[selectedWidget].style"
                :allSides="widgetType[selectedWidget].style.padding"
                :formBody="formBody"
                :fieldValues="{
                  name: 'Padding',
                  top: 'top',
                  bottom: 'bottom',
                  left: 'left',
                  right: 'right',
                }"
              />
            </v-expansion-panels>
          </div>
          <!--          <v-tabs-items v-model="tab">-->
          <!--            <v-tab-item>-->
          <!--              -->
          <!--            </v-tab-item>-->
          <!--            <v-tab-item>-->
          <!--              <FormStyle :form-body="formBody" />-->
          <!--            </v-tab-item>-->
          <!--          </v-tabs-items>-->
        </div>
      </div>
    </div>
  </v-main>
</template>

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

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

import { addToWidgetList } from "@/components/helperFiles/addWidget";

import { setProperties } from "@/components/helperFiles/setProperties";

import WidgetWrapper from "@/components/editor/widget_wrapper";

import WidgetTypeButton from "@/components/editor/widget-type-button";

import RenderWidget from "@/components/editor/RenderWidget";

import RenderProperties from "@/components/editor/RenderProperties";

import widgetType from "@/components/helperFiles/widgetType.json";
import formBody from "@/components/helperFiles/formBody.json";

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

export default {
  name: "WebFormEditor",
  components: {
    FormStyle,
    RenderWidget,
    RenderProperties,
    // Youtube_widget,
    WidgetTypeButton,
    WidgetWrapper,
    Container,
    Draggable,
  },
  directives: {
    draggable,
    droppable,
  },
  props: {
    componentHeight: String,
    formBody: Object,
    widgetType: Array,
  },
  data: function () {
    return {
      // formBody: formBody,
      // widgetType: widgetType,
      // readOnly: true,
      // sideTabsTemp: {},
      // widget: [],
      // inputText: "",
      panel: [],
      tab: null,
      edit: false,
      selectedWidget: null,
      delete: false,
      selectDismiss: false,
      selectedWidgetTapped: false,
      widgetDidMove: false,
      dropEnd: false,
      selectedDropWidget: null,
      snackbar: false,
      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: {
    copyToClipboard() {
      this.$clipboard(this.widgetType);
      this.snackbar = true;
      // console.log(this.widgetType);
    },
    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 () {
      // console.log("background clicked");
      if (!this.selectedWidgetTapped && this.selectedWidget != null) {
        this.panel = [];
        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>
.panel-wrapper {
  height: 100%;
  width: 100%;
}

.widgets-panel {
  width: 100%;
  overflow: scroll;
  background-color: #efefef;
}

.widgets-panel > div {
  /*max-width: 600px;*/
  height: max-content;
  margin: 30px auto;
}

.properties-panel {
  width: 500px;
  border-left: lightgray solid 1px;
  background-color: white;
}

.properties-panel-scroll {
  overflow: scroll;
}
.drop-wrapper {
  max-width: 600px;
  margin: 0 auto;
}

.moveBtn {
  position: absolute;
  z-index: 13;
  padding: 2px 6px;
  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;
}
.properties-panel-header {
  width: 100%;
  /*height: 50px;*/
  background-color: white;
  border-bottom: solid lightgray 1px;
}

.p-h {
  font-size: 13px;
  color: #5f5f5f;
}
.no-widget {
  background-color: white;
}
</style>
