import type { Route } from '@lifi/sdk';
import { Wallet } from '@mui/icons-material';
import type { BoxProps } from '@mui/material';
import { Box, Collapse, Typography } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { useToAddressRequirements } from '../hooks/useToAddressRequirements.js';
import { useFieldValues } from '../stores/form/useFieldValues.js';
import { AlertMessage } from './AlertMessage/AlertMessage.js';

interface ToAddressRequiredMessageProps extends BoxProps {
  route?: Route;
}

export const ToAddressRequiredMessage: React.FC<
  ToAddressRequiredMessageProps
> = ({ route, ...props }) => {
  const { t } = useTranslation();
  const [toAddress] = useFieldValues('toAddress');
  const { requiredToAddress } = useToAddressRequirements();

  const showMessage = route && requiredToAddress && !toAddress;

  return (
    <Collapse timeout={225} in={showMessage} unmountOnExit mountOnEnter>
      <Box {...props}>
        <AlertMessage
          title={
            <Typography variant="body2" px={1} color="text.primary">
              {t('info.message.toAddressIsRequired')}
            </Typography>
          }
          icon={<Wallet />}
          multilineTitle
        />
      </Box>
    </Collapse>
  );
};