import React, { useContext, useState } from 'react'
import { View } from 'react-native'
import { CommonScreenContainer } from '../components/CommonScreenContainer'
import { Entity, EntityList, EntityType } from '../components/EntityList'
import { HeaderNav } from '../components/HeaderNav'
import { SearchBar } from '../components/SearchBar'
import { trackMatchesFilter } from '../components/TrackList'
import { ScreenNames } from '../constants/ScreenNames'
import { ArtistContext } from '../contexts/ArtistContext'
import { EventType, sendAnalyticsEvent } from '../hooks/useAnalytics'
import { useProducts } from '../hooks/useProducts'
import { useTracksScreenData } from '../hooks/useTracksScreenData'
import { useVideos } from '../hooks/useVideos'
import { Strings } from '../i18n'
import { ReactNavigationProps } from '../Navigation'
import { getTracksWithAllDsp } from '../streams'
import { Styles } from '../Styles'
import { defaultTimeInterval, TimeInterval } from '../types/TimeInterval'
import { TrackWithStreamsByDspAndDate } from '../types/types'

export interface TracksScreenResponse {
  tracks: TrackWithStreamsByDspAndDate[]
}

const screen = 'Search Screen'

function filterFn(item: Entity, filterString: string) {
  if (item.entityType === 'track') {
    return trackMatchesFilter(filterString)(item.track)
  }
  if (item.entityType === 'video') {
    return item.video.videoTitle
      .toLocaleLowerCase()
      .includes(filterString.toLowerCase().trim())
  }
  if (item.entityType === 'product') {
    return item.product.name
      .toLocaleLowerCase()
      .includes(filterString.toLowerCase().trim())
  }
}

export const SearchScreen: React.FC<
  ReactNavigationProps<ScreenNames.Tracks>
> = ({ navigation, route }) => {
  const artist = useContext(ArtistContext)
  const [timeInterval, setTimeInterval] =
    useState<TimeInterval>(defaultTimeInterval)
  const [filter, setFilter] = useState('')

  const { data, showToast, refreshControl } = useTracksScreenData(
    timeInterval,
    () =>
      sendAnalyticsEvent(EventType.PULL_TO_REFRESH, {
        artist_selected: artist.name,
        timeframe_selected: timeInterval,
        page: 'Search Screen',
        subject: 'user',
        verb: 'refreshed',
        object: 'tracks',
      })
  )

  const tracksWithAll = data?.tracks
    ? getTracksWithAllDsp(data.tracks)
    : undefined

  const tracks: Entity[] =
    tracksWithAll?.map((track) => ({
      entityType: 'track',
      track: track.item,
    })) ?? []

  const vids = useVideos()
  const videos: Entity[] =
    vids?.data?.videos?.map((video) => ({
      entityType: 'video',
      video,
    })) ?? []

  const { albums } = useProducts(() => {})
  /* TODO: Uncomment when albums section is ready to release
    const products: Entity[] =
      albums?.map((product) => ({
        entityType: 'product',
        product,
      })) ?? []
      */
  const products: Entity[] = []

  const items: Record<EntityType, Entity[]> = {
    track: tracks.filter((item) => filterFn(item, filter)),
    video: videos.filter((item) => filterFn(item, filter)),
    product: products.filter((item) => filterFn(item, filter)),
  }

  return (
    <CommonScreenContainer>
      <HeaderNav
        title={Strings.Shared.Search}
        showToast={showToast}
        navigation={navigation}
        style={{
          zIndex: 10,
        }}
      />
      <View style={{ ...Styles.screenHorizontalPadding, marginBottom: 20 }}>
        <SearchBar
          filter={filter}
          setFilter={setFilter}
          placeholder={Strings.Shared.SearchHint}
          autoFocus
        />
      </View>
      <View
        style={{
          flex: 1,
          paddingHorizontal: 8,
        }}
      >
        <EntityList
          items={items}
          onPressItem={(item) => {
            if (item.entityType === 'track') {
              navigation.navigate('Track', {
                isrc: item.track.isrc,
                track: item.track,
              })
            }

            if (item.entityType === 'video') {
              navigation.navigate('Video', {
                videoId: item.video.videoId,
              })
            }

            if (item.entityType === 'product') {
              navigation.navigate(ScreenNames.ProductDetail, {
                productId: item.product.productId,
              })
            }
          }}
        />
      </View>
    </CommonScreenContainer>
  )
}