import React, { useContext } from 'react'
import { EntityStreamsGraphScreenContent } from '../components/EntityStreamsGraphScreenContent'
import { ProductImage } from '../components/ProductImage'
import { ScreenNames } from '../constants/ScreenNames'
import { Dsp } from '../Consts'
import { ArtistContext } from '../contexts/ArtistContext'
import { EventType, sendAnalyticsEvent } from '../hooks/useAnalytics'
import { useRegions } from '../hooks/useRegions'
import { useTrack } from '../hooks/useTrack'
import { useTrackStreams } from '../hooks/useTrackStreams'
import { useTrackTopCountryCodes } from '../hooks/useTrackTopCountries'
import { localizedCountryName, Strings } from '../i18n'
import { ReactNavigationProps } from '../Navigation'
import { defaultTimeInterval } from '../types/TimeInterval'

export const TrackStreamsGraphScreen: React.FC<
  ReactNavigationProps<ScreenNames.TrackStreamsGraph>
> = ({ navigation, route }) => {
  const screenName = 'Track Streams Graph Screen'
  const { isrc, dsp } = route.params
  const artist = useContext(ArtistContext)
  const countryCode = route.params.countryCode ?? 'worldwide'

  const { data: regionsData } = useRegions()
  const region = regionsData?.regions?.find(
    (region) => region.countryCode === countryCode
  )

  const { data, retry, refreshing, showToast, error } = useTrack(isrc, () =>
    sendAnalyticsEvent(EventType.PULL_TO_REFRESH, {
      artist_selected: artist.name,
      page: screenName,
      subject: 'user',
      verb: 'refreshed',
      object: 'track',
    })
  )

  const track = data?.track

  const trackTopMarketCountryCodes = useTrackTopCountryCodes(
    isrc,
    defaultTimeInterval
  )

  const title =
    countryCode === 'worldwide'
      ? Strings.Shared.StreamsWorldwide
      : Strings.Shared.StreamsInMarket.replace(
          '%s',
          region != null ? localizedCountryName(region) : ''
        )

  return (
    <EntityStreamsGraphScreenContent
      screenTitle={track?.name}
      title={title}
      headerImage={
        track != null ? (
          <ProductImage product={track.product} isExplicit={false} size={48} />
        ) : null
      }
      dsp={dsp}
      countryCode={countryCode}
      onSelectTimeInterval={(selectedTimeInterval) => {
        sendAnalyticsEvent(EventType.GRAPH_TIMEFRAME_CHANGED, {
          artist_selected: artist.name,
          timeframe_selected: selectedTimeInterval,
          entity_id: isrc,
          screen_name: screenName,
          subject: 'user',
          verb: 'selected',
          object: 'graph_timeframe',
        })
      }}
      useEntityStreams={(interval: Interval, dsp: Dsp | 'all') =>
        useTrackStreams(isrc, interval, dsp, countryCode)
      }
      error={error}
      showToast={showToast}
      navigation={navigation}
      retry={retry}
      refreshing={refreshing}
      onPressMarketSelectorButton={() => {
        navigation.navigate('MarketSelector', {
          previousScreen: 'TrackStreamsGraph',
          topMarketCountryCodes: trackTopMarketCountryCodes,
        })
      }}
    />
  )
}