import React, { useCallback, useContext, useState } from 'react'

import { Dsp } from '../Consts'
import { ReactNavigationProps } from '../Navigation'
import { ArtistImage } from '../components/ArtistImage'
import { EntityStreamsGraphScreenContent } from '../components/EntityStreamsGraphScreenContent'
import { ScreenNames } from '../constants/ScreenNames'
import { ArtistContext } from '../contexts/ArtistContext'
import { EventType, sendAnalyticsEvent } from '../hooks/useAnalytics'
import { useArtistStreams } from '../hooks/useArtistStreams'
import { useEntityStreamsSummary } from '../hooks/useEntityStreams'
import { useRegion } from '../hooks/useRegions'
import { localizedCountryName, Strings } from '../i18n'
import { defaultTimeInterval, TimeInterval } from '../types/TimeInterval'

export const ArtistStreamsGraphScreen: React.FC<
  ReactNavigationProps<ScreenNames.ArtistStreamsGraph>
> = ({ navigation, route }) => {
  const screenName = 'Artist Streams Graph Screen'

  const countryCode = route.params.market ?? 'worldwide'
  const dsp = route.params.dsp

  const artist = useContext(ArtistContext)
  const region = useRegion(countryCode)

  const maxInterval = defaultTimeInterval //Longest interval represented in the graph
  const [selectedTimeInterval, selectTimeInterval] =
    useState<TimeInterval>(maxInterval)

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

  const handleOnSelectTimeInterval = useCallback(
    (selectedTimeInterval) => {
      sendAnalyticsEvent(EventType.GRAPH_TIMEFRAME_CHANGED, {
        artist_selected: artist.name,
        timeframe_selected: selectedTimeInterval,
        entity_id: artist.sonyArtistId,
        screen_name: screenName,
        subject: 'user',
        verb: 'selected',
        object: 'graph_timeframe',
      })
    },
    [artist.name, artist.sonyArtistId]
  )

  const getData = (interval: Interval, dsp: Dsp | 'all') => {
    const response = useEntityStreamsSummary(interval, (interval) =>
      useArtistStreams(interval, dsp, countryCode)
    )

    return response?.data != null ? [response.data] : []
  }

  return (
    <EntityStreamsGraphScreenContent
      screenName={screenName}
      screenTitle={artist.name}
      title={title}
      headerImage={<ArtistImage artist={artist} size={48} />}
      dsp={dsp}
      countryCode={countryCode}
      selectedTimeInterval={selectedTimeInterval}
      selectTimeInterval={selectTimeInterval}
      onSelectTimeInterval={handleOnSelectTimeInterval}
      getSummaryData={getData}
      error={null}
      showToast={false}
      navigation={navigation}
      retry={() => {
        sendAnalyticsEvent(EventType.PULL_TO_REFRESH, {
          artist_selected: artist.name,
          page: screenName,
          subject: 'user',
          verb: 'refreshed',
          object: 'streams',
        })
      }}
      refreshing={false}
      onPressMarketSelectorButton={() => {
        navigation.navigate('MarketSelector', {
          previousScreen: ScreenNames.ArtistStreamsGraph,
        })
      }}
      totalLabel={Strings.Shared.TotalStreams}
      gainLossLabel={Strings.Shared.TotalStreamsGainLoss}
      changeLabel={Strings.Shared.TotalStreamsChange}
    />
  )
}