import React from 'react';
import {__} from '../../../../assets/javascripts/library.js';

function EfzStatusMessage({ efzStatus }) {
    if (efzStatus === 'NOT_CHECKED') {
        return <p style={{fontWeight: 'bold'}}>
            Dein erweitertes Führungszeugnis konnte nicht automatisch überprüft werden. Bitte kontaktiere die Aktionsleitung, da deine Teilnahme nur mit gültigem eFZ möglich ist.
        </p>;
    }

    if (efzStatus === 'CHECKED_INVALID') {
        return <p style={{fontWeight: 'bold'}}>
            Du hast noch kein erweitertes Führungszeugnis bereitgestellt, sodass deine Teilnahme nicht möglich ist. Bitte reiche dein erweitertes Führungszeugnis umgehend ein,
            da deine Teilnahme andernfalls storniert werden kann. Bitte setze dich mit der Aktionsleitung in Verbindung.
        </p>;
    }

    return null; // default: nix anzeigen
}

function SuccessContainer({ participant_data }) {
    return (
        <p>
            <h3>{__('Hello', 'solea')} {participant_data.nicename}</h3>
            <p>
                {participant_data.introduction}<br />
                {__('We have received the following information:', 'solea')}
            </p>
            <table className="solea-payment-table">
                <tr><td>{__('Arrival', 'solea')}:</td><td>{participant_data.arrival}</td></tr>
                <tr><td>{__('Departure', 'solea')}:</td><td>{participant_data.departure}</td></tr>
                <tr><td>{__('Participation group', 'solea')}:</td><td>{participant_data.participation_group}</td></tr>
            </table>
            {participant_data.needs_payment ? (
                <p>
                    <table className="solea-payment-table">
                        <tr>
                            <td>{__('Account owner', 'solea')}:</td>
                            <td>{participant_data.account_owner}</td>
                        </tr>

                        <tr>
                            <td>{__('IBAN', 'solea')}:</td>
                            <td>{participant_data.account_iban}</td>
                        </tr>

                        <tr>
                            <td>{__('Purpose', 'solea')}:</td>
                            <td>{participant_data.payment_purpose}</td>
                        </tr>

                        <tr>
                            <td>{ __('Total amount', 'solea')}: </td>
                            <td>{participant_data.amount}</td>
                        </tr>

                        <tr>
                            <td colSpan="2">
                                {__('If your bank supports QR-Code based paying, use this code', 'solea')}<br />
                                <img className="girocode" src={participant_data.girocode_url} />
                            </td>
                        </tr>
                    </table>
                    <p>
                        {__( 'If payment is not possible or only partially possible within this period, please contact the event management.', 'solea' )}
                    </p>
                </p>
            ) : (
                <p>
                    {__('You do not have to pay the registration fee. This is the case if participation is supported, billing is done through your local group, or there are other decisions.', 'solea')}<br/>
                    {__('Your registration is confirmed now.', 'solea' ) }
                </p>


            )}

            <EfzStatusMessage efzStatus={participant_data.efz_status} />

            <p>
                {__('You will receive an email with further information within 2 hours. If you do not receive this mail or have any questions about your registration, please contact the event management.', 'solea')}<br />
                {__('You can contact us at', 'solea')}: {participant_data.event_email}
            </p>
        </p>
        );
}

export default SuccessContainer;