import React, { Component } from 'react'
import { func } from 'prop-types'
import { NavLink, Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { Button } from 'semantic-ui-react'

import { getPermissions } from '../../util/rolePermissions'
import { login } from '../User/services/userActions'
import { personType } from '../../util/types'
import Interval from './components/Interval'


// TODO: redux persistent storage & fetch in middleware
import { getProgrammes } from '../Unit/services/programmeActions'
import { getStudyfields } from '../Studyfield/services/studyfieldActions'
import { getAgreements } from '../Agreement/services/agreementActions'
import { getCouncilmeetings } from '../CouncilMeeting/services/councilmeetingActions'
import { getTheses } from '../Thesis/services/thesisActions'
import { getPersons } from '../Person/services/personActions'
import { getNotifications } from '../Notification/services/notificationsAction'
import { getEmailDrafts } from '../Email/services/emailActions'
import { getAxios } from '../../util/apiConnection'

const logout = () => {
    getAxios()
        .get('/user/logout')
        .then((res) => {
            localStorage.clear()
            window.location = res.data.logoutUrl
        })
}

class NavBar extends Component {
    static propTypes = {
        login: func.isRequired,
        getPersons: func.isRequired,
        getProgrammes: func.isRequired,
        getStudyfields: func.isRequired,
        getAgreements: func.isRequired,
        getCouncilmeetings: func.isRequired,
        getTheses: func.isRequired,
        getNotifications: func.isRequired,
        getEmailDrafts: func.isRequired,
        user: personType.isRequired
    }

    state = {
        links: [],
        loaded: false
    }

    componentDidMount() {
        this.props.login()
        if (this.props.user) {
            this.refreshLinks(this.props.user)
        }
        if (process.env.NODE_ENV === 'development') {
            this.props.getPersons()
        }
    }

    componentWillReceiveProps(newProps) {
        if (!this.state.loaded && newProps.user.token) {
            this.setState({ loaded: true },
                this.getEverything(newProps.user))
        } else if (this.props.user.token !== newProps.user.token) {
            this.refreshLinks(newProps.user)
        }
    }

    getEverything = (user) => {
        this.props.getPersons()
        this.props.getStudyfields()
        this.props.getProgrammes()
        this.props.getAgreements()
        this.props.getCouncilmeetings()
        this.props.getTheses()
        this.props.getEmailDrafts()

        if (this.props.user.roles && this.props.user.roles.filter(role => role.role === 'admin').length > 0) {
            this.props.getNotifications()
        }
        this.refreshLinks(user)
    }

    refreshLinks = (user) => {
        let links = []
        // Get all links that the user could require in their work.
        if (user && user.roles) {
            user.roles.forEach((roleObject) => {
                const linkPermissions = getPermissions(roleObject.role, 'nav-bar', 'show')
                links = links.concat(linkPermissions.filter(link => !links.includes(link)))
            })
        }
        // Everyone who can access Grappa is a student
        const linkPermissions = getPermissions('student', 'nav-bar', 'show')
        links = links.concat(linkPermissions.filter(link => !links.includes(link)))

        this.setState({ links })
    };

    render() {
        return (
            <div>
                <Interval function={this.props.login} />
                <div className="ui inverted segment">
                    <h1><Link to="/">Gradut pikaisesti pakettiin</Link></h1>
                </div>
                <div className="ui stackable secondary pointing menu">
                    {this.state.links ? this.state.links.map((elem) => {
                        // Handle special cases:
                        switch (elem.path) {
                            // Using navbar we want to display the NEXT councilmeeting, logic in component.
                            case '/councilmeeting/:id?':
                                return (
                                    <NavLink key={elem.path} to="/councilmeeting" strict className="item">
                                        {elem.navText}
                                    </NavLink>
                                )
                            default:
                                return (
                                    <NavLink key={elem.path} to={elem.path} exact className="item">
                                        {elem.navText}
                                    </NavLink>
                                )
                        }
                    }) : undefined}
                    <div className="right menu">
                        <Link to="/" className="item">{this.props.user.firstname}</Link>
                        <Button as="a" className="item" onClick={logout}>Logout</Button>
                    </div>
                </div>
            </div>
        )
    }
}

const mapDispatchToProps = dispatch => ({
    login(data) {
        dispatch(login(data))
    },
    getProgrammes() {
        dispatch(getProgrammes())
    },
    getStudyfields() {
        dispatch(getStudyfields())
    },
    getAgreements() {
        dispatch(getAgreements())
    },
    getCouncilmeetings() {
        dispatch(getCouncilmeetings())
    },
    getTheses() {
        dispatch(getTheses())
    },
    getPersons() {
        dispatch(getPersons())
    },
    getNotifications() {
        dispatch(getNotifications())
    },
    getEmailDrafts() {
        dispatch(getEmailDrafts())
    }
})

const mapStateToProps = state => ({
    user: state.user
})

export default connect(mapStateToProps, mapDispatchToProps)(NavBar)


@@ -404,17 +404,16 @@
 erval'%0A%0A
-%0A
 // TODO:
@@ -1081,196 +1081,8 @@
 n'%0A%0A
-const logout = () =%3E %7B%0A    getAxios()%0A        .get('/user/logout')%0A        .then((res) =%3E %7B%0A            localStorage.clear()%0A            window.location = res.data.logoutUrl%0A        %7D)%0A%7D%0A%0A
 clas
@@ -4845,16 +4845,27 @@
 nClick=%7B
+this.props.
 logout%7D%3E
@@ -5057,32 +5057,298 @@
 n(data))%0A    %7D,%0A
+    logout() %7B%0A        getAxios()%0A            .get('/user/logout')%0A            .then((res) =%3E %7B%0A                dispatch(%7B type: 'USER_LOGOUT_SUCCESS' %7D)%0A                localStorage.clear()%0A                window.location = res.data.logoutUrl%0A            %7D)%0A    %7D,%0A
     getProgramme

improve logout button