import React, { useContext } from 'react'
import { Animated, StyleSheet, View } from 'react-native'
import { Carousel } from '../components/Carousel'
import { CenteredActivityIndicator } from '../components/CenteredActivityIndicator'
import { CommonScreenContainer } from '../components/CommonScreenContainer'
import { CountryIcon } from '../components/CountryIconAndName'
import { EntityScreenHeader } from '../components/EntityScreenHeader'
import { EntityStreamsTable } from '../components/EntityStreamsTable'
import { EntityStreamsTile } from '../components/EntityStreamsTile'
import { MarketTopTracksTile } from '../components/MarketTopTracksTile'
import { ErrorBoundary } from '../components/ErrorBoundary'
import { HeaderNav } from '../components/HeaderNav'
import { ScreenNames } from '../constants/ScreenNames'
import { ChartDsp, chartDsps, StreamingDsp, streamingDsps } from '../Consts'
import { ScreenContext } from '../contexts/ScreenContext'
import { useArtistStreams } from '../hooks/useArtistStreams'
import { useRegions } from '../hooks/useRegions'
import { useScreenRefreshControl } from '../hooks/useScreenRefreshControl'
import { Strings } from '../i18n'
import { ReactNavigationProps } from '../Navigation'
import { EntityScreenStyles } from '../Styles'
import { animateTitleOpacity, formatCountryName } from '../util'
import { MarketChartTrackPositionsTile } from '../components/MarketChartTrackPositionsTile'
import { colorsV2 } from '../Colors'
import { spaces } from '../Spaces'
import { EventType, sendAnalyticsEvent } from '../hooks/useAnalytics'
import { DspSlug } from '../types/types'
import { ArtistContext } from '../contexts/ArtistContext'
import { TimeInterval } from '../types/TimeInterval'
import { Track } from '../types/Track'

const styles = StyleSheet.create({
  tile: { flex: 1, marginHorizontal: spaces.insets.medium },
  carousel: { marginHorizontal: -spaces.insets.medium },
  carouselIndicator: {
    paddingTop: 16,
    paddingBottom: 16,
  },
})

const MarketStreamsCarousel: React.FC<{
  timeInterval: TimeInterval
  countryCode: string
  onPressItem: (item: StreamingDsp | 'all') => void
  onSwipe: (item: StreamingDsp | 'all') => void
}> = ({ timeInterval, onPressItem, countryCode, onSwipe }) => (
  <Carousel<StreamingDsp | 'all'>
    items={['all', ...streamingDsps]}
    renderItem={({ item }) => (
      <EntityStreamsTile
        key={item}
        dsp={item}
        timeInterval={timeInterval}
        onPress={() => onPressItem(item)}
        useEntityStreams={(interval: Interval) =>
          useArtistStreams(interval, item, countryCode)
        }
        title={Strings.Shared.Streams}
        style={styles.tile}
      />
    )}
    onSwipe={onSwipe}
    style={styles.carousel}
    indicatorStyle={styles.carouselIndicator}
  />
)

const MarketTopTracksCarousel: React.FC<{
  timeInterval: TimeInterval
  countryCode: string
  onPressTrack: (track: Track) => void
  onSwipe: (item: StreamingDsp | 'all') => void
}> = ({ timeInterval, onPressTrack, countryCode, onSwipe }) => (
  <Carousel<StreamingDsp | 'all'>
    items={['all', ...streamingDsps]}
    renderItem={({ item, style }) => (
      <MarketTopTracksTile
        key={item}
        dsp={item}
        countryCode={countryCode}
        timeInterval={timeInterval}
        style={[
          {
            backgroundColor: colorsV2.black,
            marginHorizontal: styles.tile.marginHorizontal,
          },
          style,
        ]}
        onPressTrack={onPressTrack}
      />
    )}
    onSwipe={onSwipe}
    style={styles.carousel}
    indicatorStyle={styles.carouselIndicator}
    scale={0.8}
  />
)

const MarketChartTrackPositionsCarousel: React.FC<{
  timeInterval: TimeInterval
  countryCode: string
  onPressItem: (item: ChartDsp) => void
  onSwipe: (item: ChartDsp) => void
}> = ({ timeInterval, onPressItem, countryCode, onSwipe }) => (
  <Carousel<ChartDsp>
    items={[...chartDsps]}
    renderItem={({ item }) => (
      <MarketChartTrackPositionsTile
        key={item}
        dsp={item}
        countryCode={countryCode}
        timeInterval={timeInterval}
        onPress={() => onPressItem(item)}
        style={[styles.tile, { flexShrink: 1 }]}
      />
    )}
    onSwipe={onSwipe}
    style={styles.carousel}
    indicatorStyle={styles.carouselIndicator}
  />
)

export const MarketScreen: React.FC<
  ReactNavigationProps<ScreenNames.Market>
> = ({ navigation, route }) => {
  const artist = useContext(ArtistContext)
  const timeInterval = 'last28days'
  const countryCode = route.params.countryCode
  const regions = useRegions()
  const region = regions.data?.regions.find(
    (r) => r.countryCode === countryCode
  )

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

  const sendAnalyticsForSwipe = (carousel: string) => (dsp: DspSlug) => {
    sendAnalyticsEvent(EventType.MARKET_SCREEN_CAROUSEL_SWIPED, {
      carousel,
      screen: 'Market Screen',
      countryCode,
      dsp,
      artist: {
        name: artist.name,
        sonyArtistId: artist.sonyArtistId,
      },
      subject: 'user',
      verb: 'swiped',
      object: 'carousel',
    })
  }

  const { onScroll, titleOpacity } = animateTitleOpacity(120, 100)

  return (
    <ScreenContext.Provider value={screenContext}>
      <CommonScreenContainer>
        <HeaderNav
          title={
            region?.countryName != null
              ? formatCountryName(region?.countryName)
              : ''
          }
          titleOpacity={titleOpacity}
          showToast={regions?.showToast}
          navigation={navigation}
          style={{ zIndex: 10 }}
        />
        <ErrorBoundary error={regions.error} refreshControl={refreshControl}>
          {region != null ? (
            <Animated.ScrollView
              refreshControl={refreshControl}
              showsVerticalScrollIndicator={false}
              contentContainerStyle={{ flexGrow: 1 }}
              onScroll={onScroll}
            >
              <View style={EntityScreenStyles.container}>
                <EntityScreenHeader
                  title={formatCountryName(region?.countryName)}
                  image={<CountryIcon countryCode={countryCode} size={48} />}
                  style={EntityScreenStyles.entityScreenHeader}
                />
                <EntityStreamsTable
                  entityId={countryCode}
                  countryCode={countryCode}
                  useEntityStreams={(interval: Interval) =>
                    useArtistStreams(interval, 'all', countryCode)
                  }
                  style={{ paddingBottom: 16 }}
                />
                <MarketStreamsCarousel
                  timeInterval={timeInterval}
                  countryCode={countryCode}
                  onPressItem={(item) => {
                    navigation.navigate('ArtistStreamsGraph', {
                      dsp: item,
                      countryCode,
                    })
                  }}
                  onSwipe={sendAnalyticsForSwipe('Streams')}
                />
                <MarketTopTracksCarousel
                  timeInterval={timeInterval}
                  countryCode={countryCode}
                  onPressTrack={(track) =>
                    navigation.navigate(ScreenNames.Track, {
                      isrc: track.isrc,
                      countryCode,
                    })
                  }
                  onSwipe={sendAnalyticsForSwipe('Top Tracks')}
                />
                <MarketChartTrackPositionsCarousel
                  timeInterval={timeInterval}
                  countryCode={countryCode}
                  onPressItem={(item) => {
                    navigation.navigate('MarketCharts', {
                      countryCode,
                      dsp: item,
                    })
                  }}
                  onSwipe={sendAnalyticsForSwipe('Charts')}
                />
              </View>
            </Animated.ScrollView>
          ) : (
            <CenteredActivityIndicator size="large" />
          )}
        </ErrorBoundary>
      </CommonScreenContainer>
    </ScreenContext.Provider>
  )
}