import { useStartProfiler } from '@shopify/react-native-performance'
import React, { forwardRef, memo, useCallback, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { FlatList } from 'react-native'
import { useAppDispatch } from 'src/app/hooks'
import { TokenBalanceList } from 'src/components/TokenBalanceList/TokenBalanceList'
import { useTokenDetailsNavigation } from 'src/components/TokenDetails/hooks'
import { WalletEmptyState } from 'src/components/home/WalletEmptyState'
import { TabProps } from 'src/components/layout/TabHelpers'
import { openModal } from 'src/features/modals/modalSlice'
import { Flex } from 'ui/src'
import { NoTokens } from 'ui/src/components/icons'
import { GQLQueries } from 'uniswap/src/data/graphql/uniswap-data-api/queries'
import { ModalName } from 'uniswap/src/features/telemetry/constants'
import { CurrencyId } from 'uniswap/src/types/currency'
import { MobileScreens } from 'uniswap/src/types/screens/mobile'
import { BaseCard } from 'wallet/src/components/BaseCard/BaseCard'
import { ScannerModalState } from 'wallet/src/components/QRCodeScanner/constants'
import { TokenBalanceListRow } from 'wallet/src/features/portfolio/TokenBalanceListContext'

export const TOKENS_TAB_DATA_DEPENDENCIES = [GQLQueries.PortfolioBalances]

export const TokensTab = memo(
  forwardRef<FlatList<TokenBalanceListRow>, TabProps & { isExternalProfile?: boolean }>(
    function _TokensTab(
      {
        owner,
        containerProps,
        scrollHandler,
        isExternalProfile = false,
        renderedInModal = false,
        onRefresh,
        refreshing,
        headerHeight,
      },
      ref
    ) {
      const { t } = useTranslation()
      const dispatch = useAppDispatch()
      const tokenDetailsNavigation = useTokenDetailsNavigation()
      const startProfilerTimer = useStartProfiler()

      const onPressToken = useCallback(
        (currencyId: CurrencyId): void => {
          startProfilerTimer({ source: MobileScreens.Home })
          tokenDetailsNavigation.navigate(currencyId)
        },
        [startProfilerTimer, tokenDetailsNavigation]
      )

      const onPressAction = useCallback((): void => {
        dispatch(
          openModal({ name: ModalName.WalletConnectScan, initialState: ScannerModalState.WalletQr })
        )
      }, [dispatch])

      const renderEmpty = useMemo((): JSX.Element => {
        // Show different empty state on external profile pages
        return isExternalProfile ? (
          <BaseCard.EmptyState
            description={t('home.tokens.empty.description')}
            icon={<NoTokens color="$neutral3" size="$icon.70" />}
            title={t('home.tokens.empty.title')}
            onPress={onPressAction}
          />
        ) : (
          <WalletEmptyState />
        )
      }, [isExternalProfile, onPressAction, t])

      return (
        <Flex grow backgroundColor="$surface1">
          <TokenBalanceList
            ref={ref}
            containerProps={containerProps}
            empty={renderEmpty}
            headerHeight={headerHeight}
            isExternalProfile={isExternalProfile}
            owner={owner}
            refreshing={refreshing}
            renderedInModal={renderedInModal}
            scrollHandler={scrollHandler}
            onPressToken={onPressToken}
            onRefresh={onRefresh}
          />
        </Flex>
      )
    }
  )
)
