<script setup lang="ts">
import MarkerBox from '@/components/timeline/markers/MarkerBox.vue';
import { useTimelineTicksBeats, useTimelineTicksSeconds } from '@/lib/useTimelineTicks';
import { toPx } from '@/lib/vue';
import { useTimelineStore } from '@/store/TimelineStore';
import { storeToRefs } from 'pinia';
import TickInterval from './TickInterval.vue';

const timeline = useTimelineStore();
const { contentWidthIncludingEmptySpacePx, headerHeight } = storeToRefs(timeline);

const allTicks = [
  { ticks: useTimelineTicksSeconds(), position: "top" },
  { ticks: useTimelineTicksBeats(), position: "bottom" },
] as const;

</script>
<template>
  <div class="tw:absolute tw:max-h-full tw:overflow-hidden" style=""
    :style="{ width: contentWidthIncludingEmptySpacePx, height: toPx(headerHeight) }">

    <!-- header ticks for seconds and beats-->
    <div class="tw:absolute tw:size-full" v-for="{ ticks, position } in allTicks">
      <TickInterval v-for="tick in ticks.ticks.value" :position :left="ticks.left(tick).value"
        :width="ticks.widthPx.value" :label="ticks.label(tick).value" />
    </div>

    <div class="tw:absolute tw:size-full tw:border-b tw:border-[#252525]"></div>

    <!-- header markers -->
    <div class="tw:absolute tw:size-full">
      <MarkerBox v-for="marker in timeline.markers" :marker />
    </div>

  </div>
</template>
<style scoped></style>
