import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';
import type { PaymentDetails, TPaymentMethod } from '@blocklet/payment-types';
import { Typography } from '@mui/material';
import { fromUnitToToken } from '@ocap/util';

import { usePaymentContext } from '../../contexts/payment';
import { getTxLink } from '../../libs/util';

export default function TxGas(props: { details: PaymentDetails; method: TPaymentMethod }) {
  const { t } = useLocaleContext();
  const { settings } = usePaymentContext();

  const { gas } = getTxLink(props.method, props.details);

  const method = settings.paymentMethods.find((x) => x.id === props.method.id);
  if (gas && method) {
    const currency = method.payment_currencies.find((x) => x.id === method.default_currency_id);
    return (
      <Typography component="span">
        {fromUnitToToken(gas, currency!.decimal)} {currency!.symbol} ({method.name})
      </Typography>
    );
  }

  return (
    <Typography
      component="small"
      sx={{
        color: 'text.secondary',
      }}>
      {t('common.none')}
    </Typography>
  );
}