import React, { Fragment } from 'react';
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'
import SwipeableDrawer from '@material-ui/core/SwipeableDrawer'
import CssBaseline from '@material-ui/core/CssBaseline'
import NoSsr from '@material-ui/core/NoSsr'
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import ListItemIcon from '@material-ui/core/ListItemIcon'
import ListItemText from '@material-ui/core/ListItemText'
import ExpandLess from '@material-ui/icons/ExpandLess'
import ExpandMore from '@material-ui/icons/ExpandMore'
import Collapse from '@material-ui/core/Collapse'
import { Route, NavLink, withRouter } from 'react-router-dom'
import ContentLoader from 'react-content-loader'
import { connect } from 'react-redux'
import SvgIcon from '@material-ui/core/SvgIcon'
import CategoryList from '../CategoryList'
import ProductList from '../ProductList'
import SubProductList from '../SubProductList'
import ProductDetails from '../ProductDetails'
import Home from '../../pages/Home'
import Footer from './Footer'
import Orders from '../../pages/Orders'
import Success from '../../pages/Success'
import Cashback from '../CashbackProduct'



const SidebarLoader = () => (
  <ContentLoader
    height={
      document.documentElement.clientHeight
      - document.documentElement.clientHeight / 3
    }
    width={200}
    speed={0.5}
    primaryColor="#f3f3f3"
    secondaryColor="#ecebeb"
  >
    <rect x="57" y="25" rx="5" ry="5" width="134" height="12" />
    <rect x="13" y="17" rx="0" ry="0" width="27" height="27" />
    <rect x="57" y="65" rx="5" ry="5" width="134" height="12" />
    <rect x="13" y="57" rx="0" ry="0" width="27" height="27" />
    <rect x="57" y="105" rx="5" ry="5" width="134" height="12" />
    <rect x="13" y="97" rx="0" ry="0" width="27" height="27" />
    <rect x="57" y="145" rx="5" ry="5" width="134" height="12" />
    <rect x="13" y="137" rx="0" ry="0" width="27" height="27" />
    <rect x="57" y="185" rx="5" ry="5" width="134" height="12" />
    <rect x="13" y="177" rx="0" ry="0" width="27" height="27" />
    <rect x="57" y="225" rx="5" ry="5" width="134" height="12" />
    <rect x="13" y="217" rx="0" ry="0" width="27" height="27" />
    <rect x="57" y="265" rx="5" ry="5" width="134" height="12" />
    <rect x="13" y="257" rx="0" ry="0" width="27" height="27" />
    <rect x="57" y="305" rx="5" ry="5" width="134" height="12" />
    <rect x="13" y="297" rx="0" ry="0" width="27" height="27" />
    <rect x="57" y="345" rx="5" ry="5" width="134" height="12" />
    <rect x="13" y="337" rx="0" ry="0" width="27" height="27" />
    <rect x="57" y="385" rx="5" ry="5" width="134" height="12" />
    <rect x="13" y="377" rx="0" ry="0" width="27" height="27" />
    <rect x="57" y="425" rx="5" ry="5" width="134" height="12" />
    <rect x="13" y="417" rx="0" ry="0" width="27" height="27" />
  </ContentLoader>
)

const drawerWidth = 220

const styles = theme => ({
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
    zIndex: 0,
    transition: theme.transitions.create('width'),
  },
  drawerPaper: {
    width: drawerWidth,
    paddingRight: 5,
  },
  sideBarBorder: {
    borderRadius: '0 20px 20px 0',
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
  },
  toolbar: theme.mixins.toolbar,
  subList: {
    paddingLeft: 30,
    backgroundColor: '#fafafa',
    borderRadius: '0 20px 20px 0',
  },
  mainDiv: {
    marginTop: 60,
    marginLeft: 0,
    [theme.breakpoints.up('md')]: {
      marginLeft: 220,
    },
    [theme.breakpoints.up('sm')]: {
      marginTop: 65,
    },
    [theme.breakpoints.down('sm')]: {
      marginLeft: 0,
    },
  },
  activeLink: {
    backgroundColor: theme.palette.primary.main,
    borderRadius: '0 20px 20px 0 !important',
    color: 'black',
    '& > div': {
      color: 'black',
    },
    '& > div > span': {
      color: 'black',
      fontWeight: 'bold',
    },
  },
  listItemText: {
    paddingLeft: 0,
    paddingRight: 5,
  },
})
const NavLinkRef = React.forwardRef((props, ref) => <NavLink innerRef={ref} {...props} />)

const SubMenu = property => property.child.map(item => (
  <Collapse
    className=""
    key={item.id}
    in={property.drpDown[0] === property.id && property.drpDown[1] === true}
    timeout="auto"
    unmountOnExit
  >
    <List component="div" disablePadding>
      <ListItem
        dense
        button
        component={NavLinkRef}
        to={`/${item.url}`}
        className={window.location.pathname === `/${item.url}` ? property.cls.activeLink : `${property.cls.subList}`}
      >
        <ListItemIcon>
          <SvgIcon>
            <path d={property.catIcon} />
          </SvgIcon>
        </ListItemIcon>

        <ListItemText inset primary={item.sub_cat_name} className={property.cls.listItemText} />
      </ListItem>
    </List>
  </Collapse>
))

const ChildRoute = prop => prop.childs.map(childItem => (
  <Route
    exact
    key={`c${childItem.id}`}
    path={`/${childItem.url}`}
    render={() => (
      <SubProductList
        cat_url={childItem.url}
        cat_id={childItem.id}
        cat_name={childItem.sub_cat_name}
      />
    )}
  />
))


function Navbar(props) {
  const { classes } = props
  const drawerVarient = window.innerWidth > 1024 ? 'persistent' : 'temporary'
  return (
    <div>
      <NoSsr>
        <div className={classes.root}>
          <CssBaseline />

          <SwipeableDrawer
            position="fixed"
            className={classes.drawer}
            variant={drawerVarient}
            open={props.openDrawer}
            onClose={() => props.togleDwr()}
            onOpen={() => props.togleDwr()}
            classes={{ paper: classes.drawerPaper }}
          >
            <div
              aria-label="Close Drawer"
              tabIndex={0}
              role="button"
              onClick={() => props.togleDwr()}
              onKeyDown={() => props.togleDwr()}
            />

            <div className={classes.toolbar} />

            <List>
              {props.menuItems == null && <SidebarLoader />}
              {props.menuItems != null
                && props.menuItems.map(item => {
                  if (Object.prototype.hasOwnProperty.call(item, 'children')) {
                    return (
                      <Fragment key={item.id}>
                        <ListItem
                          dense
                          className={window.location.pathname === `/${item.url}` ? classes.activeLink : `${classes.sideBarBorder}`}
                          button
                          component={NavLinkRef}
                          to={`/${item.url}`}
                          onClick={() => props.handleDrpDwn(item.id)}
                        >
                          <ListItemIcon>
                            <SvgIcon>
                              <path d={item.icon} />
                            </SvgIcon>
                          </ListItemIcon>
                          <ListItemText primary={item.category_name} className={classes.listItemText} />
                          {props.drpDown[0] === item.id && props.drpDown[1] === true ? (
                            <ExpandLess />) : (<ExpandMore />)}
                        </ListItem>

                        <SubMenu
                          activeClasses={classes.activeLink}
                          catIcon={item.icon}
                          child={item.children}
                          drpDown={props.drpDown}
                          id={item.id}
                          cls={classes}
                        />
                      </Fragment>
                    )
                  }
                  return (
                    <ListItem
                      dense
                      aria-current="page"
                      className={window.location.pathname === `/${item.url}` ? classes.activeLink : `${classes.sideBarBorder}`}
                      button
                      key={item.id}
                      component={NavLinkRef}
                      to={`/${item.url}`}
                    >
                      <ListItemIcon>
                        <SvgIcon>
                          <path d={item.icon} />
                        </SvgIcon>
                      </ListItemIcon>

                      <ListItemText primary={item.category_name} className={classes.listItemText} />
                    </ListItem>
                  )
                })}

            </List>
			
			 <List>
              <ListItem
                dense
                aria-current="page"
                className={window.location.pathname === '/cashback' ? classes.activeLink : `${classes.sideBarBorder}`}
                button
                component={NavLinkRef}
                to="/cashback"
              >
                <ListItemIcon>
                  <SvgIcon>
                    <path d="M5.229,6.531H4.362c-0.239,0-0.434,0.193-0.434,0.434c0,0.239,0.194,0.434,0.434,0.434h0.868c0.24,0,0.434-0.194,0.434-0.434C5.663,6.724,5.469,6.531,5.229,6.531 M10,6.531c-1.916,0-3.47,1.554-3.47,3.47c0,1.916,1.554,3.47,3.47,3.47c1.916,0,3.47-1.555,3.47-3.47C13.47,8.084,11.916,6.531,10,6.531 M11.4,11.447c-0.071,0.164-0.169,0.299-0.294,0.406c-0.124,0.109-0.27,0.191-0.437,0.248c-0.167,0.057-0.298,0.09-0.492,0.098v0.402h-0.35v-0.402c-0.21-0.004-0.352-0.039-0.527-0.1c-0.175-0.064-0.324-0.154-0.449-0.27c-0.124-0.115-0.221-0.258-0.288-0.428c-0.068-0.17-0.1-0.363-0.096-0.583h0.664c-0.004,0.259,0.052,0.464,0.169,0.613c0.116,0.15,0.259,0.229,0.527,0.236v-1.427c-0.159-0.043-0.268-0.095-0.425-0.156c-0.157-0.061-0.299-0.139-0.425-0.235C8.852,9.752,8.75,9.631,8.672,9.486C8.594,9.34,8.556,9.16,8.556,8.944c0-0.189,0.036-0.355,0.108-0.498c0.072-0.144,0.169-0.264,0.292-0.36c0.122-0.097,0.263-0.17,0.422-0.221c0.159-0.052,0.277-0.077,0.451-0.077V7.401h0.35v0.387c0.174,0,0.29,0.023,0.445,0.071c0.155,0.047,0.29,0.118,0.404,0.212c0.115,0.095,0.206,0.215,0.274,0.359c0.067,0.146,0.103,0.315,0.103,0.508H10.74c-0.007-0.201-0.06-0.354-0.154-0.46c-0.096-0.106-0.199-0.159-0.408-0.159v1.244c0.174,0.047,0.296,0.102,0.462,0.165c0.167,0.063,0.314,0.144,0.443,0.241c0.128,0.099,0.23,0.221,0.309,0.366c0.077,0.146,0.116,0.324,0.116,0.536C11.509,11.092,11.473,11.283,11.4,11.447 M18.675,4.795H1.326c-0.479,0-0.868,0.389-0.868,0.868v8.674c0,0.479,0.389,0.867,0.868,0.867h17.349c0.479,0,0.867-0.389,0.867-0.867V5.664C19.542,5.184,19.153,4.795,18.675,4.795M1.76,5.664c0.24,0,0.434,0.193,0.434,0.434C2.193,6.336,2,6.531,1.76,6.531S1.326,6.336,1.326,6.097C1.326,5.857,1.52,5.664,1.76,5.664 M1.76,14.338c-0.24,0-0.434-0.195-0.434-0.434c0-0.24,0.194-0.434,0.434-0.434s0.434,0.193,0.434,0.434C2.193,14.143,2,14.338,1.76,14.338 M18.241,14.338c-0.24,0-0.435-0.195-0.435-0.434c0-0.24,0.194-0.434,0.435-0.434c0.239,0,0.434,0.193,0.434,0.434C18.675,14.143,18.48,14.338,18.241,14.338 M18.675,12.682c-0.137-0.049-0.281-0.08-0.434-0.08c-0.719,0-1.302,0.584-1.302,1.303c0,0.152,0.031,0.297,0.08,0.434H2.981c0.048-0.137,0.08-0.281,0.08-0.434c0-0.719-0.583-1.303-1.301-1.303c-0.153,0-0.297,0.031-0.434,0.08V7.318c0.136,0.049,0.28,0.08,0.434,0.08c0.718,0,1.301-0.583,1.301-1.301c0-0.153-0.032-0.298-0.08-0.434H17.02c-0.049,0.136-0.08,0.28-0.08,0.434c0,0.718,0.583,1.301,1.302,1.301c0.152,0,0.297-0.031,0.434-0.08V12.682z M18.241,6.531c-0.24,0-0.435-0.194-0.435-0.434c0-0.24,0.194-0.434,0.435-0.434c0.239,0,0.434,0.193,0.434,0.434C18.675,6.336,18.48,6.531,18.241,6.531 M9.22,8.896c0,0.095,0.019,0.175,0.058,0.242c0.039,0.066,0.088,0.124,0.148,0.171c0.061,0.047,0.13,0.086,0.21,0.115c0.079,0.028,0.11,0.055,0.192,0.073V8.319c-0.21,0-0.322,0.044-0.437,0.132C9.277,8.54,9.22,8.688,9.22,8.896 M15.639,12.602h-0.868c-0.239,0-0.434,0.195-0.434,0.434c0,0.24,0.194,0.436,0.434,0.436h0.868c0.24,0,0.434-0.195,0.434-0.436C16.072,12.797,15.879,12.602,15.639,12.602 M10.621,10.5c-0.068-0.052-0.145-0.093-0.23-0.124c-0.086-0.031-0.123-0.06-0.212-0.082v1.374c0.209-0.016,0.332-0.076,0.465-0.186c0.134-0.107,0.201-0.281,0.201-0.516c0-0.11-0.02-0.202-0.062-0.277C10.743,10.615,10.688,10.551,10.621,10.5" />
                  </SvgIcon>
                </ListItemIcon>

                <ListItemText primary="Cashback Offer" className={classes.listItemText} />
              </ListItem>
            </List>
			
          </SwipeableDrawer>
        </div>

        <div
          style={{
            marginRight: props.mainDivMarginRight,
            marginLeft: props.mainDivMargin,
            backgroundColor: '#fff',
            minHeight: '75vh',
          }}
          className={classes.mainDiv}
        >
          {props.menuItems != null
            && props.menuItems.map(item => {
              if (Object.prototype.hasOwnProperty.call(item, 'children')) {
                return (
                  <Fragment key={item.id}>
                    <Route
                      key={`ct${item.id}${100}`}
                      exact
                      path={`/${item.url}`}
                      render={() => (
                        <CategoryList
                          catIcon={item.icon}
                          cat_id={item.id}
                          cat_url={item.url}
                          cat_name={item.category_name}
                          child={item.children}
                        />
                      )}
                    />
                    <ChildRoute
                      key={`child${item.id}${200}`}
                      childs={item.children}
                    />
                  </Fragment>
                )
              }
              return (
                <Route
                  exact
                  key={`pt${item.id}${300}`}
                  path={`/${item.url}`}
                  render={() => (
                    <ProductList
                      cat_id={item.id}
                      cat_url={item.url}
                      cat_name={item.category_name}
                    />
                  )}
                />
              )
            })}

          <Route exact path="/" render={() => <Home cats={props} />} />
          <Route exact path="/referer/:referer_id" render={() => <Home cats={props} />} />
          <Route path="/:cats/product/:id/:referer?" render={() => <ProductDetails />} />
		  <Route exact path="/cashback" render={() => <Cashback />} />
          <Route exact path="/order" render={() => <Orders history={props.history} />} />
		  <Route exact path="/success" render={() => <Success styles={props.classes} />} />
          <Footer />
        </div>
      </NoSsr>
    </div>
  )
}

Navbar.propTypes = {
  classes: PropTypes.object.isRequired,
}

Navbar.contextTypes = {
  router: PropTypes.object,
}

function mapStateToProps(state) {
  return {
    openDrawer: state.openDrawer,
    mainDivMargin: state.mainDivMargin,
    mainDivMarginRight: state.mainDivMarginRight,
  }
}

function mapDispatchToProps(dispatch) {
  return {
    togleDwr: () => {
      dispatch({ type: 'toggleDrawer' })
    },
  }
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(Navbar)))
