import React from 'react'
import { View } from 'react-native'
import { FlatList } from 'react-native-gesture-handler'
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 { useVideos } from '../hooks/useVideos'
import { Strings } from '../i18n'
import { ReactNavigationProps } from '../Navigation'
import { spaces } from '../Spaces'
import { Video } from '../types/types'
import { formatDate } from '../util'
import { compareDateStrings } from '../util/date'

const VideosScreenModes = ['views', 'upload', 'all'] as const
export type VideosScreenModes = typeof VideosScreenModes[number]

export const VideoListItem: React.FC<{ item: Video; onPress: () => void }> = ({
  item,
  onPress,
}) => (
  <ListItemContainer onPress={onPress}>
    <View
      style={{
        justifyContent: 'center',
        marginRight: 16,
      }}
    >
      <VideoImage item={item} />
    </View>
    <ListItemInfoContainer>
      <ListItemTitle title={item.videoTitle} />
      {/* 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?: Video[]
  onPressItem: (item: Video) => void
}> = ({ videos, onPressItem }) =>
  videos ? (
    <FlatList
      data={videos}
      renderItem={({ item }) => (
        <VideoListItem item={item} onPress={() => onPressItem(item)} />
      )}
      keyExtractor={({ videoId }) => videoId}
    />
  ) : (
    <TrackListSkeleton numItems={6} />
  )

export const VideosScreen: React.FC<
  ReactNavigationProps<ScreenNames.Videos>
> = ({ navigation, route }) => {
  const { data, showToast, refreshControl, error } = useVideos()

  const mode = route.params.mode
  const sortFns: Record<VideosScreenModes, (a: Video, b: Video) => number> = {
    all: (a: Video, b: Video) => a.videoTitle.localeCompare(b.videoTitle),
    views: (a: Video, b: Video) => (b.views ?? 0) - (a.views ?? 0),
    upload: (a: Video, b: Video) =>
      a.dateUploaded != null
        ? b.dateUploaded != null
          ? compareDateStrings(a.dateUploaded, b.dateUploaded)
          : -1
        : 1,
  }
  const titles: Record<VideosScreenModes, string> = {
    all: Strings.Shared.AllVideos,
    views: Strings.Shared.MostViewed,
    upload: Strings.Shared.LatestUploads,
  }
  const videos = data?.videos.sort(sortFns[mode])
  const title = titles[mode]

  return (
    <CommonScreenContainer>
      <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', { videoId: video.videoId })
            }
          />
        </View>
      </ErrorBoundary>
    </CommonScreenContainer>
  )
}