<template>
  <div class="container-fluid">
    <div class="flex flex-row between-xs middle-xs">
      <base-button
        class="bottom-margin-medium"
        size="medium"
        @click.native="onAddLink({ position, parent: null, order: listLinks.length })"
        :disabled="disabled"
      >
        Adicionar link
      </base-button>
      <span
        v-show="!withoutSublinks"
        class="text-small text-gray hover:text-dark padding-small cursor-pointer"
        @click="hiddenItems = !hiddenItems"
        v-text="hiddenItems ? 'Mostrar sublinks' : 'Esconder sublinks'"
      >
      </span>
    </div>

    <draggable v-model="listLinks" v-bind="dragOptions">
      <base-card
        v-for="linksItem in listLinks"
        :key="linksItem.custom_links_id"
        :id="linksItem.custom_links_id"
        class="vertical-padding-large horizontal-padding-small bottom-margin-small"
      >
        <custom-links-item
          :custom-links-id="linksItem.custom_links_id"
          :id="linksItem.custom_links_id"
          :should-focus="linksItem.custom_links_id === focusLinkId"
          :status="linksItem.status"
          :icon="linksItem.iconPreview"
          :text="linksItem.text"
          :link="linksItem.link"
          :disabled="disabled"
        />

        <transition name="slide-fade">
          <draggable v-show="!hiddenItems" v-model="linksItem.items" v-bind="dragOptions" @input="onChangeDraggable">
            <custom-links-item
              v-for="sublinksItem in linksItem.items"
              :key="sublinksItem.custom_links_id"
              :id="sublinksItem.custom_links_id"
              :custom-links-id="sublinksItem.custom_links_id"
              :should-focus="sublinksItem.custom_links_id === focusLinkId"
              :status="sublinksItem.status"
              :icon="sublinksItem.iconPreview"
              :text="sublinksItem.text"
              :link="sublinksItem.link"
              :disabled="disabled"
            />
          </draggable>
        </transition>

        <transition name="slide-fade">
          <base-button
            v-show="!hiddenItems && !withoutSublinks"
            class="top-margin-medium bottom-margin-small"
            style="margin-left:50px"
            apperance="outline"
            size="small"
            square
            :disabled="disabled"
            @click.native="
              onAddLink({
                position,
                parent: linksItem.custom_links_id,
                order: linksItem.items.length,
              })
            "
          >
            Adicionar Sublink
          </base-button>
        </transition>

      </base-card>
    </draggable>
  </div>
</template>

<script>
export default {
  name: 'TheCustomLinks',
  inject: ['onAddLink', 'onChangeDraggable'],
  components: {
    draggable: () => import(/* webpackChunkName: "draggable" */ 'vuedraggable'),
    CustomLinksItem: () => import(/* webpackChunkName: "CustomLinksItem" */ './CustomLinksItem.vue'),
    BaseCard: () => import(/* webpackChunkName: "BaseCard" */ '@elements/BaseCard/index.vue'),
    BaseButton: () => import(/* webpackChunkName: "BaseButton" */ '@elements/BaseButton/index.vue'),
  },
  props: {
    links: {
      type: Array,
      required: true,
    },
    position: {
      type: Number,
      required: true,
    },
    withoutSublinks: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      hiddenItems: false,
      focusLinkId: null
    };
  },
  computed: {
    dragOptions() {
      return {
        animation: 200,
        ghostClass: 'shadow-large',
      };
    },
    listLinks: {
      get() {
        return this.links;
      },
      set(value) {
        this.onChangeDraggable(value);
      },
    },
  },
  created() {
    this.$root.$on('link-added-focus', (newLinkId) => {
        this.focusLinkId = newLinkId;
        this.$nextTick(() => {
          const el = document.getElementById(newLinkId);
          if (el) {
              
              const desiredBottomMargin = 50; 
              
              const rect = el.getBoundingClientRect();
              const windowHeight = window.innerHeight;

              const scrollAmount = rect.bottom - windowHeight + desiredBottomMargin;

              if (scrollAmount > 0) {
                    window.scrollBy({
                      top: scrollAmount,
                      behavior: 'smooth'
                  });
              }
              
              const nativeInput = el.querySelector('input[type="text"]');
              if (nativeInput) {
                  nativeInput.focus();
              }
          }
        });
      });
  },
  beforeDestroy() {
    this.$root.$off('link-added-focus');
  }
};
</script>

<style scoped>
.slide-fade-enter-active {
  transition: all 0.2s ease;
}
.slide-fade-leave-active {
  transition: all 0.2s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(16px);
  opacity: 0;
}
</style>
