<template lang="pug">
.slyder-f
  // Flecha izquierda
  .slyder-f__btn.pe-3(
    :class="{ 'slyder-f__btn--disabled': !mostrarFlechaIzquierda }",
    @click="clickAnterior"
  )
    i.fas.fa-chevron-left

  // Contenedor principal con scroll
  .slyder-f__main(:id="'slyder-f-' + mainId")
    ScrollHorizontal(
      v-if="elements.length && rendered" 
      :selectedId="'sl-' + selected"
      row
    )
      .slyder-f__slyde(
        v-for="(item, index) in elements"
        :key="'sl-key-'+item.id"
        :id="'sl-'+item.id"
        :class="columnas"
        v-child="item.elm"
      )

  // Flecha derecha
  .slyder-f__btn.ps-3(
    :class="{ 'slyder-f__btn--disabled': !mostrarFlechaDerecha }",
    @click="clickSiguiente"
  )
    i.fas.fa-chevron-right

  .hidden-slot
    slot
</template>

<script>
import componentSlotMixins from '../mixins/componentSlotMixins'
import slyderMixins from '../mixins/slyderMixins'
import ScrollHorizontal from './plantilla/ScrollHorizontal'

export default {
  name: 'SlyderF',
  components: { ScrollHorizontal },
  mixins: [componentSlotMixins, slyderMixins],
  props: {
    columnas: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      domListo: false,
    }
  },
  mounted() {
    this.$nextTick(() => {
      const esperarRender = () => {
        const container = document.querySelector('#slyder-f-' + this.mainId)
        const elm = document.querySelector(`#sl-${this.elements[0]?.id}`)
        if (container && elm && elm.clientWidth > 0) {
          this.domListo = true
        } else {
          setTimeout(esperarRender, 50)
        }
      }
      esperarRender()
    })
  },
  methods: {
    clickAnterior() {
      const ids = this.elements.map(element => element.id)
      const idxOfSelected = ids.indexOf(this.selected)
      if (idxOfSelected > 0) {
        this.selected = ids[idxOfSelected - 1]
      }
    },
    clickSiguiente() {
      const ids = this.elements.map(element => element.id)
      const container = document.querySelector('#slyder-f-' + this.mainId)
      const elm = document.querySelector(`#sl-${this.elements[0]?.id}`)
      if (!container || !elm) return
      const containerWidth = container.clientWidth
      const elmWidth = elm.clientWidth
      const elmtsPerContainer = Math.round(containerWidth / elmWidth)
      const newIds =
        elmtsPerContainer > 1
          ? ids.slice(0, ids.length - (elmtsPerContainer - 1))
          : ids

      const idxOfSelected = newIds.indexOf(this.selected)
      if (idxOfSelected < newIds.length - 1) {
        this.selected = newIds[idxOfSelected + 1]
      }
    },
  },
  computed: {
    mostrarFlechaIzquierda() {
      if (!this.domListo || !this.elements.length || !this.selected) return false
      return this.selected !== this.elements[0]?.id
    },
    mostrarFlechaDerecha() {
      if (!this.domListo || !this.elements.length || !this.selected) return false
      const container = document.querySelector('#slyder-f-' + this.mainId)
      const elm = document.querySelector(`#sl-${this.elements[0]?.id}`)
      if (!container || !elm || elm.clientWidth === 0) return false
      const containerWidth = container.clientWidth
      const elmWidth = elm.clientWidth
      const visibles = Math.round(containerWidth / elmWidth)
      const ids = this.elements.map(el => el.id)
      const visibleIds = ids.slice(0, ids.length - (visibles - 1))
      return this.selected !== visibleIds[visibleIds.length - 1]
    }
  }
}
</script>

<style lang="sass"></style>
