<script setup lang="ts">
import { useDateFormat } from '@vueuse/core'

import { AXIS_HEIGHT } from '@/types/timeline'

const props = defineProps<{
  ticks: Date[]
  timeScale: any
  zoomedWidth: number
  totalHeight: number
}>()

/**
 * Formats a tick date for display on the axis.
 */
const formatTick = (date: Date) => {
  return useDateFormat(date, 'HH:mm:ss').value
}
const axisHeight = AXIS_HEIGHT
</script>

<template>
  <g class="axis" transform="translate(0, 0)">
    <!-- Axis Background -->
    <rect :width="zoomedWidth" :height="axisHeight" class="fill-background/90" />
    <line :x1="0" :y1="axisHeight" :x2="zoomedWidth" :y2="axisHeight" class="stroke-border" />
    <!-- Ticks and Grid Lines -->
    <g v-for="tick in ticks" :key="tick.getTime()">
      <!-- Tick Mark -->
      <line
        :x1="timeScale(tick)"
        :y1="axisHeight - 6"
        :x2="timeScale(tick)"
        :y2="axisHeight"
        class="stroke-muted-foreground"
      />
      <!-- Tick Label -->
      <text
        :x="timeScale(tick)"
        :y="axisHeight - 12"
        text-anchor="middle"
        class="text-[12px] fill-muted-foreground"
      >
        {{ formatTick(tick) }}
      </text>
      <!-- Vertical Grid Line -->
      <line
        :x1="timeScale(tick)"
        :y1="axisHeight"
        :x2="timeScale(tick)"
        :y2="totalHeight"
        stroke="currentColor"
        stroke-opacity="0.1"
        stroke-dasharray="4"
      />
    </g>
  </g>
</template>
