import React from "react";
import { inject, observer } from "mobx-react";
import { Link } from "react-router-dom";
import { Helmet } from "react-helmet";
import "../../styles/constants.scss";
import "../../styles/style.scss";
import "./style.scss";
import { LINKS } from "../../routes";
import startcase from "lodash.startcase";
import Route from "./routes";
import moment from 'moment';
import {
  Icon,
  Button,
  Modal,
  notification
} from 'antd';
import {
  // Divider,
  // Drawer,
  // List,
  // ListItem,
  IconMenu,
  // IconButton,
  // MenuItem,
  DropDownMenu,
  RaisedButton,
  Paper,
  Dialog,
  Snackbar,
  // Toolbar,
  ToolbarGroup,
  ToolbarSeparator,
  // ToolbarTitle,
  // Badge
} from 'material-ui';
import IconUserCircle from 'material-ui/svg-icons/action/account-circle';
import ShoppingCart from 'material-ui/svg-icons/action/shopping-cart';
import DepositDialog from './../DepositDialog';
import WithdrawDialog from './../WithdrawDialog';
import IconMenus from 'material-ui/svg-icons/navigation/menu';
import LoadingDialog from '../LoadingDialog/index';
import * as _ from 'lodash'; // TODO: remove this, import only needed module from lodash
import { black } from "material-ui/styles/colors";
import cinnamonSugar from 'cinnamon-sugar';
import ButterToast from 'butter-toast';
import 'material-design-icons/iconfont/material-icons.css';
import { grey400, darkBlack, lightBlack } from 'material-ui/styles/colors';
// import { getMobileOperatingSystem } from '../../stores/firebase';
import Alert from "../../components/Alert";
import EmptyComponent from '../EmptyComponent';
import NumberFormat from 'react-number-format';
import faker from 'faker';
import { Route as RouteDOM } from 'react-router-dom'
import WalletComponent from "./WalletComponent";
import { APP_TYPE } from "../../config/app";


//new material ui
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import InputBase from '@material-ui/core/InputBase';
import Badge from '@material-ui/core/Badge';
import MenuItem from '@material-ui/core/MenuItem';
import Menu from '@material-ui/core/Menu';
import { withStyles } from '@material-ui/core/styles';
import MenuIcon from '@material-ui/icons/Menu';
import SearchIcon from '@material-ui/icons/Search';
import AccountCircle from '@material-ui/icons/AccountCircle';
import CartIcon from '@material-ui/icons/ShoppingCart';
import NotificationsIcon from '@material-ui/icons/Notifications';
import MoreIcon from '@material-ui/icons/MoreVert';
import CancelIcon from '@material-ui/icons/Cancel';
import ListIcon from '@material-ui/icons/FormatListBulleted';
import { styles } from './styles';

import Drawer from '@material-ui/core/Drawer';
// import Button from '@material-ui/core/Button';
import List from '@material-ui/core/List';
import Divider from '@material-ui/core/Divider';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';

faker.locale = 'id_ID';
@inject("appstate")
@observer
class App extends React.Component {
  constructor(props) {
    super(props);
    this.props = props;
    this.state = {
      scriptTawkto: false,
      redirect: false,
      open: (window.innerWidth < 600) ? false : true,
      openSecondary: false,
      value: '',
      additionalData: {},
      valueMultiple: [''],
      valueSingle: '',
      visible: false,
      selectedMenu: this.props.location.pathname,
      projectId: 'project-id',
      breadcrumbs: this
        .props
        .location
        .pathname
        .split('/')
        .map(path => startcase(path)),

      anchorEl: null,
      mobileMoreAnchorEl: null,
      left: false,
    };
    this.defaultState = Object.assign({}, this.state);
    this.user = props.appstate.user;
    this.authStore = props.appstate.auth;
    this.globalUI = props.appstate.globalUI;
    this.http = props.appstate.http;
    this.appstate = props.appstate;
    this.settingStore = props.appstate.setting;
    this.transactionStore = props.appstate.transaction;
    this.dashboardStore = props.appstate.dashboard;
    this.taskStore = props.appstate.task;
    this.appStore = props.appstate.app;
    this.profileStore = props.appstate.profile;
    this.notificationStore = props.appstate.notification;
    //
    // if (getMobileOperatingSystem() !== 'iOS') {
    //   this.messaging = firebase.messaging();
    //   this.notification();
    // }
  }

  openNotification(type, title, content, icon) {
    if (type) {
      notification[type]({
        message: (title) ? title : 'Title',
        description: (content) ? content :
          <p style={{ color: "black" }}>This is the content of the notification. This is the content of the notification.
            This is the content of the notification.</p>,
        icon: <Icon type={(icon) ? icon : "smile-circle"} style={{ color: 'black' }} />
      });
      notification.open();

    } else {
      notification.open({
        message: (title) ? title : 'Title',
        description: (content) ? <p style={{ color: "black" }}>{content}</p> :
          <p style={{ color: "black" }}>This is the content of the notification. This is the content of the notification.
            This is the content of the notification.</p>,
        icon: <Icon type={(icon) ? icon : "smile-circle"} style={{ color: '#108ee9' }} />
      });
    }
  };

  notification = () => {
    console.log('called again?');
    this.messaging.onMessage((payload) => {
      console.log("Message received cok.", payload);
      // alert(payload.notification.body);
      const toast = cinnamonSugar({
        kind: 'crisp',
        theme: 'info',
        // picture: 'http://lorempixel.com/150/150/people',
        title: <a href={payload.notification.click_action}>{payload.notification.title}</a>, // you can also add jsx code here!
        // message: JSON.stringify(payload), // you can also add jsx code here!
        message: payload.notification.body, // you can also add jsx code here!
        toastTimeout: 4000,
        icon: 'bell' // literally any font awesome 4.7 icon
        // you may also add here regular butter-toast options, such as toastTimeout,
        // name, sticky, etc..
      });
      ButterToast.raise(toast)
    });
  };

  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };

  componentDidMount() {
    // this.checkIsLogin();
    // this.settingStore.getAll();
    this.authStore.getProfile();

    setTimeout(() => {
      console.log(this.authStore.userProfile, 'this.authStore.userProfile this.authStore.userProfile');
    }, 2500)
    // this.user.getUserGeolocation();
    // this.appStore.getAppType();
    // this.profileStore.getProfile();
    // this.notificationStore.getList()

    notification.config({
      placement: 'bottomRight',
      duration: 10,
      style: {
        width: 350,
        color: "black"
      },
    });
  }

  componentWillMount() {
  }

  componentWillReceiveProps(nextProps) {
    // will be true
    // const locationChanged = nextProps.location !== this.props.location;
    //
    // this.checkIsLogin();
  }

  checkIsLogin() {
    // if (!this.authStore.isLoggedIn  ) {   console.log(this.props.history);
    // this.props.history.replace(LINKS.LOGIN); }
  }

  willLogout() {
    Modal.confirm({
      title: 'Log out the system?',
      content: 'Are sure sure you want to log out the system?',
      okText: 'Confirm',
      cancelText: 'Cancel',
      visible: this.state.visible,
      zIndex: 3000,
      onOk: () => {
        this.authStore.logout();
        this.setState({
          visible: false,
          redirect: true
        });
      },
      onCancel: () => {
        this.setState({
          visible: false,
        });
      }
    });
  }

  handleToggleIcon = () => this.setState({ open: !this.state.open });
  handleToggleIconSecondary = () => this.setState({ openSecondary: !this.state.openSecondary });
  handleClose = () => this.setState({ open: false });


  handleChangeSingle = (event, value) => {
    this.setState({
      valueSingle: value,
    });
  };

  handleChangeMultiple = (event, value) => {
    this.setState({
      valueMultiple: value,
    });
  };

  handleOpenMenu = () => {
    this.setState({
      openMenu: true,
    });
  }

  handleOnRequestChange = (value) => {
    this.setState({
      openMenu: value,
    });
  }

  handleChange = (event, index, value) => this.setState({ value });

  changeRoute = (path) => {
    this.setState({ selectedMenu: path });
    if (window.innerWidth < 600) {
      this.handleClose()
    }
  }

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed
    });
  };

  toggleDrawer = () => {
    this.setState({
      open: !this.state.open
    });
  };


  //new
  handleProfileMenuOpen = event => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleMenuClose = () => {
    this.setState({ anchorEl: null });
    this.handleMobileMenuClose();
  };

  handleMobileMenuOpen = event => {
    this.setState({ mobileMoreAnchorEl: event.currentTarget });
  };

  handleMobileMenuClose = () => {
    this.setState({ mobileMoreAnchorEl: null });
  };

  toggleDrawerNew = (open) => () => {
    this.setState({
      left: open,
    });
  };

  render() {
    const { anchorEl, mobileMoreAnchorEl } = this.state;
    const { classes } = this.props;

    const { redirect } = this.state;
    if (redirect) {
      this.props.history.replace(LINKS.LOGIN);
      // return <Redirect to={{
      //   pathname: '/login',
      //   state: {from: this.props.location}
      // }}/>
    }
    const styles = {
      Paper: {
        height: 38,
        width: 38,
        background: '#fff',
        marginRight: 16,
        padding: 4
      },
      ImageRounded: {
        display: 'block',
        borderRadius: '50%',
        maxWidth: '100%',
        marginTop: '0px'
      }
    };

    const { userData } = this.appstate;
    // const applicationIcon = (this.settingStore.isIconEmpty) ? "/assets/images/bankbtn.png" : this.http.appendImagePath(this.settingStore.setting.icon);
    // let applicationIcon =  "http://giift.asacreative.com/giift_logo_wide.4d15de72.png";
    let applicationIcon = require('../../../../assets/images/logo_new.png');
    let applicationName = 'Giift';
    if (APP_TYPE === 'btn') {
      applicationIcon = "https://www.niaga.asia/wp-content/uploads/2021/02/IMG-20210223-WA0025.jpg";
      applicationName = "KB Bukopin";
    }

    let onNotifRowClick = (record) => {
      // if(record.notification.type == 'order_seller' && _.get(record,'notification.additional_data.user_order_store_id',false) != false){
      //   return `${LINKS.ORDER}/${record.notification.additional_data.user_order_store_id}`;
      // }
      // else if(record.notification.type == 'order_seller' && _.get(record,'notification.additional_data.user_order_store_id',false) == false){
      //   return `${LINKS.ORDER}`;
      // }
      return `${LINKS.ORDER}`;
    }

    const isMenuOpen = Boolean(anchorEl);
    const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);

    const renderMenu = (
      <Menu
        anchorEl={anchorEl}
        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
        open={isMenuOpen}
        onClose={this.handleMenuClose}
      >
        <Link onClick={this
          .changeRoute
          .bind(this, '/app/profile')} to={LINKS.PROFILE}>
          <MenuItem>Profile</MenuItem>
        </Link>
        <Link onClick={this
          .changeRoute
          .bind(this, '/app/transaction')} to={LINKS.TRANSACTION}>
          <MenuItem>Transaction</MenuItem>
        </Link>
        {/* <Link onClick={this.willLogout.bind(this)}> */}
          <MenuItem onClick={this.willLogout.bind(this)}>Sign Out</MenuItem>
        {/* </Link> */}
      </Menu>
    );

    const renderMobileMenu = (
      <Menu
        anchorEl={mobileMoreAnchorEl}
        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
        open={isMobileMenuOpen}
        onClose={this.handleMobileMenuClose}
      >
        {window.location.pathname.split("/")[2] == "shop" ? (
          <MenuItem>
            <IconButton color="inherit">
              <Badge badgeContent={4} color="secondary">
                <CartIcon />
              </Badge>
            </IconButton>
            <p>Cart</p>
          </MenuItem>
        ) : ""}
        <MenuItem>
          <IconButton color="inherit">
            <Badge badgeContent={11} color="secondary">
              <NotificationsIcon />
            </Badge>
          </IconButton>
          <p>Notifications</p>
        </MenuItem>
        <Link onClick={this
          .changeRoute
          .bind(this, '/app/profile')} to={LINKS.PROFILE}>
          <MenuItem>
            <IconButton color="inherit">
              <AccountCircle />
            </IconButton>
            <p>Profile</p>
          </MenuItem>
        </Link>
        <Link onClick={this
          .changeRoute
          .bind(this, '/transaction')} to={LINKS.TRANSACTION}>
          <MenuItem>
            <IconButton color="inherit">
              <ListIcon />
            </IconButton>
            <p>Transaction</p>
          </MenuItem>
        </Link>
        {/* <Link onClick={this
          .changeRoute
          .bind(this, '/login')} to={LINKS.LOGIN}> */}
          <MenuItem onClick={this.willLogout.bind(this)}>
            <IconButton color="inherit">
              <CancelIcon />
            </IconButton>
            <p>Sign Out</p>
          </MenuItem>
        {/* </Link> */}
      </Menu>
    );

    const sideList = (
      <div className={classes.list}>
        <div className={classes.backgroundLogo}>
          <Link onClick={this
            .changeRoute
            .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}>
            <img
              style={{
                width: "100%",
                height: "100%"
              }}
              src={applicationIcon} />
          </Link>
        </div>
        <Divider />
        <List>
          <Link onClick={this
            .changeRoute
            .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
              className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span
                className="menuAkun">Home</span></MenuItem></Link>
          {/* <Link onClick={this
            .changeRoute
            .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
              className={(this.state.selectedMenu === '/app/flight') ? "menuAkunItem active" : 'menuAkunItem'}><span
                className="menuAkun">Flight</span></MenuItem></Link>

          <Link onClick={this
            .changeRoute
            .bind(this, '/app/hotel')} to={LINKS.HOTEL}><MenuItem
              className={(this.state.selectedMenu === '/app/hotel') ? "menuAkunItem active" : 'menuAkunItem'}><span
                className="menuAkun">Hotel</span></MenuItem></Link>

          <Link onClick={this
            .changeRoute
            .bind(this, '/app/car')} to={LINKS.CAR}><MenuItem
              className={(this.state.selectedMenu === '/app/car') ? "menuAkunItem active" : 'menuAkunItem'}><span
                className="menuAkun">Car</span></MenuItem></Link>

          <Link onClick={this
            .changeRoute
            .bind(this, '/app/shop')} to={LINKS.ITEMS}><MenuItem
              className={(this.state.selectedMenu === '/app/shop') ? "menuAkunItem active" : 'menuAkunItem'}><span
                className="menuAkun">Shop</span></MenuItem></Link>

          <Link onClick={this
            .changeRoute
            .bind(this, '/app/vouchers')}
            to={LINKS.VOUCHERS}
          ><MenuItem
            className={(this.state.selectedMenu === '/app/vouchers') ? "menuAkunItem active" : 'menuAkunItem'}><span
              className="menuAkun">Vouchers</span></MenuItem></Link> */}

        </List>
        <Divider />
        <List>
          <div style={{ padding: 15 }}>
            <a>
              <WalletComponent />
            </a>
          </div>
        </List>
      </div>
    );

    return (
      <div className="app-container">
        <Helmet>
          <meta charSet="utf-8" />
          <title>{applicationName}</title>
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <link rel="icon" type="image/png" href={applicationIcon} sizes="96x96" />
        </Helmet>

        <ButterToast trayPosition="bottom-right" />
        <Snackbar
          open={this.globalUI.snackbarVisibility}
          message={this.globalUI.snackbarMessage}
          autoHideDuration={3000} />

        <Dialog
          style={{ margin: 'auto' }}
          open={this.globalUI.loadingVisibility}>
          <div style={{ textAlign: 'center' }}>
            <LoadingDialog />
          </div>
        </Dialog>
        <DepositDialog />
        <WithdrawDialog />

        <div className={classes.root}>
          <AppBar style={{ zIndex: 1 }} position="fixed">
            <Toolbar className={classes.toolbar}>
              <div className={classes.sectionMobile}>
                <IconButton className={classes.menuButton} color="action" aria-label="Open drawer" onClick={this.toggleDrawerNew(true)}>
                  <MenuIcon />
                </IconButton>
              </div>
              <Link onClick={this
                .changeRoute
                .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}>
                <img
                  className={classes.title}
                  style={{
                    width: 70,
                    height: 40
                  }}
                  src={applicationIcon} />
              </Link>
              <div className={classes.search}>
                <div className={classes.searchIcon}>
                  <SearchIcon />
                </div>
                <InputBase
                  placeholder="Search…"
                  classes={{
                    root: classes.inputRoot,
                    input: classes.inputInput,
                  }}
                />
              </div>
              <div className={classes.grow} />
              <div className={classes.sectionDesktop}>
                <WalletComponent />
                {window.location.pathname.split("/")[2] == "shop" ? (<IconButton color="action" >
                  <Badge badgeContent={4} color="secondary">
                    <CartIcon />
                  </Badge>
                </IconButton>) : ""}

                <IconButton color="action">
                  <Badge badgeContent={17} color="secondary">
                    <NotificationsIcon />
                  </Badge>
                </IconButton>
                <IconButton
                  aria-owns={isMenuOpen ? 'material-appbar' : undefined}
                  aria-haspopup="true"
                  onClick={this.handleProfileMenuOpen}
                  color="action"
                >
                  <AccountCircle />
                </IconButton>
              </div>
              <div className={classes.sectionMobile}>
                <IconButton aria-haspopup="true" onClick={this.handleMobileMenuOpen} color="action">
                  <MoreIcon />
                </IconButton>
              </div>
            </Toolbar>
          </AppBar>
          {renderMenu}
          {renderMobileMenu}
        </div>
        <Drawer open={this.state.left} onClose={this.toggleDrawerNew(false)}>
          <div
            tabIndex={0}
            role="button"
            onClick={this.toggleDrawerNew(false)}
            onKeyDown={this.toggleDrawerNew(false)}
          >
            {sideList}
          </div>
        </Drawer>
        {/* <Toolbar className="toolbarAkunTiket">
          <ToolbarGroup>
            <IconButton className="hide-on-med-and-up" onClick={() => this.toggleDrawer()}><IconMenus /></IconButton>

            <Link onClick={this
              .changeRoute
              .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}>
              <img
                style={{
                  width: 100,
                  height: 30
                }}
                src={applicationIcon} />
            </Link>

            <ToolbarSeparator className="hide-on-small-only" style={{marginLeft: 30, marginRight: 30}}/>
            <IconButton className="hide-on-small-only" style={{marginRight: 10}}
            onClick={() => this.toggleDrawer()}>
            <IconMenus/>
            </IconButton>
             <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
                    style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
                    onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "clock-circle")}>
              <Icon type="clock-circle"/> <span className="hide-on-small-only">{moment().format('h:mm:ss A')}</span>
            </Button>

            <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
                    style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
                    onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "environment")}>
              <Icon type="environment"/><span className="hide-on-small-only">{this.user.userGeolocation.ip}</span>
            </Button>

            <Link onClick={this
            .changeRoute
            .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
            className={(this.state.selectedMenu === '/app/dashboard') ? "menuAkunItem active" : 'menuAkunItem'}><span
            className="menuAkun">Home</span></MenuItem></Link>

             <Link onClick={this
                  .changeRoute
                  .bind(this, '/app/dashboard')} to={LINKS.DASHBOARD}><MenuItem
                  className={(this.state.selectedMenu === '/app/flight') ? "menuAkunItem active" : 'menuAkunItem'}><span
                  className="menuAkun">Flight</span></MenuItem></Link>

                <Link onClick={this
                  .changeRoute
                  .bind(this, '/app/hotel')} to={LINKS.HOTEL}><MenuItem
                  className={(this.state.selectedMenu === '/app/hotel') ? "menuAkunItem active" : 'menuAkunItem'}><span
                  className="menuAkun">Hotel</span></MenuItem></Link>

                <Link onClick={this
                  .changeRoute
                  .bind(this, '/app/car')} to={LINKS.CAR}><MenuItem
                  className={(this.state.selectedMenu === '/app/car') ? "menuAkunItem active" : 'menuAkunItem'}><span
                  className="menuAkun">Car</span></MenuItem></Link>

                <Link onClick={this
                  .changeRoute
                  .bind(this, '/app/shop')} to={LINKS.ITEMS}><MenuItem
                  className={(this.state.selectedMenu === '/app/shop') ? "menuAkunItem active" : 'menuAkunItem'}><span
                  className="menuAkun">Shop</span></MenuItem></Link>

             <Link onClick={this
                  .changeRoute
                  .bind(this, '/app/vouchers')}
                   to={LINKS.VOUCHERS}
                   ><MenuItem
                  className={(this.state.selectedMenu === '/app/vouchers') ? "menuAkunItem active" : 'menuAkunItem'}><span
                  className="menuAkun">Vouchers</span></MenuItem></Link>

             <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
                    style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
                    onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "calendar")}>
              <Icon type="calendar"/><span className="hide-on-small-only">{this.user.userGeolocation.time_zone}</span>
            </Button>

             <Button className="toolbar-button-sysinfo hide-on-small-only" size="small" type="dashed"
                    style={{marginRight: (window.innerWidth < 600) ? 2 : 10}}
                    onClick={() => this.openNotification(null, "System Information", "This is your computer locale timezone", "home")}>
              <Icon type="home"/> <span
              className="hide-on-small-only">{this.user.userGeolocation.latitude}, {this.user.userGeolocation.longitude}</span>
            </Button>

          </ToolbarGroup>
          <ToolbarGroup>
            <WalletComponent />

            {window.location.pathname.split("/")[2] == "shop" ? (
              <IconMenu
                anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
                targetOrigin={{ vertical: 'top', horizontal: 'right' }}
                onClick={() => this.notificationStore.readAll()}
                iconButtonElement={
                  <div>
                    <IconButton className="menuAkunItem" tooltip="Cart center"
                      tooltipPosition="bottom-center">
                      <ShoppingCart />
                    </IconButton>
                  </div>
                }
              >
                <List>
                  {
                    (this.notificationStore.list.length) ?
                      this.notificationStore.list.slice(0, 5).map((item, index) => {
                        return (
                          <Link to={onNotifRowClick(item)}>
                            <ListItem
                              primaryText={item.notification.title}
                              secondaryText={
                                <div>
                                  <p>
                                    <span
                                      style={{ color: darkBlack }}>{item.notification.description.substr(0, 40)}{(item.notification.description.length > 40) ? '...' : ""}</span>
                                  </p>
                                  <p style={{ fontSize: 10, color: black }}>{moment(item.created_at).fromNow()}</p>
                                </div>
                              }
                              secondaryTextLines={2}
                            />
                          </Link>
                        );
                      }) : <EmptyComponent width="" image="default4" type="empty" header=""
                        content="No notification yet! " />
                  }
                  <Link to={`${LINKS.CART_DETAIL}`}>
                    <ListItem
                      primaryText={
                        <div style={{ textAlign: 'center' }}>
                          <p>View All</p>
                        </div>
                      }
                    />
                  </Link>
                </List>
              </IconMenu>
            ) : (<div />)}


            <IconMenu
              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
              targetOrigin={{ vertical: 'top', horizontal: 'right' }}
              onClick={() => this.notificationStore.readAll()}
              iconButtonElement={
                <div>
                  {userData.role === 'admin' ? (
                    <div>
                      {this.notificationStore.unread_notif === 0 ?
                        <IconButton className="menuAkunItem" tooltip="Notification center"
                          tooltipPosition="bottom-center">
                          <img className="img-responsive" src="/assets/images/icon/toa.png" alt="" />
                        </IconButton> :
                        <Badge
                          badgeContent={this.notificationStore.unread_notif}
                          primary={true}
                          badgeStyle={{ top: 15, right: 12 }}
                        >
                          <IconButton className="menuAkunItem" tooltip="Notification center"
                            tooltipPosition="bottom-center">
                            <img className="img-responsive" src="/assets/images/icon/toa.png" alt="" />
                          </IconButton>
                        </Badge>
                      }
                    </div>
                  ) : (
                      <div>
                        {this.notificationStore.unread_notif === 0 ?
                          <IconButton className="menuAkunItem" tooltip="Notification center"
                            tooltipPosition="bottom-center">
                            <img className="img-responsive" src="/assets/images/icon/toa.png" alt="" />
                          </IconButton> :
                          <Badge
                            badgeContent={this.notificationStore.unread_notif}
                            primary={true}
                            badgeStyle={{ top: 15, right: 12 }}
                          >
                            <IconButton className="menuAkunItem" tooltip="Notification center"
                              tooltipPosition="bottom-center">
                              <img className="img-responsive" src="/assets/images/icon/toa.png" alt="" />
                            </IconButton>
                          </Badge>
                        }
                      </div>
                    )}

                </div>
              }
            >
              <List>
                {
                  (this.notificationStore.list.length) ?
                    this.notificationStore.list.slice(0, 5).map((item, index) => {
                      return (
                        <Link to={onNotifRowClick(item)}>
                          <ListItem
                            // leftAvatar={<Avatar src="images/ok-128.jpg" />}
                            primaryText={item.notification.title}
                            secondaryText={
                              <div>
                                <p>
                                  <span
                                    style={{ color: darkBlack }}>{item.notification.description.substr(0, 40)}{(item.notification.description.length > 40) ? '...' : ""}</span>
                                </p>
                                <p style={{ fontSize: 10, color: black }}>{moment(item.created_at).fromNow()}</p>
                              </div>
                            }
                            secondaryTextLines={2}
                          />
                        </Link>
                      );
                    }) : <EmptyComponent width="" image="default4" type="empty" header=""
                      content="No item yet! " />
                }
                <Link to={`${LINKS.CART_DETAIL}`}>
                  <ListItem
                    primaryText={
                      <div style={{ textAlign: 'center' }}>
                        <p>View All</p>
                      </div>
                    }
                  />
                </Link>
              </List>
            </IconMenu>

            <IconMenu
              anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
              targetOrigin={{ vertical: 'top', horizontal: 'right' }}
              iconButtonElement={
                <IconButton style={{ width: 'auto', height: 'auto' }}
                  iconStyle={{ width: 35, height: 'auto', borderRadius: '45%' }}>
                  {!!this.profileStore.userProfile.photo ?
                    <img src={this.http.appendImagePath(this.profileStore.userProfile.photo)} /> : <IconUserCircle />
                  }

                </IconButton>
              }
            ><List>
                <ListItem
                  style={{ padding: '0px 16px 0px', fontSize: 14 }}
                  disabled={true}
                  primaryText={<span
                    style={{ fontWeight: 500 }}>{this.props.appstate.userData.email|| 'Username'}</span>}
                  secondaryText={<p
                    style={{ fontWeight: 400 }}>{_.capitalize(this.props.appstate.userData.role) || 'role'}</p>}
                />
              </List>
              <Divider />
              <Link onClick={this
                .changeRoute
                .bind(this, '/app/transaction')} to={LINKS.TRANSACTION}> <MenuItem style={{ fontSize: 14 }}
                  primaryText="Transaction" /></Link>
              <Link onClick={this
                .changeRoute
                .bind(this, '/app/profile')} to={LINKS.PROFILE}> <MenuItem style={{ fontSize: 14 }}
                  primaryText="Profile" /></Link>
              <Link onClick={this
                .changeRoute
                .bind(this, '/login')} to={LINKS.LOGIN}>
                <MenuItem onClick={() => { }} style={{ fontSize: 14 }} primaryText="Sign out" />
              </Link>
            </IconMenu>
          </ToolbarGroup>
        </Toolbar> */}

        <div className="mainContent" style={{
          // paddingLeft: (window.innerWidth < 600) ? '0px' : '50px',
          // marginLeft: (window.innerWidth < 600) ? 'auto' : '50px',
          // marginRight: (window.innerWidth < 600) ? '0' : '50px',
        }}>
          <div className="try" />
          <Route />
        </div>

      </div>
    );
  }
}

export default withStyles(styles)(App);