import React from 'react';
import {connect} from 'react-redux';
import style from './navbar.module.sass';
import {setPageForCabinet} from "../../../actions/actionCreator";
import { NavLink } from "react-router-dom";
import NavbarElement from "./navbarElement/navbarElement";
import ContactInfoUser from '../userCabinet/pages/contactInfo/contactInfo';
import FavouritePageUser from "../userCabinet/pages/favourite/favourite";
import OrdersHistoryUser from '../userCabinet/pages/ordersHistory/ordersHistory';
import OrdersAdmin from '../adminCabinet/pages/orders/orders';
import NewGoodsAdmin from '../adminCabinet/pages/goods/Goods';
import AttributesAdmin from '../adminCabinet/pages/attributes/attributes';
import {logout} from "../../../actions/actionCreator";
import {withRouter} from 'react-router';
import {roles} from "../../../constants/user";

const CabinetNavbar = (props) => {
    const {history, role} = props;


    if(role == roles.ADMIN) {
        return(
            <div className={style.mainContainer}>
                <ul>
                    <NavbarElement
                        title={'Заказы'}
                        changed={props.changed == 1}
                        changePageHandler={() => props.setPageForCabinet(<OrdersAdmin/>, 1)}
                    />
                    <NavbarElement
                        title={'Взаимодейтсвие с товарами'}
                        changed={props.changed == 2}
                        changePageHandler={() => props.setPageForCabinet(<NewGoodsAdmin/>, 2)}
                    />
                    <NavbarElement
                        title={'Взаимодейтсвие с аттрибутами'}
                        changed={props.changed == 3}
                        changePageHandler={() => props.setPageForCabinet(<AttributesAdmin/>, 3)}
                    />
                    <div onClick={() => props.logout(history)}>Выход</div>
                </ul>
            </div>
        );
    }else if(role == roles.USER){
        return(
            <div className={style.mainContainer}>
                <ul>
                    <NavbarElement
                        title={'Контактная информация'}
                        changed={props.changed == 1}
                        changePageHandler={() => props.setPageForCabinet(<ContactInfoUser/>, 1)}
                    />
                    <NavbarElement
                        title={'Список желаний'}
                        changed={props.changed == 2}
                        changePageHandler={() => props.setPageForCabinet(<FavouritePageUser/>, 2)}
                    />
                    <NavbarElement
                        title={'История заказов'}
                        changed={props.changed == 3}
                        changePageHandler={() => props.setPageForCabinet(<OrdersHistoryUser/>, 3)}
                    />
                    <div onClick={() => props.logout(history)}>Выход</div>
                </ul>
            </div>
        );
    }else {
        return <div />
    }

};

const mapStateToProps = state => {
    const {role} = state.signUpReducers;
    const changed = state.pageForCabinetReducers.changed;
    return {
        changed,
        role
    }
};

const mapDispatchToProps = dispatch => ({
   setPageForCabinet: (page, changed) => dispatch(setPageForCabinet(page, changed)),
    logout: (history) => dispatch(logout(history))
});


export default withRouter(connect(mapStateToProps, mapDispatchToProps)(CabinetNavbar));