<template>
  <div
    data-test="time-wheels"
    class="relative flex items-center justify-center gap-3 py-2"
  >
    <!-- bande centrale (overlay, traverse les 2 colonnes) -->
    <div
      class="pointer-events-none absolute inset-x-2 top-1/2 z-0 h-8 mx-3 -translate-y-1/2 rounded-lg bg-m-primary-light"
    />

    <MalioTimeWheel
      :model-value="hours"
      :values="HOURS"
      aria-label="Heures"
      class="relative z-10"
      @update:model-value="onHours"
    />

    <span class="relative z-10 text-[14px] font-bold text-black">:</span>

    <MalioTimeWheel
      :model-value="minutes"
      :values="MINUTES"
      aria-label="Minutes"
      class="relative z-10"
      @update:model-value="onMinutes"
    />
  </div>
</template>

<script setup lang="ts">
import {computed} from 'vue'
import MalioTimeWheel from './TimeWheel.vue'
import {formatTime, parseTime} from '../composables/timeFormat'

defineOptions({name: 'MalioTimeWheels', inheritAttrs: false})

const props = withDefaults(
  defineProps<{modelValue?: string | null}>(),
  {modelValue: ''},
)

const emit = defineEmits<{(e: 'update:modelValue', value: string): void}>()

const HOURS = Array.from({length: 24}, (_, i) => i)
const MINUTES = Array.from({length: 60}, (_, i) => i)

const parts = computed(() => parseTime(props.modelValue) ?? {hours: 0, minutes: 0})
const hours = computed(() => parts.value.hours)
const minutes = computed(() => parts.value.minutes)

const onHours = (value: number) => emit('update:modelValue', formatTime(value, minutes.value))
const onMinutes = (value: number) => emit('update:modelValue', formatTime(hours.value, value))
</script>
