import React, { ComponentType } from 'react';
import { FormattedMessage as Message } from 'react-intl';

import appName from 'app/components/auth/appInfo/appName.intl';

import BoxesField from './BoxesField';

import styles from './styles.scss';

interface State {
    lastEventId?: string | void;
}

interface Props {
    lastEventId?: string;
}

// TODO: probably it's better to render this view from the App view
//       to remove dependencies from the store and IntlProvider
const BSoD: ComponentType<Props> = ({ lastEventId }) => {
    let emailUrl = 'mailto:support@ely.by';

    if (lastEventId) {
        emailUrl += `?subject=Bug report for #${lastEventId}`;
    }

    return (
        <div className={styles.body}>
            <canvas className={styles.canvas} ref={(el: HTMLCanvasElement | null) => el && new BoxesField(el)} />

            <div className={styles.wrapper}>
                <div className={styles.title}>
                    <Message {...appName} />
                </div>
                <div className={styles.lineWithMargin}>
                    <Message
                        key="criticalErrorHappened"
                        defaultMessage="There was a critical error due to which the application can not continue its normal operation."
                    />
                </div>
                <div className={styles.line}>
                    <Message
                        key="reloadPageOrContactUs"
                        defaultMessage="Please reload this page and try again. If problem occurs again, please report it to the developers by sending email to"
                    />
                </div>
                <a href={emailUrl} className={styles.support}>
                    support@ely.by
                </a>
                <div className={styles.easterEgg}>
                    <Message
                        key="alsoYouCanInteractWithBackground"
                        defaultMessage="You can also play around with the background – it's interactable ;)"
                    />
                </div>
            </div>
        </div>
    );
};

export default BSoD;