import React, { useState, useEffect } from 'react';

// Redux part
import { useSelector, useDispatch } from 'react-redux';
import { StoreState } from 'store/rootReducer';
import { NavLink, withRouter } from 'react-router-dom';
// Import actions here

import classNames from 'classnames/bind';
import TextItem from 'components/items/TextItem';
import auth from 'store/auth';
import { pushRoute } from 'store/utils/routes';
import { GrCart } from 'react-icons/gr';
import styleIdentifiers from './menu.scss';

// assets
import icon1 from './assets/reservation-icon.svg';
import icon2 from './assets/space-fav-icon.svg';
import icon3 from './assets/notice-icon.svg';
import icon4 from './assets/space-icon.svg';
import icon5 from './assets/calendar-icon.svg';
import icon6 from './assets/eval-icon.svg';
import icon7 from './assets/account-icon.svg';
import icon8 from './assets/logout-icon.svg';

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {}

export interface DispatchProps {}

export interface OwnProps {}

export type MenuProps = StateProps & DispatchProps & OwnProps;

const Menu = (props: MenuProps) => {
  const { history } = props;
  // mapStateToProps
  const lg = useSelector((state: StoreState) => state.content.lg);
  const currentOrder = useSelector((state: StoreState) => state.order.current?.data);
  // Allow to dispatch actions
  const dispatch = useDispatch();

  const logout = data => dispatch(auth.actions.logout.request.action(data));

  const handleLogout = () => {
    console.log('logout');
    if (logout)
      logout({
        callback: () => {
          history.push(pushRoute('login', lg));
        },
      });
  };

  const hasOrder = currentOrder?.getBookingInput?.ressourceId && currentOrder?.lines?.length > 0;

  return (
    <div className={styles('menu')}>
      <NavLink
        exact
        to={pushRoute('myBookings', lg)}
        activeClassName={styles('active')}
        className={styles('menu-item')}
      >
        <div className={styles('img-wrapper')}>
          <img src={icon1} alt="icon-menu" />
        </div>

        <TextItem path="general.menu.myOrders" />
      </NavLink>
      <NavLink exact to={pushRoute('myFavorites', lg)} className={styles('menu-item')}>
        <div className={styles('img-wrapper')}>
          <img src={icon2} alt="icon-menu" />
        </div>
        <TextItem path="general.menu.bookmarked" />
      </NavLink>
      {/* <div className={styles('menu-item')}>
          <div className={styles('img-wrapper')}>
            <img src={icon3} alt="icon-menu" />
          </div>
          <NavLink exact to="/">
            <TextItem path="general.menu.myRating" />
          </NavLink>
        </div> */}
      <hr />
      <NavLink
        to={pushRoute('mySpaces', lg)}
        activeClassName={styles('active')}
        className={styles('menu-item')}
      >
        <div className={styles('img-wrapper')}>
          <img src={icon4} alt="icon-menu" />
        </div>

        <TextItem path="general.menu.myWorkspaces" />
      </NavLink>
      {/* <NavLink to="/" className={styles('menu-item')}>
          <div className={styles('img-wrapper')}>
            <img src={icon5} alt="icon-menu" />
          </div>

          <TextItem path="general.menu.myCalendar" />
        </NavLink> */}
      {/* <div className={styles('menu-item')}>
          <div className={styles('img-wrapper')}>
            <img src={icon6} alt="icon-menu" />
          </div>
          <NavLink exact to="/">
            <TextItem path="general.menu.myReceivedRatings" />
          </NavLink>
        </div> */}
      <hr />
      {hasOrder && (
        <NavLink
          to={pushRoute('checkout.id.step2', lg, {
            id: currentOrder?.getBookingInput?.ressourceId,
          })}
          activeClassName={styles('active')}
          className={styles('menu-item')}
        >
          <div className={styles('img-wrapper')}>
            <GrCart />
          </div>

          <TextItem path="general.menu.finishOrder" />
          <span className={styles('indic')} />
        </NavLink>
      )}
      <NavLink
        to={pushRoute('account', lg)}
        activeClassName={styles('active')}
        className={styles('menu-item')}
      >
        <div className={styles('img-wrapper')}>
          <img src={icon7} alt="icon-menu" />
        </div>

        <TextItem path="general.menu.account" />
      </NavLink>
      <div className={styles('menu-item')} onClick={handleLogout}>
        <div className={styles('img-wrapper')}>
          <img src={icon8} alt="icon-menu" />
        </div>
        <TextItem path="general.menu.logout" />
      </div>
    </div>
  );
};

export default withRouter(Menu);
