import React from 'react';
import { connect } from "react-redux";

import { getUserInfo } from "../../actions/getUserInfo";

import './profile.scss';

import manAvatar from '../../assets/img/man.svg';
import womanAvatar from '../../assets/img/woman.svg';

import Sidebar from '../../components/sidebar/Sidebar';

export class Profile extends React.Component {
    componentDidMount() {
        this.props.getUserInfo(JSON.parse(localStorage.user).user._id)
    }

    render() {
        //console.log('profileUser',JSON.parse(localStorage.user).user._id);
        //const user = JSON.parse(localStorage.user).user;
        const { user } = this.props;
        //console.log('user',user);
    
        return (
            <>
                <Sidebar/>
                <div className="container-wrap events profile">
                    <div className="caption-page">
                        <h5>Profile page</h5>
                        <h2>{ user.name }</h2>
                    </div>
                </div>
                <div className="container-wrap">
                    <div className="profile-card">
                        <div className="avatar">
                            {
                                <img src={user.sex === "female" ? womanAvatar :manAvatar } alt="avatar" />
                            }
                        </div>
                        <div className="user-info">
                            <div className="item">
                                <span className="cap">Name:</span>
                                <span className="info">{user.name}</span>
                            </div>
                            <div className="item">
                                <span className="cap">E-mail:</span>
                                <span className="info">{user.email}</span>
                            </div>
                            <div className="item">
                                <span className="cap">Phone:</span>
                                <span className="info">{user.phone}</span>
                            </div>
                            <div className="item">
                                <span className="cap">Gender:</span>
                                <span className="info">{user.sex}</span>
                            </div>
                        </div>
                    </div>

                    <div className="profile-tabs-wrap">
                        <div className="tabs-main">
                            <input id="tab1" type="radio" name="tabs" checked readOnly hidden/>
                            <label htmlFor="tab1" className="tab-label">History</label>

                            {/*<input id="tab2" type="radio" name="tabs" readOnly hidden/>
                            <label htmlFor="tab2" className="tab-label">Settings</label>*/}

                            <div className="tab-item" id="content1">
                               <div className="history">
                                   {/* название ивента, дистанция, время, место */}
                                   <table>
                                       <thead>
                                           <tr>
                                               <th>Event</th>
                                               <th>Distance</th>
                                               <th>Time</th>
                                               <th>Rating</th>
                                           </tr>
                                       </thead>
                                       <tbody>
                                           <tr>
                                               <td>ULTRA MARATHON OF THE ATLANTIC 2019</td>
                                               <td>marathone</td>
                                               <td>3h40</td>
                                               <td>39</td>
                                           </tr>
                                           <tr>
                                               <td>CORFU HALF MARATHON</td>
                                               <td>Half marathone</td>
                                               <td>2h30</td>
                                               <td>30</td>
                                           </tr>
                                       </tbody>
                                   </table>
                               </div>
                            </div>

                            {/*<div className="tab-item" id="content2">
                                <div className="settings">
                                </div>
                            </div>*/}
                        </div>
                    </div>
                </div>
            </>
        )
    }
}

const mapStateToProps = state => {
    return {
        user: state.userInfo.userProfile
    };
};

export default connect(
    mapStateToProps,
    { getUserInfo }
)(Profile);