import React from 'react';
import { Menu, Segment } from 'semantic-ui-react';
import { Auth } from 'aws-amplify';
import { NavLink, withRouter } from 'react-router-dom';
import {AUTH_USER_ACCESS_TOKEN_KEY, AUTH_USER_ID_TOKEN_KEY} from '../constants/userConstant';
import { compose } from "redux";
import { connect } from "react-redux";
import { logout } from '../actions/AuthActions';
import { Cache } from 'aws-amplify';

class Navbar extends React.Component {
    constructor(props) {
        super(props);
        this.handleLogout = this.handleLogout.bind(this);
    }

    async handleLogout() {
        const { history } = this.props;
        try {
            await Auth.signOut({global: true});
            Cache.removeItem(AUTH_USER_ACCESS_TOKEN_KEY);
            Cache.removeItem(AUTH_USER_ID_TOKEN_KEY);
            this.props.logout();
            history.push('/login');
        } catch (e) {
            console.log('error signing out: ', e);
        }
    }

    render() {
        return (
            <Segment inverted color='blue'>
                <Menu inverted secondary color='blue'>
                    <Menu.Item
                        icon='home'
                        name='home'
                        as={NavLink} exact to='/dashboard'
                    />
                    <Menu.Item
                        name='Book An MRI'
                        as={NavLink} to='/dashboard/booking'
                    />
                    <Menu.Item
                        name='Rules'
                        as={NavLink} to='/dashboard/rules'
                    />
                    <Menu.Item
                        name='Results'
                        as={NavLink} to='/dashboard/results'
                    />
                    <Menu.Item
                        name='Spellchecker'
                        as={NavLink} to='/dashboard/spellcheck'
                    />
                    <Menu.Item
                        name='Word Weights'
                        as={NavLink} to='/dashboard/weights'
                    />
                    <Menu.Item
                        name='Conjunctions'
                        as={NavLink} to='/dashboard/conjunctions'
                    />
                    <Menu.Item
                        name='Synonyms'
                        as={NavLink} to='/dashboard/synonyms'
                    />
                    <Menu.Item
                        name="Specialty Exams"
                        as={NavLink} to='/dashboard/specialtyexams'
                    />
                    <Menu.Menu position='right'>
                        {/*<Menu.Item>*/}
                        {/*    <Input icon='search' placeholder='Search...' />*/}
                        {/*</Menu.Item>*/}
                        <Menu.Item
                            name='logout'
                            onClick={this.handleLogout}
                        />
                    </Menu.Menu>
                </Menu>
            </Segment>
        )
    }
}

const mapStateToProps = state => ({
    auth: state.authentication
});

export default compose(
    withRouter,
    connect(mapStateToProps, { logout })
)(Navbar);