Untitled

import { useCalendarContext } from '@/components/Calendar/context/CalendarProvider'
import DateSlider from '@/components/Calendar/DateSlider/DateSlider'
import { useEvents } from '@/components/Calendar/hooks/useEvents'
import TimelinePages from '@/components/Calendar/Timeline/TimelinePages'
import TimelineRuler from '@/components/Calendar/Timeline/TimelineRuler'
import { BaseEvent } from '@/components/Calendar/types'
import { getHours, getMinutes } from 'date-fns'
import { ReactElement, useEffect, useMemo, useRef } from 'react'
import { ScrollView, View } from 'react-native'

type Props = {
  events?: BaseEvent[]
}

const Timeline = (props: Props): ReactElement => {
  const { events = [] } = props

  const { timeSlotHeight } = useCalendarContext()
  const scrollRef = useRef<ScrollView>(null)
  const { groupEventsByDate } = useEvents()
  const eventsByDate = useMemo(() => groupEventsByDate(events), [events])

  useEffect(() => {
    const now = new Date()
    const hour = getHours(now)
    const minutes = getMinutes(now)
    scrollRef.current?.scrollTo({ y: (hour - 7 + minutes / 60) * timeSlotHeight, animated: true })
  }, [])

  return (
    <>
      <DateSlider />
      <ScrollView ref={scrollRef} showsVerticalScrollIndicator={false} scrollEventThrottle={16}>
        <View style={{ flexDirection: 'row' }}>
          <TimelineRuler />
          <TimelinePages events={eventsByDate} />
        </View>
      </ScrollView>
    </>
  )
}

export default Timeline