import React, {Component} from 'react';
import {Redirect, NavLink} from 'react-router-dom';
import './Profile.css';
import stravaSyncButton from '../assets/photos/sync-strava.png';
import stravaConnectButton from '../assets/photos/connect-strava.png';
import sportsTrackerSyncButton from '../assets/photos/sport-sync.png';
import sportsTrackerConnectButton from '../assets/photos/sport-connect.png';
import resetButton from '../assets/photos/reset-button.png';


const JWToken = 'x-fortech-auth';
const fortechUser = 'Fortech-user';

class Profile extends Component {

    constructor(props) {
        super(props);
        this.state = {
            //userProfile: Object,
        }
    }

    componentDidMount() {
        if (localStorage.getItem(JWToken) == null) {
            return (<Redirect to={'/'}/>)
        }
        let profileURL = 'http://localhost:8080/user/profile';

        fetch(profileURL, {
            method: 'GET',
            headers: new Headers({
                'x-fortech-auth': localStorage.getItem(JWToken)
            }),
        }).then((response) => {
            if (response.ok) {
               /* response.json()
                    .then((data) => this.setState({userProfile: data}))*/
            } else {
                throw new Error(response.status.toString());
            }
        }).catch((error) => {
            if (error.message === '401') {
                localStorage.removeItem(JWToken);
                localStorage.removeItem(fortechUser);
                this.setState({userProfile: null});
            }
        })
    }

    userCheck(){
        let user = localStorage.getItem(fortechUser);
        user = JSON.parse(user);
        if(user.stravaAthleteId != null || user.sportsTrackerUsername != null){
            document.getElementById("connect").hidden=true;
            document.getElementById("sync").hidden=false;
            if(user.stravaAthleteId != null){
                document.getElementById("stravaSync").classList.add('shadow');
                document.getElementById("stravaSync").classList.remove('disabled-button');
                document.getElementById("trackerSync").classList.add('disabled-button');
                document.getElementById("trackerSync").classList.remove('shadow');
            } else {
                document.getElementById("trackerSync").classList.add('shadow');
                document.getElementById("trackerSync").classList.remove('disabled-button');
                document.getElementById("stravaSync").classList.add('disabled-button');
                document.getElementById("stravaSync").classList.remove('shadow');
            }
        } else {
            document.getElementById("sync").hidden=true;
            document.getElementById("connect").hidden=false;
        }
    }

    conectWithStrava() {
        console.log("try to connect with Strava");
    }

    connectWithSportstracker() {
        console.log("try to connect with Tracker");
        // document.getElementById("connect").style.display="none";
    }

    render() {

        if (localStorage.getItem(JWToken) == null) {
            return (<Redirect to={'/'}/>);
        }

        console.log(this.state.userProfile);

        let user = localStorage.getItem(fortechUser)
        user = JSON.parse(user);

        let photo = 'data:image/png;base64,' + user.avatar;

        return (
            <div className='container'>
                <div className='row'>
                    <div className='col-md-7 mx-auto'>
                        <div className="profileCard hovercard">
                            <div className="cardheader">

                            </div>
                            <div className="avatar">
                                <img alt="" src={photo}/>
                            </div>
                            <div className="info">
                                <div className="title">
                                    <a target="_blank" className="user-name">{user.firstName} {user.lastName}</a>
                                </div>
                                <div className="desc user-info">Gender: <b>{user.gender}</b></div>
                                <div className="desc user-info">Unit: <b>{user.unit}</b></div>
                                <div className="desc user-info">Username: <b>{user.username}</b></div>
                                <div className="desc user-info">Last sync: <b>{user.trackLastSync}</b></div>
                                <hr/>
                                <div className='row' id="connect" >
                                    <div className="myButton col-6" ><img className="myButtonImage shadow" id="stravaConnect"
                                                                         src={stravaConnectButton}
                                                                         onClick={this.conectWithStrava}/></div>
                                    <div className="myButton col-6" ><img className="myButtonImage shadow" id="trackerConnect"
                                                                         src={sportsTrackerConnectButton}
                                                                         onClick={this.userCheck}/></div>

                                </div>
                                <div className='row' id="sync" >
                                    <div className="myButton col-6" ><img className="myButtonImage  disabled-button " id="stravaSync"
                                                                         src={stravaSyncButton}
                                                                         onClick={this.conectWithStrava}/></div>
                                    <div className="myButton col-6" ><img className="myButtonImage disabled-button" id="trackerSync"
                                                                         src={sportsTrackerSyncButton}
                                                                         onClick={this.connectWithSportstracker}/></div>

                                </div>
                                <div className="row btn col-md-5 mt-3 justify-content-center">
                                    <img className="myButtonImage shadow"
                                         src={resetButton}
                                         onClick={this.RESET}/>
                                </div>
                                <hr/>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        )
    }
}

export default Profile;