import React from 'react';
import { formatMessage } from '@orchard/frontend-localization';
import { Button } from '@orchard/frontend-react-components';
import Segment from 'src/utils/segment';
import { SEGMENT_EVENTS, SEGMENT_CATEGORIES } from 'src/constants';
import WelcomePageGraphic from '../../assets/welcome-page-graphic.svg';
import useIdentity from '../../utils/use-identity';
import messages from './i18n';

export const CLASS_NAME = 'WelcomePage';

type Props = {
    onHide(): void;
};

const WelcomePage: React.FC<Props> = ({ onHide }) => {
    const { contact: { contactFirstName } } = useIdentity();

    const onClick = () => {
        Segment.trackEvent(SEGMENT_EVENTS.GET_STARTED_CLICK, SEGMENT_CATEGORIES.WELCOME);
        return onHide();
    };

    return (
        <div className={ CLASS_NAME }>
            <div className={ `${CLASS_NAME}-hero` }>
                <div className={ `${CLASS_NAME}-hero-background` } />
                <div className={ `${CLASS_NAME}-hero-content` }>
                    <img
                        alt=""
                        src={ WelcomePageGraphic }
                        className={ `${CLASS_NAME}-hero-graphic` }
                    />
                </div>
            </div>
            <div className={ `${CLASS_NAME}-content` }>
                <div className={ `${CLASS_NAME}-header` }>
                    <span role="img" aria-labelledby="welcome-header">
                        👋
                    </span>{ ' ' }
                    <span id="welcome-header">
                        { formatMessage(messages.heading, { name: contactFirstName }) }
                    </span>
                </div>
                <p className={ `${CLASS_NAME}-message` }>
                    { formatMessage(messages.welcomeMessage1) }
                    <br />
                    { formatMessage(messages.welcomeMessage2) }
                </p>
                <p className={ `${CLASS_NAME}-disclaimer` }>
                    { formatMessage(messages.welcomeMessage3) }
                </p>
                <Button
                    className={ `${CLASS_NAME}-button` }
                    variant="primary"
                    onClick={ onClick }
                >
                    { formatMessage(messages.getStarted) }
                </Button>
            </div>
        </div>
    );
};

export default WelcomePage;