<template>
  <div
    style="min-height: 100px"
    class="pagebuilder-column"
    :class="value.name"
  >
    <b-modal
      v-model.value="modalAddBox"
      class_other="modal-xl"
      v-on:onClose="modalAddBox = false"
      title="Dodaj widżet"
    >
      <div>
        <DropdownSectionSection @choose="clickAdd"> </DropdownSectionSection>
      </div>
    </b-modal>

    <b-modal
      v-model="modalColumnsSettings"
      title="Ustawienia kolumny"
      size="sm"
      v-on:onClose="modalColumnsSettings = false"
    >
      <div>
        <div class="from-group">
          <label>Klasa kolumny</label>
          <input
            @input="onChange"
            v-model="value.class"
            type="text"
            class="form-control"
          />
        </div>
      </div>
      <div>
        <button
          @click="modalColumnsSettings = false"
          class="btn btn-outline-secondary"
        >
          Zapisz i zamknij
        </button>
      </div>
    </b-modal>
    <draggable
      :options="{ handle: '.box-move' }"
      v-model="value.items"
      @start="drag = true"
      @end="
        drag = false;
        onChange();
      "
      group="people"
    >
      <template #item="{ element, index }">
        <div class="pb_section table-bordered p-2 pl-3 pr-3 mb-3 rounded">
          <component
            @itemRemoved="removeItem"
            :key="index"
            v-bind:is="element.name"
            v-bind:value="element"
            v-model="value.items[index]"
            @update:model-value="onChange"
            @change="onChange"
          ></component>
        </div>
      </template>
    </draggable>
    <div :class="value.items.length > 0 ? 'pagebuilder-column-hover-padding' : ''"></div>
    <div
      class="posistion-relative"
      :class="value.items.length > 0 ? 'pagebuilder-column-hover' : 'd-flex'"
    >
      <div class="flex-fill mr-0 pr-0">
        <button
          class="w-100 btn btn-icon-sm btn-outline-primary off_tooltip_off"
          @click.prevent="modalAddBox = !modalAddBox"
          title="Dodaj widget"
        >
          <i class="material-icons-outlined">add_circle_outline</i>
        </button>
      </div>
      <div class="ml-0 pl-0">
        <a
          title="Ustawienia kolumny"
          class="btn-icon-sm"
          @click.prevent="modalColumnsSettings = !modalColumnsSettings"
          ><i
            style="cursor: pointer; position: relative; top: 5px; margin-left: 5px"
            class="material-icons-outlined"
            >create</i
          ></a
        >
      </div>
    </div>
  </div>
</template>
<script>
import draggable from "vuedraggable";
import MagicoModal from "./MagicoModal.vue";
import SectionText from "./plugin/SectionText.vue";
import SectionTextarea from "./plugin/SectionTextarea.vue";
import SectionHtml from "./plugin/SectionHtml.vue";
import SectionImage from "./plugin/SectionImage.vue";

import DropdownSectionSection from "./DropdownSectionSection.vue";

export default {
  data: function () {
    return { opcja: "", modalAddBox: false, drag: false, modalColumnsSettings: false };
  },
  props: { value: Object },
  emits: ["update:modelValue"],
  components: {
    draggable,
    "b-modal": MagicoModal,
    core_section_textarea: SectionTextarea,
    core_section_text: SectionText,
    core_section_html: SectionHtml,
    core_section_image: SectionImage,

    DropdownSectionSection,
  },
  methods: {
    onChange: function () {
      this.$emit("change");
    },
    rand: function () {
      return "component" + Math.random() * 100;
    },
    removeItem(item) {
      this.value.items.indexOf(item);
      this.value.items.splice(this.value.items.indexOf(item), 1);

      this.onChange();
    },
    clickAdd: function (item) {
      console.log(item);
      this.modalAddBox = false;
      var a = { name: item, open: true };
      this.value.items.push(a);
      this.onChange();
    },
  },
};
</script>
<style>
.pagebuilder-column-hover {
  display: none;
}

.pagebuilder-column-hover-padding {
  padding: 17px;
}

.pagebuilder-column:hover .pagebuilder-column-hover {
  display: flex;
}

.pagebuilder-column:hover .pagebuilder-column-hover-padding {
  padding: 0px;
}
</style>
