import React, {
  useReducer,
  useMemo,
  useCallback,
  useState,
  useEffect,
} from 'react';
import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace';
import { makeStyles } from '@material-ui/core/styles';
import Drawer from '@material-ui/core/Drawer';
import List from '@material-ui/core/List';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import * as SIDEBAR from './Sidebar.types';
import {
  PRIMARY_COLOR,
  SECONDARY_COLOR,
  TERTIARY_COLOR,
} from '../../../Styles/colors';
import ListSubheader from '@material-ui/core/ListSubheader/ListSubheader';
import { useTranslation } from 'react-i18next';
import ExpandLess from '@material-ui/icons/ExpandLess';
import ExpandMore from '@material-ui/icons/ExpandMore';
import moveit4u_logo from '../../../Images/moveit4u-logo.png';
import { Collapse, ListItemIcon } from '@material-ui/core';
import { getSidebarConfig } from './Sidebar.config';
import { expandMenu } from './Sidebar.actions';
import SubdirectoryArrowRightIcon from '@material-ui/icons/SubdirectoryArrowRight';
import { useRouteMatch, useHistory } from 'react-router-dom';
import { routes } from '../../../routes';
import clsx from 'clsx';
import { useDispatch, useSelector } from 'react-redux';
import { AppState } from '../../../Redux';
import { AdminSettings } from '../../../Api/AdminSettings/AdminSettings';
import { ICountryConfiguration } from '../../../../../Application/Models/CountryConfigurations/CountryConfigurations.types';
import { setLoader } from '../../../Redux/Loader/actions';
import { toast } from 'react-toastify';

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
  },
  menuButton: {
    marginRight: 36,
  },
  hide: {
    display: 'none',
  },
  drawer: {
    width: (props: SIDEBAR.ISidebarProps) => props.drawerWidth,
    flexShrink: 0,
  },
  drawerPaper: {
    width: (props: SIDEBAR.ISidebarProps) => props.drawerWidth,
    backgroundColor: TERTIARY_COLOR,
    color: 'white',
  },
  drawerHeader: {
    display: 'flex',
    alignItems: 'center',
    padding: theme.spacing(0, 1),
    // necessary for content to be below app bar
    ...theme.mixins.toolbar,
    justifyContent: 'flex-end',
  },
  listHeader: {
    fontWeight: 'bolder',
    textTransform: 'uppercase',
  },
  logo: {
    width: '50px',
    height: '50px',
    display: 'block',
    marginLeft: 'auto',
    marginRight: 'auto',
  },
  nested: {
    paddingLeft: theme.spacing(3),
  },
  routeSelected: {
    backgroundColor: SECONDARY_COLOR,
    '&:hover': {
      backgroundColor: SECONDARY_COLOR + '55',
    },
  },
  menuSelected: {
    backgroundColor: PRIMARY_COLOR,
    '&:hover': {
      backgroundColor: PRIMARY_COLOR + '55',
    },
  },
}));

function sidebarReducer(
  state: SIDEBAR.ISidebarConfig,
  actions: SIDEBAR.ISidebarActions
): SIDEBAR.ISidebarConfig {
  switch (actions.type) {
    case SIDEBAR.EXPAND_MENU:
      const menuValue: string = actions.payload;
      const isExpanded = state[menuValue].isExpanded;

      state[menuValue].isExpanded = !isExpanded;

      return Object.assign({}, state);

    case SIDEBAR.SET_INITIAL_STATE:
      const newState: SIDEBAR.ISidebarConfig = actions.payload;

      return Object.assign({}, newState);

    default:
      return state;
  }
}

const adminSettingsApi = new AdminSettings();

function Sidebar(props: SIDEBAR.ISidebarProps) {
  const history = useHistory();
  const match = useRouteMatch();
  const reduxDispatch = useDispatch();

  const classes = useStyles(props);
  const { isSidebarOpen, activeSide } = props;

  const [selectedItemValue, setSelectedItemValue] = useState(SIDEBAR.HOME_DASHBOARD);
  const [selectedMenuValue, setSelectedMenuValue] = useState(SIDEBAR.DASHBOARD_MENU);

  const [countryConfig, setCountryConfig] = useState<
    ICountryConfiguration | undefined
  >(undefined);

  const user = useSelector((state: AppState) => state.user);

  const country =
    user.response?.company?.country ??
    user.response?.driver?.country ??
    user.response?.country;

  const initialSideBarConfig = useMemo(
    () => getSidebarConfig(user, countryConfig),
    [user, countryConfig]
  );

  const [t] = useTranslation();

  const handleBackIconClick = () => {
    props.toggleSideBar(false);
  };

  const handleMenuClick = (menuValue: string) => { };

  const handleItemClick = useCallback(
    (itemValue: string, menuValue: string) => {
      setSelectedItemValue(itemValue);
      setSelectedMenuValue(menuValue);
      let jobManagementRoot = '';
      if (menuValue === SIDEBAR.TRANSPORT_MANAGEMENT)
        jobManagementRoot = routes.home.transport_management.root;
      else if (menuValue === SIDEBAR.MARKETPLACE_MANAGEMENT)
        jobManagementRoot = routes.home.transport_management.root;
      else if (menuValue === SIDEBAR.SEA_FREIGHT_MANAGEMENT)
        jobManagementRoot = routes.home.sea_freight_management.root;
      switch (itemValue) {
        case SIDEBAR.OVERVIEW :
          history.push(match.url + jobManagementRoot + routes.home.overview);
          break;
        case SIDEBAR.JOB_REPORT:
          history.push(
            match.url + jobManagementRoot + routes.home.jobs.job_report
          );
          break;
        case SIDEBAR.COMPLETED_JOBS_MILEAGE:
          history.push(
            match.url + jobManagementRoot + routes.home.jobs.job_report_mileage
          );
          break;
        case SIDEBAR.CREATE_NEW_JOB:
          history.push(
            match.url + jobManagementRoot + routes.home.jobs.create_new_job
          );
          break;

        case SIDEBAR.CREATE_NEW_ASSIGNED_JOB:
          history.push(
            match.url +
            jobManagementRoot +
            routes.home.jobs.create_new_assigned_job
          );
          break;
        case SIDEBAR.PENDING_JOBS:
          history.push(
            match.url +
            jobManagementRoot +
            routes.home.jobs.show_jobs.root +
            routes.home.jobs.show_jobs.pending
          );
          break;
        case SIDEBAR.POSTED_JOBS:
          history.push(
            match.url +
            jobManagementRoot +
            routes.home.jobs.show_jobs.root +
            routes.home.jobs.show_jobs.posted
          );
          break;
        case SIDEBAR.BIDS_TO_CONFIRM:
          history.push(
            match.url +
            jobManagementRoot +
            routes.home.jobs.show_jobs.root +
            routes.home.jobs.show_jobs.bids_to_confirm
          );
          break;
        case SIDEBAR.MY_BIDS:
          history.push(
            match.url +
            jobManagementRoot +
            routes.home.jobs.show_jobs.root +
            routes.home.jobs.show_jobs.my_bids
          );
          break;
        case SIDEBAR.ALL_JOBS:
          history.push(
            match.url +
            jobManagementRoot +
            routes.home.jobs.show_jobs.root +
            routes.home.jobs.show_jobs.all
          );
          break;
        case SIDEBAR.AVAILABLE_JOBS:
          history.push(
            match.url +
            jobManagementRoot +
            routes.home.jobs.show_jobs.root +
            routes.home.jobs.show_jobs.available
          );
          break;
        case SIDEBAR.OUR_ASSIGNED_JOBS:
          history.push(
            match.url +
            jobManagementRoot +
            routes.home.jobs.show_jobs.root +
            routes.home.jobs.show_jobs.our_assigned
          );
          break;
        case SIDEBAR.RATES_MANAGEMENT:
          history.push(
            match.url +
            routes.home.admin_settings.root +
            routes.home.admin_settings.rates_management
          );
          break;
        case SIDEBAR.JOBS_IN_PROGRESS:
          history.push(
            match.url +
            jobManagementRoot +
            routes.home.jobs.show_jobs.root +
            routes.home.jobs.show_jobs.in_progress
          );
          break;
        case SIDEBAR.CUSTOMER_JOBS:
          history.push(
            match.url +
            jobManagementRoot +
            routes.home.jobs.show_jobs.root +
            routes.home.jobs.show_jobs.jobs_in_progress
          );
          break;
        case SIDEBAR.MY_JOBS_IN_PROGRESS:
          history.push(
            match.url +
            jobManagementRoot +
            routes.home.jobs.show_jobs.root +
            routes.home.jobs.show_jobs.my_in_progress
          );
          break;
        case SIDEBAR.JOB_BIDS:
          history.push(
            match.url +
            jobManagementRoot +
            routes.home.jobs.show_jobs.root +
            routes.home.jobs.show_jobs.bids
          );
          break;
        case SIDEBAR.PICKED_UP_JOBS:
          history.push(
            match.url +
            jobManagementRoot +
            routes.home.jobs.show_jobs.root +
            routes.home.jobs.show_jobs.picked_up
          );
          break;
        case SIDEBAR.DELIEVERED_JOBS:
          history.push(
            match.url +
            jobManagementRoot +
            routes.home.jobs.show_jobs.root +
            routes.home.jobs.show_jobs.delivered
          );
          break;
        case SIDEBAR.COMPLETED_JOBS:
          history.push(
            match.url +
            jobManagementRoot +
            routes.home.jobs.show_jobs.root +
            routes.home.jobs.show_jobs.completed
          );
          break;
        case SIDEBAR.ADD_USER:
          history.push(
            match.url +
            routes.home.user_management.root +
            routes.home.user_management.add
          );
          break;
        case SIDEBAR.ALL_USERS:
          history.push(
            match.url +
            routes.home.user_management.root +
            routes.home.user_management.all
          );
          break;
        case SIDEBAR.ADMIN_USERS:
          history.push(
            match.url +
            routes.home.user_management.root +
            routes.home.user_management.admin
          );
          break;
        case SIDEBAR.COMMISSIONING_SETTINGS:
          history.push(
            match.url +
            routes.home.admin_settings.root +
            routes.home.admin_settings.commission
          );
          break;
        case SIDEBAR.COUNTRY_SETTINGS:
          history.push(
            match.url +
            routes.home.admin_settings.root +
            routes.home.admin_settings.country_settings
          );
          break;
        case SIDEBAR.NOTIFICATION_SETTINGS:
          history.push(
            match.url +
            routes.home.admin_settings.root +
            routes.home.admin_settings.notification_settings
          );
          break;
        case SIDEBAR.INVOICE_REPORTS:
          history.push(
            match.url +
            routes.home.admin_settings.root +
            routes.home.admin_settings.invoice_reports
          );
          break;
        case SIDEBAR.JOB_INVOICED:
          history.push(
            match.url +
            routes.home.admin_settings.root +
            routes.home.admin_settings.job_invoiced
          );
          break; case SIDEBAR.JOB_NOT_INVOICED:
          history.push(
            match.url +
            routes.home.admin_settings.root +
            routes.home.admin_settings.job_not_invoiced
          );
          break;
        case SIDEBAR.MARGIN:
          history.push(
            match.url +
            routes.home.admin_settings.root +
            routes.home.admin_settings.margin
          );
          break;
        case SIDEBAR.COMMON_ADDRESS:
          history.push(
            match.url +
            routes.home.admin_settings.root +
            routes.home.admin_settings.common_address
          );
          break;
        case SIDEBAR.ADDRESS_MANAGEMENT:
          history.push(
            match.url +
            routes.home.admin_settings.root +
            routes.home.admin_settings.address_management
          );
          break;
        case SIDEBAR.RELATIONSHIP_MANAGEMENT:
          history.push(
            match.url +
            routes.home.company_management.root +
            routes.home.company_management.relationship_management
          );
          break;
        case SIDEBAR.ASSOCIATE_GROUP_MANAGEMENT:
          history.push(
            match.url +
            routes.home.company_management.root +
            routes.home.company_management.associate_group_management
          );
          break;
        case SIDEBAR.COMP_ADDRESS_MANAGEMENT:
          history.push(
            match.url +
            routes.home.company_management.root +
            routes.home.company_management.address_management
          );
          break;
        case SIDEBAR.COMPANY_MANAGEMENT:
          history.push(
            match.url +
            routes.home.company_management.root +
            routes.home.company_management.company_management
          );
          break;
        case SIDEBAR.CUSTOMER_MANAGEMENT:
          history.push(
            match.url +
            routes.home.customer_management.root +
            routes.home.customer_management.customer_management
          );
          break;
        case SIDEBAR.ACCOUNT_MANAGEMENT:
          history.push(
            match.url +
            routes.home.customer_management.root +
            routes.home.customer_management.account_management
          );
          break;
        case SIDEBAR.COMPANY_FEE_SETTINGS:
          history.push(
            match.url +
            routes.home.company_management.root +
            routes.home.company_management.company_fee_settings
          );
          break;
        case SIDEBAR.ADD_DRIVER:
          history.push(
            match.url +
            routes.home.driver_management.root +
            routes.home.driver_management.add_driver
          );
          break;
        case SIDEBAR.MY_DRIVERS:
          history.push(
            match.url +
            routes.home.driver_management.root +
            routes.home.driver_management.my_drivers
          );
          break;
        case SIDEBAR.WAITING_FOR_APPROVAL:
          history.push(
            match.url +
            routes.home.driver_management.root +
            routes.home.driver_management.waiting_for_approval
          );
          break;
        case SIDEBAR.DRIVER_FEE_SETTINGS:
          history.push(
            match.url +
            routes.home.driver_management.root +
            routes.home.driver_management.driver_fee_settings
          );
          break;
        case SIDEBAR.DRIVER_MANAGEMENT:
          history.push(
            match.url +
            routes.home.driver_management.root +
            routes.home.driver_management.driver_management_page
          );
          break;
        case SIDEBAR.WAREHOUSE_MANAGEMENT:
          history.push(
            match.url +
            routes.home.warehouse_management.root +
            routes.home.warehouse_management.warehouse_management
          );
          break;
        case SIDEBAR.MY_WAREHOUSES:
          history.push(
            match.url +
            routes.home.warehouse_management.root +
            routes.home.warehouse_management.my_warehouse
          );
          break;
        case SIDEBAR.MY_STOCKS:
          history.push(
            match.url +
            routes.home.warehouse_management.root +
            routes.home.warehouse_management.stocks
          );
          break;
        case SIDEBAR.STOCK_LEDGER:
          history.push(
            match.url +
            routes.home.warehouse_management.root +
            routes.home.warehouse_management.stock_ledger
          );
          break;
        case SIDEBAR.CONTAINERS_ON_SITE:
          history.push(
            match.url +
            routes.home.warehouse_management.root +
            routes.home.warehouse_management.containers +
            routes.home.warehouse_management.on_site
          );
          break;
        case SIDEBAR.SCHEDULED_COLLECTION_WAREHOUSE:
          history.push(
            match.url +
            routes.home.warehouse_management.root +
            routes.home.warehouse_management.scheduled_collection
          );
          break;
        case SIDEBAR.SCHEDULED_DELIVERIES_WAREHOUSE:
          history.push(
            match.url +
            routes.home.warehouse_management.root +
            routes.home.warehouse_management.scheduled_deliveries
          );
          break;
        case SIDEBAR.MARKETPLACE_MANAGEMENT_STATISTICS_REPORT:
          history.push(
            match.url + routes.home.report.root + routes.home.report.marketplace_mgmnt_stat_report
          );
          break;
        case SIDEBAR.OVERDUE_COLLECTION:
          history.push(
            match.url +
            routes.home.report.root +
            routes.home.report.overdue_collection
          );
          break;
        case SIDEBAR.PROFITABILITY_REPORT:
          history.push(
            match.url +
            routes.home.report.root +
            routes.home.report.profitability_report
          );
          break;
        case SIDEBAR.SCHEDULED_DELIVERY_REPORT:
          history.push(
            match.url +
            routes.home.report.root +
            routes.home.report.scheduled_delivery_report
          );
          break;
        case SIDEBAR.SCHEDULED_COLLECTION_REPORT:
          history.push(
            match.url +
            routes.home.report.root +
            routes.home.report.scheduled_collection_report
          );
          break;
        case SIDEBAR.CNTR_DEHIRE_REPORT:
          history.push(
            match.url +
            routes.home.report.root +
            routes.home.report.cntr_dehire_report
          );
          break;
        case SIDEBAR.CNTR_DETENTION_REPORT:
          history.push(
            match.url +
            routes.home.report.root +
            routes.home.report.cntr_detention_report
          );
          break;
        case SIDEBAR.COMPLETED_JOBS_REPORT:
          history.push(
            match.url +
            routes.home.report.root +
            routes.home.report.completed_jobs_report
          );
          break;

        case SIDEBAR.COMPLETED_JOBS_MILEAGE_REPORT:
          history.push(
            match.url +
            routes.home.report.root +
            routes.home.report.completed_jobs_mileage_report
          );
          break;

        case SIDEBAR.OVERDUE_DELIVERIES:
          history.push(
            match.url +
            routes.home.report.root +
            routes.home.report.overdue_deliveries
          );
          break;
        case SIDEBAR.NO_POD_DOCUMENTS:
          history.push(
            match.url +
            routes.home.report.root +
            routes.home.report.no_pod_documents
          );
          break;

        case SIDEBAR.DASHBOARD:
          if (menuValue === SIDEBAR.DASHBOARD_MENU) {
            history.push(
              match.url +
              routes.home.dashboard_menu.root +
              routes.home.dashboard_menu.dashboard
            );
          } else if (menuValue === SIDEBAR.KPI_DASHBOARD) {
            history.push(
              match.url + routes.home.kpi.root + routes.home.kpi.dashboard
            );
          }
          break;
        case SIDEBAR.HOME_DASHBOARD:
          history.push(
            match.url +
            routes.home.dashboard_v2.root +
            routes.home.dashboard_v2.main
          );
          break;
        case SIDEBAR.WEEKLY_JOB_METRICS:
          history.push(
            match.url +
            routes.home.dashboard_menu.root +
            routes.home.dashboard_menu.dashboard_weekly
          );
          break;

        case SIDEBAR.MPD_REPORTS:
          history.push(
            match.url +
            routes.home.report.root +
            routes.home.report.mpd_reports
          );
          break;

        case SIDEBAR.CREATE_A_QUOTE:
          history.push(
            match.url +
            routes.home.quotes.root +
            routes.home.quotes.create
          );
          break;

        case SIDEBAR.SUCCESSFUL_QUOTES:
          history.push(
            match.url +
            routes.home.quotes.list_quotes.root +
            routes.home.quotes.list_quotes.successful
          );
          break;
        // case SIDEBAR.SUCCESSFUL_QUOTES:
        //   history.push(
        //     match.url +
        //     routes.home.quotes.list_quotes.root +
        //     routes.home.quotes.list_quotes.successful
        //   );
        //   break;
        case SIDEBAR.FAILED_QUOTES:
          history.push(
            match.url +
            routes.home.quotes.list_quotes.root +
            routes.home.quotes.list_quotes.failed_quotes
          );
          break;
        case SIDEBAR.PENDING_QUOTES:
          history.push(
            match.url +
            routes.home.quotes.list_quotes.root +
            routes.home.quotes.list_quotes.pending
          );
          break;
        case SIDEBAR.ACTIVE_QUOTES:
          history.push(
            match.url +
            routes.home.quotes.list_quotes.root +
            routes.home.quotes.list_quotes.active
          );
          break;
      }
    },
    [history, match.url]
  );

  const [sideBarConfig, dispatch] = useReducer(
    sidebarReducer,
    initialSideBarConfig
  );

  const Menus = useMemo(
    () =>
      Object.values(sideBarConfig)
        .filter((config) => !config.hide)
        .map((config, i) => (
          <React.Fragment key={i}>
            <ListItem
              className={clsx({
                [classes.menuSelected]: selectedMenuValue === config.menuValue,
              })}
              onClick={() => {
                dispatch(expandMenu(config.menuValue));
                handleMenuClick(config.menuValue);
              }}
              button
            >
              <ListItemText primary={t(config.menuValue)} />
              {config.isExpanded ? <ExpandLess /> : <ExpandMore />}
            </ListItem>
            <Collapse in={config.isExpanded} timeout="auto" unmountOnExit>
              <List component="div" disablePadding>
                {config.items
                  .filter((item) => !item.hide)
                  .map((item, i) => (
                    <ListItem
                      key={i}
                      id={`list_${item.itemValue}`}
                      button
                      className={clsx(classes.nested, {
                        [classes.routeSelected]:
                          selectedItemValue === item.itemValue &&
                          selectedMenuValue === config.menuValue,
                      })}
                      onClick={() => {
                        handleItemClick(item.itemValue, config.menuValue);
                      }}
                    >
                      <ListItemIcon>
                        <SubdirectoryArrowRightIcon />
                      </ListItemIcon>
                      <ListItemText primary={t(item.itemValue)} />
                    </ListItem>
                  ))}
              </List>
            </Collapse>
          </React.Fragment>
        )),
    [
      sideBarConfig,
      classes.nested,
      classes.routeSelected,
      classes.menuSelected,
      t,
      handleItemClick,
      selectedItemValue,
      selectedMenuValue,
    ]
  );

  const getConfig = useCallback(
    (country: string) => {
      reduxDispatch(setLoader(true));
      adminSettingsApi
        .getCountryConfig(country)
        .then((response) => {
          const countryConfig: ICountryConfiguration = response.data;
          setCountryConfig(countryConfig);
          const newConfig = getSidebarConfig(user, countryConfig);
          dispatch({ type: SIDEBAR.SET_INITIAL_STATE, payload: newConfig });
          reduxDispatch(setLoader(false));
        })
        .catch((err: any) => {
          console.log(`err`, err);
          reduxDispatch(setLoader(false));
          toast.error(t('error_getting_config'));
        });
    },
    [reduxDispatch, t, user]
  );
  useEffect(() => {
    if (activeSide && activeSide != '') {
      setSelectedItemValue(activeSide)
    }
  }, [activeSide])
  useEffect(() => {
    if (country) getConfig(country);
  }, [getConfig, country]);
  return (
    <Drawer
      className={classes.drawer}
      variant="persistent"
      anchor="left"
      open={isSidebarOpen}
      classes={{
        paper: classes.drawerPaper,
      }}
    >
      <div className={classes.drawerHeader}>
        <img alt="Moveit4u" className={classes.logo} src={moveit4u_logo} />
        <IconButton color="inherit" onClick={handleBackIconClick}>
          <KeyboardBackspaceIcon />
        </IconButton>
      </div>
     
      <List
        component="nav"
        aria-labelledby="nested-list-subheader"
        subheader={
          <ListSubheader
            className={classes.listHeader}
            color="inherit"
            component="div"
            id="nested-list-subheader"
          >
            {/* {t('dashboard')} */}
          </ListSubheader>
        }
      >
        {Menus}
      </List>
    </Drawer>
  );
}

export default Sidebar;