import React, { useContext, useState } from 'react'
import { ActivityIndicator, View } from 'react-native'
import { CommonScreenContainer } from '../components/CommonScreenContainer'
import { ErrorBoundary } from '../components/ErrorBoundary'
import { GraphDetailScreenHeader } from '../components/GraphDetailScreenHeader'
import { HeaderNav } from '../components/HeaderNav'
import { ProductImage } from '../components/ProductImage'
import { TimeIntervalSelector } from '../components/TimeIntervalSelector'
import { TrackComparison } from '../components/TrackComparison'
import { ScreenNames } from '../constants/ScreenNames'
import { ArtistContext } from '../contexts/ArtistContext'
import { EventType, sendAnalyticsEvent } from '../hooks/useAnalytics'
import { useProduct } from '../hooks/useProducts'
import { Strings } from '../i18n'
import { ReactNavigationProps } from '../Navigation'
import { getTracksWithAllDsp } from '../streams'
import { defaultTimeInterval, TimeInterval } from '../types/TimeInterval'
import { timeRangeInterval } from '../util'
import { formatInterval } from '../util/date'

export const ProductTracksComparisonScreen: React.FC<
  ReactNavigationProps<ScreenNames.ProductTracksComparison>
> = ({ navigation, route }) => {
  const artist = useContext(ArtistContext)

  const productId = route.params.productId
  const dsp = 'all'

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

  const { error, data, showToast, refreshControl } = useProduct(
    productId,
    interval,
    () =>
      sendAnalyticsEvent(EventType.PULL_TO_REFRESH, {
        artist_selected: artist.name,
        timeframe_selected: selectedTimeInterval,
        page: 'Product Details Screen',
        subject: 'user',
        verb: 'refreshed',
        object: 'product',
      })
  )

  const product = data?.product
  const tracks =
    data?.streams != null ? getTracksWithAllDsp(data.streams) : null

  return (
    <CommonScreenContainer>
      <ErrorBoundary error={error} refreshControl={refreshControl}>
        <HeaderNav
          title={data?.product?.name ?? ' '}
          titleSecondary={data?.product?.digitalTitleSuppl ?? ' '}
          showToast={showToast}
          navigation={navigation}
          style={{
            zIndex: 10,
          }}
        />
        <View
          style={{
            paddingHorizontal: 10,
            flex: 1,
            justifyContent: 'space-between',
          }}
        >
          <GraphDetailScreenHeader
            image={
              product && (
                <ProductImage
                  size={48}
                  product={product}
                  isExplicit={false} //isExplicit={isProductExplicit(...)} // TODO
                />
              )
            }
            dsp={dsp}
            title={Strings.Shared.TrackPerformance}
            subTitle={formatInterval(interval)}
          />
          {tracks != null ? (
            <TrackComparison tracks={tracks} />
          ) : (
            <ActivityIndicator />
          )}
          <TimeIntervalSelector
            selectedTimeInterval={selectedTimeInterval}
            onSelectTimeInterval={selectTimeInterval}
          />
        </View>
      </ErrorBoundary>
    </CommonScreenContainer>
  )
}