import ArrowForward from '@mui/icons-material/ArrowForward'
import ErrorRounded from '@mui/icons-material/ErrorRounded'
import InfoRounded from '@mui/icons-material/InfoRounded'
import { ListItemAvatar, ListItemText, Typography } from '@mui/material'
import { useNavigate } from 'react-router-dom'
import { useProcessMessage } from '../../hooks/useProcessMessage.js'
import { useRouteExecution } from '../../hooks/useRouteExecution.js'
import { RouteExecutionStatus } from '../../stores/routes/types.js'
import { navigationRoutes } from '../../utils/navigationRoutes.js'
import { TokenAvatarGroup } from '../Avatar/Avatar.style.js'
import { TokenAvatar } from '../Avatar/TokenAvatar.js'
import { StepTimer } from '../Timer/StepTimer.js'
import { ListItem, ListItemButton } from './ActiveTransactions.style.js'

export const ActiveTransactionItem: React.FC<{
  routeId: string
  dense?: boolean
}> = ({ routeId, dense }) => {
  const navigate = useNavigate()
  const { route, status } = useRouteExecution({
    routeId,
    executeInBackground: true,
  })

  const lastActiveStep = route?.steps.findLast((step) => step.execution)
  const lastActiveProcess = lastActiveStep?.execution?.process.at(-1)

  const { title } = useProcessMessage(lastActiveStep, lastActiveProcess)

  if (!route || !lastActiveStep) {
    return null
  }

  const handleClick = () => {
    navigate(navigationRoutes.transactionExecution, { state: { routeId } })
  }

  const getStatusComponent = () => {
    switch (lastActiveProcess?.status) {
      case 'ACTION_REQUIRED':
      case 'MESSAGE_REQUIRED':
      case 'RESET_REQUIRED':
        return <InfoRounded color="info" fontSize="small" />
      case 'FAILED':
        return <ErrorRounded color="error" fontSize="small" />
      default:
        return (
          <Typography
            sx={{
              fontSize: 14,
              fontWeight: 600,
            }}
          >
            <StepTimer step={lastActiveStep} hideInProgress />
          </Typography>
        )
    }
  }

  const ListItemComponent = dense ? ListItem : ListItemButton

  return (
    <ListItemComponent onClick={handleClick} dense disableRipple={dense}>
      <ListItemAvatar>
        <TokenAvatarGroup total={2}>
          <TokenAvatar token={route.fromToken} />
          <TokenAvatar token={route.toToken} />
        </TokenAvatarGroup>
      </ListItemAvatar>
      <ListItemText
        sx={{ margin: 0 }}
        disableTypography
        primary={
          <Typography
            sx={{
              fontWeight: 500,
              lineHeight: 1,
              display: 'flex',
              alignItems: 'center',
              marginLeft: 2,
              height: 16,
            }}
          >
            {route.fromToken.symbol}
            <ArrowForward sx={{ paddingX: 0.5 }} />
            {route.toToken.symbol}
          </Typography>
        }
        secondary={
          status !== RouteExecutionStatus.Done ? (
            <Typography
              sx={{
                fontWeight: 400,
                fontSize: 12,
                color: 'text.secondary',
                lineHeight: 1,
                mt: 0.75,
                ml: 2,
              }}
            >
              {title}
            </Typography>
          ) : null
        }
      />
      {getStatusComponent()}
    </ListItemComponent>
  )
}