<template>
  <div class="d-flex">
    <div
      class="flex-grow-1"
      style="overflow: scroll"
      v-bind:class="{ vbbodyleft: !readOnly }"
    >
      <div class="scroll-area">
        <div
          :style="{
            'background-color': formBody.backgroundcolor,
            'min-height': '100%',
            'font-family': formBody.fontType,
            padding: formBody.PaddingTB + 'px 0',
          }"
          @click="backgroundClicked"
        >
          <Container
            v-if="!readOnly"
            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,
              height: '100%',
              'background-color': formBody.innerBackground,
            }"
          >
            <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"
                >
                  <span class="ti ti-move"></span>
                </button>
                <WidgetWrapper
                  :widget="widget"
                  :index="index"
                  :arrayLength="widgetType.length"
                  :addToBottom="addToBottom"
                  :selectedWidget="selectedWidget"
                  :widgetDidMove="widgetDidMove"
                  :selectedDropWidget="selectedDropWidget"
                  v-on:typedText="updateWigetValue($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="updateWigetValue($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>
    </div>

    <div v-if="!readOnly" class="properties_pannel">
      <div class="scroll-area">
        <transition enter-active-class="animated fadeInRight fast">
          <div style="height: 100%">
            <transition enter-active-class="animated fadeInRight fast">
              <div
                v-if="selectedWidget == null"
                style="padding-left: 28px; padding-top: 24px"
              >
                <!-- widget type buttons right side pannel -->
                <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>
              </div>
              <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>
            </transition>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

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

import { addToWidgetList } from "./webform/widgetStructure/addWidget";

import { setProperties } from "./webform/widgetStructure/setProperties";

import WidgetWrapper from "./webform/widget_wrapper";

import WidgetTypeButton from "./webform/widget-type-button";

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

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

export default {
  name: "app",
  components: {
    GetWidget,
    GetWidgetProperties,
    // Youtube_widget,
    WidgetTypeButton,
    WidgetWrapper,
    Container,
    Draggable,
  },
  props: {
    formBody: Object,
    widgetType: Array,
    readOnly: Boolean,
    templateDetails: Object,
    sideTabsTemp: Object,
    fileUploadData: Array,
  },
  data: function () {
    return {
      //   formBody: {},
      //   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: [
        { name: "Image", icon: "ti ti-image", type: "image_widget" },
        // { name: "Socials", icon: "ti ti-sharethis", type: "socials_widget" },
        // { name: "Links", icon: "ti ti-link", type: "links_widget" },
        { name: "Text", icon: "ti ti-pencil-alt", type: "text_widget" },
        {
          name: "Single Input",
          icon: "ti ti-text",
          type: "single_input_widget",
        },
        {
          name: "Text Area",
          icon: "ti ti-notepad",
          type: "text_area_widget",
        },
        // { name: "Text Area", icon: "ti ti-notepad", type: "text_area_widget" },
        // { name: "Date", icon: "ti ti-calendar", type: "date_widget" },
        // { name: "Time", icon: "ti ti-time", type: "time_widget" },
        { name: "CheckBox", icon: "ti ti-check-box", type: "checkbox_widget" },
        { name: "Radiogroup", icon: "ti ti-list", type: "radiogroup_widget" },
        { name: "Ratting", icon: "ti ti-star", type: "ratting_widget" },
        {
          name: "Boolean",
          icon: "ti ti-thumb-up",
          secondIcon: "ti ti-thumb-down",
          type: "boolean_widget",
        },
        {
          name: "File Upload",
          icon: "ti ti-upload",
          type: "file_upload_widget",
        },
        {
          name: "Voice Record",
          icon: "ti ti-microphone",
          type: "voice_record_widget",
        },
        // { name: "Slider", icon: "ti ti-layout-slider", type: "sliderw_widget" },
        { name: "Dropdown", icon: "ti ti-list-ol", type: "dropdown_widget" },
        // { name: "Voice", icon: "ti ti-microphone", type: "voice_widget" },
        {
          name: "Submit Btn",
          icon: "ti ti-location-arrow",
          type: "submit_button_widget",
        },
        {
          name: "Groups",
          icon: "ti ti-user",
          type: "groups_widget",
        },
        {
          name: "Youtube",
          icon: "ti ti-youtube",
          type: "youtube_widget",
        },
        {
          name: "Image Slider",
          icon: "ti ti-layout-slider-alt",
          type: "image_slider_widget",
        },
      ],
    };
  },
  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;
    },
    updateWigetValue: 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 lang="scss">
.moveBtn {
  position: absolute;
  z-index: 13;
  padding: 5px 8px;
  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;
}
.scroll-area {
  /*overflow: scroll;*/
  // height: 80vh;
  height: 100%;
}
.properties_pannel {
  width: 400px;
  border-left: grey 1px solid;
  height: calc(100vh - 107px);
  overflow: scroll;
}
.vb-body-right-option {
  width: 100%;
  font-size: 14px;
  height: 40px;
  line-height: 40px;
  background-color: #ccc;
}

.option-head {
  padding: 0 10px;
  margin-bottom: 5px;
}
.pointer {
  cursor: pointer;
}

.font-12 {
  font-size: 12px;
  color: #5f5f5f;
}
</style>
