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

import { showSidebar } from "../../actions/show-sidebar";
import { getLogoutUserSubmit } from "../../actions/logout";

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 {
    

    logoutHandler = () => {
        this.props.getLogoutUserSubmit()
    }
    render() {
        console.log('ssdsd',this.props)
	    const { showSidebar, showSidebarFlag, getLogoutUserSubmit } = this.props;
        return (
            <div className={ !showSidebarFlag ? 'menu close' : 'menu' }>
                <nav>
                    <div className="logo">
                        <Link to="/">
                            Just_<span>tri</span>_it
                        </Link>
                    </div>
                    <ul>
						{
                            localStorage.user && <li><Link to="/profile">Profile</Link></li>
						}
						
                        {
                            siteMenu.map(link =>
                                <li key={link.id}>
                                    <Link to={link.href}>{link.text}</Link>
                                </li>
                            )
                        }
						{
                            !localStorage.user && <li><Link to="/login">Login</Link></li>
						}
                        {
                            localStorage.user && <li>
                                <button className="logout" onClick={getLogoutUserSubmit}>
                                    <i className="fa fa-sign-out"></i>
                                </button>
                            </li>
						}
						
                    </ul>
                </nav>
                <div className="menu-skew">
                    <div className="img-bg"></div>
                </div>
                <button className={ showSidebarFlag ? 'burgerIcon open' : 'burgerIcon' } type="button" onClick={showSidebar}><span></span></button>
            </div>
        )
    }
}

const mapStateToProps = state => {
    return {
        showProfile: state.login.showProfile,
        showSidebarFlag: state.sidebar.showSidebar
    };
};

export default connect(
    mapStateToProps,
    { showSidebar, getLogoutUserSubmit }
)(Sidebar);