<template>
  <div class="ivyforms-field__slider">
    <IvyFormItem
      :label="hideLabel ? '' : label"
      :required="required"
      :label-position="labelPosition"
    >
      <IvySlider
        :key="`slider-${minValue}-${maxValue}-${step}-${showGrid}`"
        :model-value="sliderValue"
        :min="minValue"
        :max="maxValue"
        :step="step"
        :disabled="true"
        :show-labels="true"
        :show-grid="showGrid"
        :show-tooltip="false"
        :aria-label="label"
      />
      <div v-if="description" class="ivyforms-description-message regular-14">
        {{ description }}
      </div>
    </IvyFormItem>
  </div>
</template>

<script setup lang="ts">
import { computed, defineProps } from 'vue'
import { useFormBuilder } from '@/stores/useFormBuilder'
import IvyFormItem from '@/views/_components/form/IvyFormItem.vue'
import IvySlider from '@/views/_components/slider/IvySlider.vue'

const props = defineProps<{ fieldIndex: number }>()
const formBuilderStore = useFormBuilder()

// Computed properties to dynamically get values from the store
const field = computed(() => formBuilderStore.fields.find((f) => f.fieldIndex === props.fieldIndex))

const label = computed(() => field.value?.label || '')
const description = computed(() => field.value?.description || '')
const required = computed(() => field.value?.required || false)
const hideLabel = computed(() => field.value?.hideLabel || false)
const labelPosition = computed(() => field.value?.labelPosition || 'default')
const minValue = computed(() => Number(field.value?.minValue ?? 0))
const maxValue = computed(() => Number(field.value?.maxValue ?? 100))
const step = computed(() => Number(field.value?.step ?? 1))
const showGrid = computed(() => Boolean(field.value?.showGrid))
const sliderValue = computed(() => {
  const defaultValue = field.value?.defaultValue
  return Number(defaultValue)
})
</script>

<style scoped lang="scss">
.ivyforms-field__slider {
  padding: 12px 0;

  :deep(.ivyforms-description-message) {
    margin-top: 8px;
    color: var(--map-base-dusk-symbol-2);
  }
}
</style>
