import React from 'react'
import { RefreshControlProps, SectionList } from 'react-native'

import {
  ProductListItemFieldsFragment,
  TrackListItemFieldsFragment,
  VideoListItemFieldsFragment,
} from '../graphql/__generated__/sdk'
import { Strings } from '../i18n'
import { VideoListItem } from '../screens/VideosScreen'
import { SectionTitle } from './SectionTitle'
import { TrackListSkeleton } from './Skeleton'
import { ProductListItem } from './listitems/ProductListItem'
import { StreamsListItem } from './listitems/StreamsListItem'

export type EntityType = 'track' | 'video' | 'product'

const sectionTitles: Record<EntityType, string> = {
  track: Strings.Shared.Tracks,
  video: Strings.Shared.Videos,
  product: Strings.ProductScreen.AlbumsEPsAndLPs,
}

export type EntityListItemFieldsFragment =
  | TrackListItemFieldsFragment
  | VideoListItemFieldsFragment
  | ProductListItemFieldsFragment

/**
 * List of different types of entities, grouped into sections by type
 */
export const EntityList: React.FC<{
  items: Record<EntityType, EntityListItemFieldsFragment[]>
  onPressItem: (item: EntityListItemFieldsFragment) => void
  refreshControl?: React.ReactElement<RefreshControlProps>
}> = ({ items, onPressItem, refreshControl }) => {
  const sections = Object.entries(items).flatMap(([itemType, data]) =>
    data.length > 0
      ? {
          data,
          key: itemType as EntityType,
        }
      : []
  )

  return items ? (
    <SectionList
      keyboardDismissMode="on-drag"
      sections={sections}
      refreshControl={refreshControl}
      renderItem={({ item }) => {
        if (item.__typename === 'Track') {
          return (
            <StreamsListItem track={item} onPress={() => onPressItem(item)} />
          )
        }
        if (item.__typename === 'Video') {
          return <VideoListItem item={item} onPress={() => onPressItem(item)} />
        }
        if (item.__typename === 'Product') {
          return (
            <ProductListItem product={item} onPress={() => onPressItem(item)} />
          )
        }
        return null
      }}
      keyExtractor={(item, index) => {
        if (item.__typename === 'Track') {
          return item.isrc
        }
        if (item.__typename === 'Video') {
          return item.id
        }
        if (item.__typename === 'Product') {
          return item.id
        }
        return index.toString()
      }}
      renderSectionHeader={({ section }) => (
        <SectionTitle title={sectionTitles[section.key]} />
      )}
      stickySectionHeadersEnabled={false}
    />
  ) : (
    <TrackListSkeleton numItems={6} />
  )
}