import React from 'react';
import cx from 'classnames';
import { Help } from '@orchard/frontend-react-components';
import { formatMessage } from '@orchard/frontend-localization';
import { TW_TRANSFER_STATUS_COLORS, TW_TRANSFER_STATUS_MESSAGES } from '../../constants';

const CLASS_NAME = 'TransactionStatusIndicator';

type Props = {
    status: string;
};

const TransactionStatusIndicator: React.FC<Props> = ({ status }) => {
    const transactionStatus = status.toLowerCase();

    const color = (TW_TRANSFER_STATUS_COLORS as {
        [status: string]: string | undefined;
    })[transactionStatus];

    const message = (TW_TRANSFER_STATUS_MESSAGES as {
        [status: string]: string | undefined;
    })[transactionStatus];

    const indicator = (
        <div
            data-testid="transaction-status-indicator"
            className={ cx(CLASS_NAME, color && `${CLASS_NAME}--${color}`) }
        />
    );

    return message ? (
        <Help id="transfer-status-indicator" message={ formatMessage(message) }>
            { indicator }
        </Help>
    ) : (
        indicator
    );
};

export default TransactionStatusIndicator;