import React, { Component } from 'react';

import { FormattedMessage as Message, FormattedRelative as Relative, FormattedHTMLMessage as HTMLMessage } from 'react-intl';
import Helmet from 'react-helmet';

import { userShape } from 'components/user/User';

import ProfileField from './ProfileField';
import styles from './profile.scss';
import profileForm from './profileForm.scss';
import messages from './Profile.messages';

export default class Profile extends Component {
    static displayName = 'Profile';
    static propTypes = {
        user: userShape
    };

    render() {
        const { user } = this.props;

        return (
            <div>
                <Message {...messages.accountPreferencesTitle}>
                    {(pageTitle) => (
                        <h2 className={styles.indexTitle}>
                            <Helmet title={pageTitle} />
                            {pageTitle}
                        </h2>
                    )}
                </Message>

                <div className={styles.indexContent}>
                    <div className={styles.descriptionColumn}>
                        <div className={styles.indexDescription}>
                            <Message {...messages.accountDescription} />
                        </div>
                    </div>

                    <div className={styles.formColumn}>
                        <div className={profileForm.form}>
                            <div className={styles.item}>
                                <h3 className={profileForm.title}>
                                    <Message {...messages.personalData} />
                                </h3>
                                <p className={profileForm.description}>
                                    <Message {...messages.preferencesDescription} />
                                </p>
                            </div>

                            <ProfileField
                                label={<Message {...messages.nickname} />}
                                value={user.username}
                                warningMessage={<Message {...messages.mojangPriorityWarning} />}
                            />

                            <ProfileField
                                label={'E-mail'}
                                value={user.email}
                            />

                            <ProfileField
                                label={<Message {...messages.password} />}
                                link="/profile/change-password"
                                value={<Message {...messages.changedAt} values={{
                                    at: (<Relative value={user.passwordChangedAt * 1000} />)
                                }} />}
                                warningMessage={user.shouldChangePassword ? (
                                    <HTMLMessage {...messages.oldHashingAlgoWarning} />
                                ) : ''}
                            />

                            <ProfileField
                                label={<Message {...messages.twoFactorAuth} />}
                                value={<Message {...messages.disabled} />}
                            />

                            <ProfileField
                                label={'UUID'}
                                value={user.uuid}
                                readonly
                            />
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}