import React, { useEffect } from 'react';
import classNames from 'classnames/bind';

import App from 'components/layouts/App';

// FONT AWESOME
import { library } from '@fortawesome/fontawesome-svg-core';
// free icons
import { fab } from '@fortawesome/free-brands-svg-icons';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';

import { Switch } from 'react-router';
import { Route, withRouter } from 'react-router-dom';

// Global components
import SideMenus from 'components/global/SideMenus';
import Modals from 'components/global/Modals';
import Loader from 'components/global/Loader';

import ProjectHeader from 'components/global/ProjectHeader';

import SeoHandler from 'components/global/SeoHandler';
import Footer from 'components/global/Footer';
import { pushRoute } from 'store/utils/routes';
import Helmet from 'react-helmet';
import styleIdentifiers from './main.scss';
import image from './assets/Favicon.svg';

library.add(fab, fas, far);

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {
  ready: boolean;
  session: object;
}

export interface DispatchProps {
  bootup: Function;
}

export interface OwnProps {}

export type MainProps = StateProps & DispatchProps & OwnProps;

const Main = (props: MainProps) => {
  const {
    bootup,
    match,
    location,
    lg,
    location: { pathname },
    ready,
    sideMenuHide,
  } = props;

  useEffect(() => {
    if (!ready && bootup) bootup();
  }, []);

  useEffect(() => {
    sideMenuHide('right');
    window.scrollTo(0, 0);
  }, [location]);

  const noFooter = pathname.indexOf(pushRoute('mailBox', lg)) >= 0;

  return (
    <div className={styles('Main')}>
      <ProjectHeader />
      <Helmet>
        <link rel="icon" type="image/x-icon" href={image} size="48x48" />
      </Helmet>
      <SeoHandler path="seo.default" />
      {ready && (
        <div className={styles('content')}>
          <Switch>
            <Route component={App} />
          </Switch>
        </div>
      )}
      {!noFooter && <Footer />}
      <Loader />
      <Modals />
      <SideMenus />
    </div>
  );
};

export default withRouter(Main);
