import React, { useContext } from 'react'
import { ScrollView, View } from 'react-native'
import { AutoLayout } from '../components/AutoLayout'
import { CommonScreenContainer } from '../components/CommonScreenContainer'
import { EntityScreenHeader } from '../components/EntityScreenHeader'
import { EntityStreamsTable } from '../components/EntityStreamsTable'
import { EntityStreamsTile } from '../components/EntityStreamsTile'
import { ErrorBoundary } from '../components/ErrorBoundary'
import { HeaderNav } from '../components/HeaderNav'
import { MarketSelectorButton } from '../components/MarketSelectorButton'
import { PlayButton } from '../components/PlayButton'
import { useNetwork } from '../components/useNetwork'
import { VideoEngagementTile } from '../components/VideoEngagementTile'
import { VideoImage } from '../components/VideoImage'
import { ScreenNames } from '../constants/ScreenNames'
import { ArtistContext } from '../contexts/ArtistContext'
import { ScreenContext } from '../contexts/ScreenContext'
import { UserContext } from '../contexts/UserContext'
import { EventType, sendAnalyticsEvent } from '../hooks/useAnalytics'
import { useScreenRefreshControl } from '../hooks/useScreenRefreshControl'
import { useVideoViews } from '../hooks/useVideoViews'
import { Strings } from '../i18n'
import { ReactNavigationProps } from '../Navigation'
import { EntityScreenStyles } from '../Styles'
import { defaultTimeInterval } from '../types/TimeInterval'
import { Video } from '../types/types'

export interface VideoResponse {
  video: Video
}

export const VideoScreen: React.FC<ReactNavigationProps<ScreenNames.Video>> = ({
  navigation,
  route,
}) => {
  const user = useContext(UserContext)
  const artist = useContext(ArtistContext)
  const timeInterval = defaultTimeInterval
  const videoId = route.params.videoId
  const countryCode = route.params.countryCode ?? 'worldwide'

  const { data, showToast, error, retry, refreshing } =
    useNetwork<VideoResponse>(
      `api/artists/${artist.sonyArtistId}/videos/${videoId}`,
      user,
      () =>
        sendAnalyticsEvent(EventType.PULL_TO_REFRESH, {
          artist_selected: artist.name,
          timeframe_selected: timeInterval,
          page: 'Video Screen',
          subject: 'user',
          verb: 'refreshed',
          object: 'video',
        })
    )

  const video = data?.video

  const { refreshControl, screenContext } = useScreenRefreshControl(
    retry,
    refreshing
  )

  return (
    <ScreenContext.Provider value={screenContext}>
      <CommonScreenContainer>
        <HeaderNav
          showToast={showToast}
          navigation={navigation}
          style={{
            zIndex: 10,
          }}
          right={
            <MarketSelectorButton
              countryCode={countryCode}
              onPress={() => {
                navigation.navigate('MarketSelector', {
                  previousScreen: 'Video',
                })
              }}
            />
          }
        />
        <ErrorBoundary error={error} refreshControl={refreshControl}>
          <ScrollView
            refreshControl={refreshControl}
            showsVerticalScrollIndicator={false}
          >
            <View
              style={{
                flex: 1,
              }}
            >
              {video && (
                <AutoLayout gap={24} style={EntityScreenStyles.container}>
                  <EntityScreenHeader
                    title={video.videoTitle}
                    date={video.dateUploaded}
                    image={
                      <>
                        <VideoImage item={video} width={108} height={108} />
                        <PlayButton
                          url={`http://www.youtube.com/watch?v=${video.dspVideoId}`}
                          width={108}
                          height={108}
                        />
                      </>
                    }
                    style={EntityScreenStyles.entityScreenHeader}
                  />
                  <EntityStreamsTable
                    entityId={video.videoId}
                    countryCode={countryCode}
                    useEntityStreams={(interval: Interval) =>
                      useVideoViews(
                        video.videoId,
                        interval,
                        'youtube',
                        countryCode
                      )
                    }
                  />
                  <EntityStreamsTile
                    dsp={video.dsp}
                    timeInterval={timeInterval}
                    onPress={() => {
                      navigation.navigate(ScreenNames.VideoViewsGraph, {
                        videoId: videoId,
                        countryCode,
                      })
                    }}
                    useEntityStreams={(interval: Interval) =>
                      useVideoViews(
                        video.videoId,
                        interval,
                        'youtube',
                        countryCode
                      )
                    }
                    title={Strings.Shared.Views}
                  />
                  <VideoEngagementTile
                    video={video}
                    timeInterval={timeInterval}
                    countryCode={countryCode}
                    onPress={() => {
                      navigation.navigate(ScreenNames.VideoEngagementGraph, {
                        videoId: videoId,
                        countryCode,
                      })
                    }}
                  />
                </AutoLayout>
              )}
            </View>
          </ScrollView>
        </ErrorBoundary>
      </CommonScreenContainer>
    </ScreenContext.Provider>
  )
}