import {
  Box, Body, Link,
} from '@biom3/react';
import { Checkout } from '@imtbl/checkout-sdk';
import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { PASSPORT_URL } from '../../lib';
import {
  noTransactionsBodyStyle, noTransactionsContainerStyle, passportBodyStyle, containerStyles,
} from './noTransactionStyles';
import { ChangeWallet } from './ChangeWallet';

type NoTransactionsProps = {
  checkout: Checkout,
  isPassport: boolean,
  changeWallet: () => void
};

export function NoTransactions(
  {
    checkout,
    isPassport,
    changeWallet,
  }: NoTransactionsProps,
) {
  const { t } = useTranslation();
  const [passportLink, setPassportLink] = useState('');

  useEffect(() => {
    if (!checkout) return;
    setPassportLink(PASSPORT_URL[checkout.config.environment]);
  }, [checkout]);
  return (
    <Box sx={containerStyles}>
      <ChangeWallet onChangeWalletClick={changeWallet} />
      <Box sx={noTransactionsContainerStyle}>
        <Body
          size="small"
          sx={noTransactionsBodyStyle}
        >
          {t('views.TRANSACTIONS.status.noTransactions.body')}
        </Body>
        <Body
          size="small"
          sx={noTransactionsBodyStyle}
        >
          Can&apos;t find your pending withdrawal? Try connecting with your L1 wallet.
        </Body>
        {isPassport && (
          <Body
            size="small"
            sx={passportBodyStyle}
          >
            {t('views.TRANSACTIONS.status.noTransactions.passport.body')}
            {' '}
            <Link
              size="small"
              rc={<a target="_blank" href={passportLink} rel="noreferrer" />}
            >
              {t('views.TRANSACTIONS.status.noTransactions.passport.link')}
            </Link>
          </Body>
        )}
      </Box>
    </Box>
  );
}