import { useState } from 'react'

import { TimeInterval } from '../types/TimeInterval'
import { EventType, sendAnalyticsEvent } from './useAnalytics'

export function useScreenTimeInterval(
  defaultTimeInterval: TimeInterval,
  {
    screenName,
    artistName,
    entityId,
  }: {
    screenName: string
    artistName: string
    entityId: string
  }
): [TimeInterval, (timeInterval: TimeInterval) => void] {
  const [timeInterval, setTimeInterval] =
    useState<TimeInterval>(defaultTimeInterval)

  const setTimeIntervalAndSendAnalytics = (ti: TimeInterval) => {
    setTimeInterval(ti)

    sendAnalyticsEvent(EventType.SCREEN_TIMEFRAME_CHANGED, {
      artist_selected: artistName,
      timeframe_selected: timeInterval,
      entity_id: entityId,
      screen_name: screenName,
      subject: 'user',
      verb: 'selected',
      object: 'screen_timeframe',
    })
  }

  return [timeInterval, setTimeIntervalAndSendAnalytics]
}