import React, { useContext } from 'react'
import { RefreshControlProps, View } from 'react-native'
import { FlatList } from 'react-native-gesture-handler'

import { ReactNavigationProps } from '../Navigation'
import { spaces } from '../Spaces'
import { CommonScreenContainer } from '../components/CommonScreenContainer'
import { ErrorBoundary } from '../components/ErrorBoundary'
import { FilterText } from '../components/Filter'
import { HeaderNav } from '../components/HeaderNav'
import { ListItemContainer } from '../components/ListItemContainer'
import { ListItemInfoContainer } from '../components/ListItemInfoContainer'
import { ListItemSupplName } from '../components/ListItemSupplName'
import { ListItemTitle } from '../components/ListItemTitle'
import { TrackListSkeleton } from '../components/Skeleton'
import { VideoImage } from '../components/VideoImage'
import { ScreenNames } from '../constants/ScreenNames'
import { ArtistContext } from '../contexts/ArtistContext'
import { VideoListItemFieldsFragment } from '../graphql/__generated__/sdk'
import { EventType, sendAnalyticsEvent } from '../hooks/useAnalytics'
import { useScreenRefreshControl } from '../hooks/useScreenRefreshControl'
import { useVideos } from '../hooks/useVideos'
import { Strings } from '../i18n'
import { formatDate } from '../util'
import { compareDateStrings } from '../util/date'

const screenName = 'Video Screen'

const VideosScreenModes = [
  //'views', //TODO: Implement sorting by total all time streams
  'upload',
  'all',
] as const
export type VideosScreenMode = typeof VideosScreenModes[number]

export const VideoListItem: React.FC<{
  item: VideoListItemFieldsFragment
  onPress: () => void
}> = ({ item, onPress }) => (
  <ListItemContainer onPress={onPress}>
    <View
      style={{
        justifyContent: 'center',
        marginRight: 16,
      }}
    >
      <VideoImage item={item} />
    </View>
    <ListItemInfoContainer>
      <ListItemTitle title={item.title} />
      {/* All time views are hidden until delphi problem is resolved      
      <ListItemTitle title={formatCountShort(item.views)} />
      */}
      {item.dateUploaded != null && (
        <ListItemSupplName title={formatDate(item.dateUploaded)} />
      )}
    </ListItemInfoContainer>
  </ListItemContainer>
)

export const VideoList: React.FC<{
  videos?: VideoListItemFieldsFragment[]
  onPressItem: (item: VideoListItemFieldsFragment) => void
  refreshControl: React.ReactElement<RefreshControlProps>
}> = ({ videos, onPressItem, refreshControl }) =>
  videos ? (
    <FlatList
      data={videos}
      renderItem={({ item }) => (
        <VideoListItem item={item} onPress={() => onPressItem(item)} />
      )}
      keyExtractor={({ id }) => id}
      refreshControl={refreshControl}
    />
  ) : (
    <TrackListSkeleton numItems={6} />
  )

export const VideosScreen: React.FC<
  ReactNavigationProps<ScreenNames.Videos>
> = ({ navigation, route }) => {
  const artist = useContext(ArtistContext)
  const { data, showToast, error, retry, refreshing } = useVideos()
  const onPullToRefresh = () => {
    sendAnalyticsEvent(EventType.PULL_TO_REFRESH, {
      artist_selected: artist.name,
      page: 'Videos Screen',
      subject: 'user',
      verb: 'refreshed',
      object: 'videos',
    })
    retry()
  }
  const { refreshControl } = useScreenRefreshControl(
    onPullToRefresh,
    refreshing
  )

  const mode = route.params.mode
  const sortFns: Record<
    VideosScreenMode,
    (a: VideoListItemFieldsFragment, b: VideoListItemFieldsFragment) => number
  > = {
    all: (a: VideoListItemFieldsFragment, b: VideoListItemFieldsFragment) =>
      a.title.localeCompare(b.title),
    //views: (a: VideoFieldsFragment, b: VideoFieldsFragment) => (b.views ?? 0) - (a.views ?? 0),
    upload: (a: VideoListItemFieldsFragment, b: VideoListItemFieldsFragment) =>
      a.dateUploaded != null
        ? b.dateUploaded != null
          ? compareDateStrings(a.dateUploaded, b.dateUploaded)
          : -1
        : 1,
  }
  const titles: Record<VideosScreenMode, string> = {
    all: Strings.Shared.AllVideos,
    //views: Strings.Shared.MostViewed,
    upload: Strings.Shared.LatestUploads,
  }

  const videos = data?.artist?.videos?.sort(sortFns[mode])
  const title = titles[mode]

  return (
    <CommonScreenContainer screenName={screenName}>
      <HeaderNav
        title={title}
        top={<FilterText>{Strings.Shared.AllTime}</FilterText>}
        showToast={showToast}
        navigation={navigation}
        style={{
          zIndex: 10,
        }}
      />
      <ErrorBoundary error={error} refreshControl={refreshControl}>
        <View
          style={{
            flex: 1,
            paddingHorizontal: spaces.insets.medium,
          }}
        >
          <VideoList
            videos={videos}
            onPressItem={(video) =>
              navigation.navigate('Video', { video_id: video.id })
            }
            refreshControl={refreshControl}
          />
        </View>
      </ErrorBoundary>
    </CommonScreenContainer>
  )
}