import type { ExtendedChain, Route } from '@lifi/sdk'
import { useAccount } from '@lifi/wallet-management'
import { Stack, Typography } from '@mui/material'
import type React from 'react'
import { memo } from 'react'
import { useTranslation } from 'react-i18next'
import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
import { useFieldValues } from '../../stores/form/useFieldValues.js'
import { PageContainer } from '../PageContainer.js'
import { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'
import { RouteCard } from '../RouteCard/RouteCard.js'
import { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js'
import { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'
import { Container, Header } from './RoutesExpanded.style.js'

interface RoutesContentProps {
  routes?: Route[]
  isFetching: boolean
  isLoading: boolean
  dataUpdatedAt: number
  refetchTime: number
  fromChain: ExtendedChain | undefined
  refetch: () => void
  onRouteClick: (route: Route) => void
}

const headerHeight = '52px'

export const RoutesContent: React.NamedExoticComponent<RoutesContentProps> =
  memo(function RoutesContent({
    routes,
    isFetching,
    isLoading,
    dataUpdatedAt,
    refetchTime,
    fromChain,
    refetch,
    onRouteClick,
  }: RoutesContentProps) {
    const { t } = useTranslation()
    const { mode, modeOptions } = useWidgetConfig()

    const { account } = useAccount({ chainType: fromChain?.chainType })
    const [toAddress] = useFieldValues('toAddress')
    const { requiredToAddress } = useToAddressRequirements()

    const currentRoute = routes?.[0]

    const routeNotFound = !currentRoute && !isLoading && !isFetching
    const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress
    const allowInteraction = account.isConnected && !toAddressUnsatisfied

    const title =
      mode === 'custom'
        ? modeOptions?.custom?.type === 'deposit'
          ? t('header.deposit')
          : t('header.youPay')
        : t('header.receive')

    return (
      <Container enableColorScheme minimumHeight={isLoading}>
        <Header sx={{ height: headerHeight }}>
          <Typography
            noWrap
            sx={{
              fontSize: 18,
              fontWeight: '700',
              flex: 1,
            }}
          >
            {title}
          </Typography>
          <ProgressToNextUpdate
            updatedAt={dataUpdatedAt || Date.now()}
            timeToUpdate={refetchTime}
            isLoading={isFetching}
            onClick={() => refetch()}
            sx={{ marginRight: -1 }}
          />
        </Header>
        <PageContainer
          sx={{ height: `calc(100% - ${headerHeight})`, overflow: 'auto' }}
        >
          <Stack
            direction="column"
            spacing={2}
            sx={{
              flex: 1,
              paddingTop: 1.5,
              paddingBottom: 3,
            }}
          >
            {routeNotFound ? (
              <RouteNotFoundCard />
            ) : (isLoading || isFetching) && !routes?.length ? (
              Array.from({ length: 3 }).map((_, index) => (
                <RouteCardSkeleton key={index} />
              ))
            ) : (
              routes?.map((route: Route, index: number) => (
                <RouteCard
                  key={index}
                  route={route}
                  onClick={
                    allowInteraction ? () => onRouteClick(route) : undefined
                  }
                  active={index === 0}
                  expanded={routes?.length === 1}
                />
              ))
            )}
          </Stack>
        </PageContainer>
      </Container>
    )
  })
