import React from 'react';
import { formatMessage } from '@orchard/frontend-localization';
import { getPrivacyPolicyUrl } from 'src/urls/transferwise';
import messages from './i18n';

const CLASS_NAME = 'TermsAndConditionsPage';

const TermsAndConditionsPage = () => {
    const renderParagraphMessage = (message: string) => {
        const messageParts = formatMessage(message).split('{privacyPolicyLink}');

        const elements = messageParts.reduce<React.ReactNode[]>(
            /* eslint-disable react/no-array-index-key */
            (parts, part, index) =>
                parts.length
                    ? [
                        ...parts,
                        <a
                            href={ getPrivacyPolicyUrl() }
                            key={ index }
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            { formatMessage(messages.privacyPolicyLink) }
                        </a>,
                        part,
                    ]
                    : [part],
            []
            /* eslint-enable */
        );

        return elements;
    };

    return (
        <div className={ CLASS_NAME }>
            <div className={ `${CLASS_NAME}-container` }>
                <div className={ `${CLASS_NAME}-title` }>
                    { formatMessage(messages.acknowledgementAndAgreement) }
                </div>
                { messages.paymentsTermsAndConditions.map((message, index) => (
                // eslint-disable-next-line react/no-array-index-key
                    <p key={ index }>
                        { renderParagraphMessage(message) }
                    </p>
                )) }
            </div>
        </div>
    );
};

export default TermsAndConditionsPage;