import { Box, Collapse } from '@mui/material'
import { useNavigate } from '@tanstack/react-router'
import { useTranslation } from 'react-i18next'
import { useRoutes } from '../../hooks/useRoutes.js'
import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
import { navigationRoutes } from '../../utils/navigationRoutes.js'
import { ButtonTertiary } from '../ButtonTertiary.js'
import type { CardProps } from '../Card/Card.js'
import { Card } from '../Card/Card.js'
import { CardTitle } from '../Card/CardTitle.js'
import { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'
import { RouteCard } from '../RouteCard/RouteCard.js'
import { RouteCardSkeleton } from '../RouteCard/RouteCardSkeleton.js'
import { RouteNotFoundCard } from '../RouteCard/RouteNotFoundCard.js'

export const Routes: React.FC<CardProps> = (props) => {
  const { t } = useTranslation()
  const navigate = useNavigate()
  const { mode, modeOptions, showSingleRoute, defaultUI } = useWidgetConfig()
  const {
    routes,
    isLoading,
    isFetching,
    isFetched,
    dataUpdatedAt,
    refetchTime,
    refetch,
  } = useRoutes()

  const currentRoute = routes?.[0]

  if (!currentRoute && !isLoading && !isFetching && !isFetched) {
    return null
  }

  const handleCardClick = () => {
    navigate({ to: navigationRoutes.routes })
  }

  const routeNotFound = !currentRoute && !isLoading && !isFetching
  const onlySingleRoute = mode === 'refuel' || showSingleRoute
  const showAll =
    !onlySingleRoute && !routeNotFound && (routes?.length ?? 0) > 1

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

  return (
    <Card {...props}>
      {/* The cards layout's Receive card already carries this header. */}
      {defaultUI?.layout === 'cards' ? null : <CardTitle>{title}</CardTitle>}
      <ProgressToNextUpdate
        updatedAt={dataUpdatedAt || Date.now()}
        timeToUpdate={refetchTime}
        isLoading={isFetching}
        onClick={() => refetch()}
        sx={{
          position: 'absolute',
          top: 8,
          right: 8,
        }}
      />
      <Box
        sx={{
          p: 2,
        }}
      >
        {isLoading && !currentRoute ? (
          <RouteCardSkeleton variant="cardless" />
        ) : !currentRoute ? (
          <RouteNotFoundCard />
        ) : (
          <RouteCard route={currentRoute} variant="cardless" active />
        )}

        <Collapse timeout={225} in={showAll} unmountOnExit mountOnEnter>
          <Box
            sx={{
              mt: 2,
            }}
          >
            <ButtonTertiary onClick={handleCardClick} fullWidth>
              {t('button.showAll')}
            </ButtonTertiary>
          </Box>
        </Collapse>
      </Box>
    </Card>
  )
}