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

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>
            )}

            <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;