import React, { Component } from 'react';
import classNames from 'classnames/bind';
import Modals from 'components/global/Modals';
import SideMenus from 'components/global/SideMenus';

import Loader from 'components/global/Loader';
import NotLogged from 'components/layouts/NotLogged';
import Logged from 'components/layouts/Logged';
import SeoHandler from 'components/global/SeoHandler';

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 } from 'react-router-dom';

import ModuleButton from 'components/items/ModuleButton';
import styleIdentifiers from './main.scss';

// Config icons
library.add(fab, fas, far);

const styles = classNames.bind(styleIdentifiers);

export interface StateProps {
  ready: boolean;
}

export interface DispatchProps {
  bootup: Function;
}

export interface OwnProps {}

export type MainProps = StateProps & DispatchProps & OwnProps;

interface MainState {}

export default class Main extends Component<MainProps, MainState> {
  componentDidMount(): void {
    const { bootup } = this.props;

    if (bootup) bootup();
  }

  render(): JSX {
    const { ready } = this.props;
    return (
      <div className={styles('Main')}>
        {ready && (
          <Switch>
            <Route exact path="/login" component={NotLogged} />
            <Route component={Logged} />
          </Switch>
        )}
        <Loader />
        <SideMenus />
        <Modals button={ModuleButton} />
      </div>
    );
  }
}
