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

import './sidebar.scss';

const siteMenu = [
    {
        text: 'Home',
        href: '/',
        id: 0
    },
    {
        text: 'Events',
        href: '/events',
        id: 1
    },
    {
        text: 'Result',
        href: '/result',
        id: 2
    },
    {
        text: 'Gallery',
        href: '/gallery',
        id: 3
    },
    {
        text: 'Reviews',
        href: '/reviews',
        id: 4
    }
];

export class Sidebar extends React.Component {
    logout(e) {
        localStorage.removeItem('showProfile');
        document.location.reload(true);
    }

    render() {
        console.log(this.props)
	//const { showProfile } = this.props;
        return (
            <div className="menu">
                <nav>
                    <div className="logo">
                        <Link to="/">
                            Sport
                        </Link>
                    </div>
                    <ul>
						{
                            localStorage.showProfile && <li><Link to="/profile">Profile</Link></li>
						}
						
                        {
                            siteMenu.map(link =>
                                <li key={link.id}>
                                    <Link to={link.href}>{link.text}</Link>
                                </li>
                            )
                        }
						{
                            !localStorage.showProfile && <li><Link to="/login">Login</Link></li>
						}
                        {
                            localStorage.showProfile && <li><button onClick={this.logout}>Logout</button></li>
						}
						
                    </ul>
                </nav>
                <div className="menu-skew">
                    <div className="img-bg"></div>
                </div>
            </div>
        )
    }
}

const mapStateToProps = state => {
    return {
        showProfile: state.login.showProfile
    };
};

export default connect(
    mapStateToProps
)(Sidebar);