import React, { useContext } from 'react'

import { ReactNavigationProps } from '../Navigation'
import { EntityStreamsSourceScreenContent } from '../components/EntityStreamsSourceScreenContent'
import { ProductImage } from '../components/ProductImage'
import { ScreenNames } from '../constants/ScreenNames'
import { ArtistContext } from '../contexts/ArtistContext'
import { EventType, sendAnalyticsEvent } from '../hooks/useAnalytics'
import { useScreenTimeInterval } from '../hooks/useScreenTimeInterval'
import { useTrack } from '../hooks/useTrack'
import { useTrackStreamSources } from '../hooks/useTrackStreamSources'
import { useTrackTopCountryCodes } from '../hooks/useTrackTopCountries'
import { defaultTimeInterval } from '../types/TimeInterval'
import { timeRangeInterval } from '../util'

export const TrackStreamSourcesScreen: React.FC<
  ReactNavigationProps<ScreenNames.TrackStreamSources>
> = ({ navigation, route }) => {
  const screenName = 'Track Stream Sources Screen'
  const { isrc, dsp } = route.params
  const artist = useContext(ArtistContext)
  const countryCode = route.params.market ?? 'worldwide'

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

  const trackTopMarketCountryCodes = useTrackTopCountryCodes(
    isrc,
    defaultTimeInterval
  )

  const [selectedTimeInterval, setSelectTimeInterval] = useScreenTimeInterval(
    defaultTimeInterval,
    {
      screenName,
      artistName: artist.name,
      entityId: artist.sonyArtistId,
    }
  )

  const { sources } = useTrackStreamSources(
    isrc,
    countryCode,
    timeRangeInterval(selectedTimeInterval)
  )

  return (
    <EntityStreamsSourceScreenContent
      screenName={screenName}
      screenTitle={track?.name}
      headerImage={
        track != null ? (
          <ProductImage
            product={track.product}
            isExplicit={track.isExplicit}
            size={48}
          />
        ) : null
      }
      dsp={dsp}
      countryCode={countryCode}
      sources={sources}
      selectedTimeInterval={selectedTimeInterval}
      onTimeIntervalChange={setSelectTimeInterval}
      error={error}
      showToast={showToast}
      navigation={navigation}
      retry={onPullToRefresh}
      refreshing={refreshing}
      onPressMarketSelectorButton={() => {
        navigation.navigate('MarketSelector', {
          previousScreen: 'TrackStreamSources',
          topMarketCountryCodes: trackTopMarketCountryCodes,
        })
      }}
    />
  )
}