import { debounce } from 'lodash'
import React, { useContext, useEffect, useMemo, useState } from 'react'
import { View } from 'react-native'

import { ReactNavigationProps } from '../Navigation'
import { Styles } from '../Styles'
import { CommonScreenContainer } from '../components/CommonScreenContainer'
import {
  EntityList,
  EntityListItemFieldsFragment,
} from '../components/EntityList'
import { HeaderNav } from '../components/HeaderNav'
import { SearchBar } from '../components/SearchBar'
import { ScreenNames } from '../constants/ScreenNames'
import { ArtistContext } from '../contexts/ArtistContext'
import { EventType, sendAnalyticsEvent } from '../hooks/useAnalytics'
import { useArtistEntities } from '../hooks/useArtistEntities'
import { useScreenRefreshControl } from '../hooks/useScreenRefreshControl'
import { Strings } from '../i18n'
import { defaultTimeInterval } from '../types/TimeInterval'
import { TrackWithStreamsByDspAndDate } from '../types/types'

export interface TracksScreenResponse {
  tracks: TrackWithStreamsByDspAndDate[]
}

export const SearchScreen: React.FC<
  ReactNavigationProps<ScreenNames.Tracks>
> = ({ navigation }) => {
  const screenName = 'Search Screen'
  const artist = useContext(ArtistContext)
  const timeInterval = defaultTimeInterval
  const [filter, setFilter] = useState('')
  const [filterQuery, setFilterQuery] = useState(filter)
  const setFilterQueryDebounced = useMemo(
    () => debounce(setFilterQuery, 300),
    []
  )
  useEffect(() => {
    setFilterQueryDebounced(filter)
  }, [filter, setFilterQueryDebounced])

  const { data, retry, refreshing, showToast } = useArtistEntities(filterQuery)

  const entities: EntityListItemFieldsFragment[] | undefined =
    data?.artist?.entities.edges.map(({ node }) => node)

  const items =
    entities != null
      ? {
          track: entities.filter((e) => e.__typename === 'Track'),
          video: entities.filter((e) => e.__typename === 'Video'),
          product: entities.filter((e) => e.__typename === 'Product'),
        }
      : { track: [], video: [], product: [] }

  const onPullToRefresh = () => {
    sendAnalyticsEvent(EventType.PULL_TO_REFRESH, {
      artist_selected: artist.name,
      timeframe_selected: timeInterval,
      page: screenName,
      subject: 'user',
      verb: 'refreshed',
      object: 'tracks',
    })
    retry()
  }

  const { refreshControl } = useScreenRefreshControl(
    onPullToRefresh,
    refreshing
  )

  return (
    <CommonScreenContainer screenName={screenName}>
      <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}
          refreshControl={refreshControl}
          onPressItem={(item) => {
            if (item.__typename === 'Track') {
              navigation.navigate('Track', {
                isrc: item.isrc,
                track: undefined,
              })
            }

            if (item.__typename === 'Video') {
              navigation.navigate('Video', {
                video_id: item.id,
              })
            }

            if (item.__typename === 'Product') {
              navigation.navigate(ScreenNames.ProductDetail, {
                product_id: item.id,
              })
            }
          }}
        />
      </View>
    </CommonScreenContainer>
  )
}