import React from 'react';
import {connect} from 'react-redux';
import PortalStore from 'trc-client-core/src/portal/PortalStore';
import Loader from 'trc-client-core/src/components/Loader';
import Table from 'bd-stampy/components/Table';
import Auth from 'trc-client-core/src/components/Auth';

var PortalProfileView = React.createClass({
    displayName: 'PortalProfileView',
    render: function () {
        return (
            <div>
                {this.renderProfile(this.props.participant.toJS()) }
                <p>
                    <em> If you believe any of the above information to be incorrect, we&apos;d love to hear from you. Please contact the 
                        <Auth site="TOYOTA"><a className="link" href="mailto:training@toyota.com.au"> Toyota Institute Australia helpdesk </a></Auth>
                        <Auth site="LEXUS"><a className="link" href="mailto:training@lexus.com.au"> Lexus Academy helpdesk </a></Auth>
                    </em>
                </p>
            </div>
        ); 
    },
    renderProfile: function (participant) {
        if(!participant){
            return <Loader></Loader>;
        }

        return (
            <table className="Table hug capitalize row">
                <tbody>
                    <tr>
                        <td className="w30 "><strong>Job Title:</strong></td>
                        <td>{participant.jobPositionDesc}</td>
                    </tr>
                    <tr>
                        <td><strong>Department:</strong></td>
                        <td>{participant.department}</td>
                    </tr>
                    <tr>
                        <td><strong>Dealership:</strong></td>
                        <td>{participant.dealerName}</td>
                    </tr>
                    <tr>
                        <td><strong>Region:</strong></td>
                        <td>{participant.regionCode}</td>
                    </tr>
                    <tr>
                        <td><strong>Email Address:</strong></td>
                        <td><a className="link" href={"mailto:" + participant.email}>{participant.email}</a></td>
                    </tr>
                </tbody>
            </table>
        );
    }
});

export default connect(
    (state) => {
        return {
            participant: state.participant.get('dashboard')
        }
    }
)(PortalProfileView);