<template>
  <div 
    class="ui-gate-layer" 
    :style="{
      'height': normalizeUnitToStyle(height),
      '--len': contentInstances.length, 
      '--current': slideIndex,
    }">
    <div class="ui-gate-slides">
      <slot />
    </div>
  </div>
</template>

<script setup>
import { 
  ref, 
  defineProps,
  watchEffect,
  computed,
  provide,
  watch
} from 'vue'
import { normalizeUnitToStyle } from '../../utils'
import { Relation } from './constant'

const contentInstances = ref([])
const props = defineProps({
  index: {
    type: [Number, String],
    default: 0
  },
  height: {
    type: [Number, String]
  }
})

const slideIndex = computed(
  () => props.index > contentInstances.value.length - 1
    ? contentInstances.value.length - 1
    : props.index < 0
      ? 0
      : props.index
)

watch(
  [contentInstances, slideIndex],
  () => {
    for (let i = 0; i < contentInstances.value.length; i++) {
      const instance = contentInstances.value[i]
      instance.value = i === slideIndex.value
    }
  }
)

provide(Relation, contentInstances)
</script>

<script> export default { name: 'ui-gate' } </script>