import React, { useContext, useState } from 'react'
import { Product } from '../types/Product'
import { CommonScreenContainer } from '../components/CommonScreenContainer'
import { View } from 'react-native'
import { EventType, sendAnalyticsEvent } from '../hooks/useAnalytics'
import { ArtistContext } from '../contexts/ArtistContext'
import { ScreenNames } from '../constants/ScreenNames'
import { ReactNavigationProps } from '../Navigation'
import { HeaderNav } from '../components/HeaderNav'
import { Strings } from '../i18n'
import {
  ProductListContainer,
  ProductSortFn,
  sortProductByName,
  sortProductByReleaseDate,
} from '../components/ProductListContainer'
import { ProductListItem } from '../components/ProductListItem'
import { ErrorBoundary } from '../components/ErrorBoundary'
import { Mode } from '../types/helpers'
import { useProducts } from '../hooks/useProducts'
import { defaultTimeInterval, TimeInterval } from '../types/TimeInterval'

export const ProductsScreen: React.FC<
  ReactNavigationProps<ScreenNames.Products>
> = ({ navigation, route }) => {
  const artist = useContext(ArtistContext)

  const modeOptions: Record<
    Mode.RELEASE | Mode.ALL,
    {
      sortFn: ProductSortFn
      title: string
    }
  > = {
    [Mode.RELEASE]: {
      sortFn: sortProductByReleaseDate,
      title: Strings.Shared.NewestReleases,
    },
    [Mode.ALL]: {
      sortFn: sortProductByName,
      title: Strings.Shared.AllProducts,
    },
  }

  const options = modeOptions[route.params.mode as Mode.RELEASE | Mode.ALL]

  const [timeInterval, setTimeInterval] =
    useState<TimeInterval>(defaultTimeInterval)
  const { albums, showToast, refreshControl, error } = useProducts(() =>
    sendAnalyticsEvent(EventType.PULL_TO_REFRESH, {
      artist_selected: artist.name,
      timeframe_selected: timeInterval,
      page: 'Product Screen',
      subject: 'user',
      verb: 'refreshed',
      object: 'products',
    })
  )

  const productsByCategory = albums
    ? [
        {
          title: Strings.ProductScreen.AlbumsEPsAndLPs,
          data: albums,
        },
      ]
    : undefined

  return (
    <CommonScreenContainer>
      <HeaderNav
        title={options.title}
        showToast={showToast}
        navigation={navigation}
        style={{
          zIndex: 10,
        }}
        timeInterval={timeInterval}
        setTimeInterval={setTimeInterval}
      />
      <ErrorBoundary error={error} refreshControl={refreshControl}>
        <View
          style={{
            flex: 1,
            paddingHorizontal: 8,
          }}
        >
          <ProductListContainer
            productsByCategory={productsByCategory}
            onPressProduct={(product: Product) =>
              navigation.navigate(ScreenNames.ProductDetail, {
                productId: product.productId,
                timeInterval,
              })
            }
            refreshControl={refreshControl}
            ListItem={ProductListItem}
            {...options}
          />
        </View>
      </ErrorBoundary>
    </CommonScreenContainer>
  )
}