import React from 'react';
import {
    Help,
    KeyGlyph,
    WarningGlyph } from '@orchard/frontend-react-components';
import { formatMessage } from '@orchard/frontend-localization';
import WiseLogo from 'src/assets/wise-logo.svg';
import {
    TW_PROFILE_STATUS_UNVERIFIED,
    TW_PROFILE_STATUS_VERIFIED,
    TW_PROFILE_STATUS_ERROR } from '../../constants';
import messages from './i18n';

const CLASS_NAME = 'SearchPagePaymentsStatus';

type Props = {
    profileCreationLoading?: boolean,
    transferWiseProfileStatus?: string,
    paymentIsNotActivated: boolean
};

const PaymentsStatus: React.FC<Props> = ({
    profileCreationLoading,
    transferWiseProfileStatus,
    paymentIsNotActivated
}) => {
    const renderStatusMessage = (
        IconComponent: React.ComponentType, message: string,
        tooltipMessage?: React.ReactNode, renderIconBeforeMessage: boolean = true
    ) => {

        const Icon = () => (
            <div className={ `${CLASS_NAME}-icon` }>
                <IconComponent />
            </div>
        );

        return tooltipMessage ? (
            <Help id="payments-status-tooltip" message={ tooltipMessage }>
                <div className={ CLASS_NAME }>
                    { renderIconBeforeMessage && <Icon /> }
                    { message }
                    { !renderIconBeforeMessage && <Icon /> }
                </div>
            </Help>
        ) : (
            <div className={ CLASS_NAME }>
                { renderIconBeforeMessage && <Icon /> }
                { message }
                { !renderIconBeforeMessage && <Icon /> }
            </div>
        );
    };

    const renderUnverifiedStatus = () => {
        const tooltipMessageParts = formatMessage(
            messages.verifyingAccountTooltip
        ).split('{transferwise}');

        const tooltipMessage = (
            <span>
                { tooltipMessageParts[0] }
                <strong>{ formatMessage(messages.wise) }</strong>
                { tooltipMessageParts[1] || '' }
            </span>
        );

        return renderStatusMessage(
            KeyGlyph,
            formatMessage(messages.verifyingAccount),
            tooltipMessage
        );
    };

    if (paymentIsNotActivated)
        return null;

    switch (transferWiseProfileStatus) {
        case TW_PROFILE_STATUS_VERIFIED:
            return renderStatusMessage(
                () => <img src={ WiseLogo } alt={ formatMessage(messages.paymentsSetUpTooltip) } />,
                formatMessage(messages.connectedTo),
                formatMessage(messages.paymentsSetUpTooltip),
                false
            );
        case TW_PROFILE_STATUS_UNVERIFIED:
            return renderUnverifiedStatus();
        case TW_PROFILE_STATUS_ERROR:
            return renderStatusMessage(
                WarningGlyph,
                formatMessage(messages.paymentsSetupFailed)
            );
        default: {
            if (profileCreationLoading)
                return renderUnverifiedStatus();
            return null;
        }
    }
};

export default PaymentsStatus;