import {connect} from "react-redux";
import React from "react";
import {Route, Redirect, Link, useHistory} from "react-router-dom";
import { sessionCheck, Logout } from "./Protected.actions";
import {Layout, Menu,Row, Col,} from "antd";
import {BarChartOutlined, UserOutlined,LogoutOutlined,SettingOutlined} from "@ant-design/icons";
const { Content, Header } = Layout;
const   Protected =({ component: Component, Logout, auth, ...rest }) => {
    let history = useHistory()
    const logout = errorInfo => {
        Logout().then(message => {
            history.replace('/')
            auth.loggedIn = false;
        })
    };


    return(
        <Route {...rest}
               render={props =>
                   auth.loggedIn ? (
                       <div>
                       <Header>
                           <Menu theme="dark" mode="horizontal" >
                               <Menu.Item key="1" icon={<UserOutlined />}>
                                   <Link to="/list">Entry List</Link>
                               </Menu.Item>
                               <Menu.Item key="2" icon={<BarChartOutlined />}>
                                   <Link to="/statistics">Statistics</Link>
                               </Menu.Item>
                               <Menu.Item key="3" icon={<SettingOutlined />}>
                                   <Link to="/settings">Change Password</Link>
                               </Menu.Item>
                               <Menu.Item key="4" icon={<LogoutOutlined />} onClick={logout}>
                                   Logout
                               </Menu.Item>
                           </Menu>
                       </Header>
                           <Content style={{ marginTop: "100px", marginBottom: "100px" }}>
                               <Row justify="space-around">
                                   <Col span={20} style={{ textAlign: "center" }}>
                                       <Component {...props} />
                                   </Col>
                               </Row>
                           </Content>
                       </div>
                   ) : (
                       <Redirect to={{ pathname: "/", state: { from: props.location } }} />
                   )
               }
        />
    );
}


const mapDispatchToProps = dispatch => ({
    sessionCheck: () => dispatch(sessionCheck).then(()=>{
        dispatch(sessionCheck)
    }),
    Logout: () => dispatch(Logout()),
});
const mapStateToProps = (state) => ({
    auth: state.protectedReducer,
});

export default connect(
    mapStateToProps,mapDispatchToProps
)(Protected);