text: import React from 'react';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import { Switch, Route, withRouter, Redirect } from 'react-router';
  import { TransitionGroup, CSSTransition } from 'react-transition-group';
  import Hammer from 'rc-hammerjs';
  
  import UIIcons from '../../pages/components/icons';
  import UINotifications from '../../pages/notifications';
  import TablesStatic from '../../pages/tables/static';
  import MapsGoogle from '../../pages/components/maps/google';
  import CoreTypography from '../../pages/typography';
  import Charts from '../../pages/components/charts/Charts';
  import Dashboard from '../../pages/dashboard';
  
  import Workers from '../../pages/workers/static/Workers';
  import Areas from '../../pages/areas/static/Areas';
  import VaccinatedAreas from '../../pages/vaccinated-areas/static/VaccinatedAreas';
  import NonVaccinatedAreas from '../../pages/non-vaccinated-areas/static/NonVaccinatedAreas';
  import WorkersMsgs from '../../pages/workers-msgs/static/WorkersMsgs';
  import SupervisorProfile from '../../pages/supervisor-profile/static/SupervisorProfile';
  
  import Header from '../Header';
  import Sidebar from '../Sidebar';
  import BreadcrumbHistory from '../BreadcrumbHistory';
  import { openSidebar, closeSidebar } from '../../actions/navigation';
  import s from './Layout.module.scss';
  
  class Layout extends React.Component {
    static propTypes = {
      sidebarStatic: PropTypes.bool,
      sidebarOpened: PropTypes.bool,
      dispatch: PropTypes.func.isRequired,
    };
  
    static defaultProps = {
      sidebarStatic: false,
      sidebarOpened: false,
    };
    constructor(props) {
      super(props);
  
      this.handleSwipe = this.handleSwipe.bind(this);
    }
  
  
    handleSwipe(e) {
      if ('ontouchstart' in window) {
        if (e.direction === 4 && !this.state.chatOpen) {
          this.props.dispatch(openSidebar());
          return;
        }
  
        if (e.direction === 2 && this.props.sidebarOpened) {
          this.props.dispatch(closeSidebar());
          return;
        }
  
        this.setState({ chatOpen: e.direction === 2 });
      }
    }
  
    render() {
      return (
        <div
          className={[
            s.root,
            'sidebar-' + this.props.sidebarPosition,
            'sidebar-' + this.props.sidebarVisibility,
          ].join(' ')}
        >
          <div className={s.wrap}>
            <Header />
            {/* <Chat chatOpen={this.state.chatOpen} /> */}
            {/* <Helper /> */}
            <Sidebar />
            <Hammer onSwipe={this.handleSwipe}>
              <main className={s.content}>
                <BreadcrumbHistory url={this.props.location.pathname} />
                <TransitionGroup>
                  <CSSTransition
                    key={this.props.location.key}
                    classNames="fade"
                    timeout={200}
                  >
                    <Switch>
                      <Route path="/app/main" exact render={() => <Redirect to="/app/main/dashboard" />} />
                      <Route path="/app/main/dashboard" exact component={Dashboard} />
                      <Route path="/app/icons" exact component={UIIcons} />
                      <Route path="/app/notifications" exact component={UINotifications} />
                      <Route path="/app/charts" exact component={Charts} />
                      <Route path="/app/tables" exact component={TablesStatic} />
                      <Route path="/app/maps" exact component={MapsGoogle} />
                      <Route path="/app/typography" exact component={CoreTypography} />
  
                      <Route path="/app/workers" exact component={Workers} />
                      <Route path="/app/areas" exact component={Areas} />
                      <Route path="/app/vaccinated_areas" exact component={VaccinatedAreas} />
                      <Route path="/app/non_vaccinated_areas" exact component={NonVaccinatedAreas} />
                      <Route path="/app/workers_msgs" exact component={WorkersMsgs} />
                      <Route path="/app/supervisor_profile" exact component={SupervisorProfile} />
                    </Switch>
                  </CSSTransition>
                </TransitionGroup>  
                <footer className={s.contentFooter}>
                  &copy; Copyright © 2021 - 2030 E-Vaccnation - All Rights Reserved.
                </footer>
              </main>
            </Hammer>
          </div>
        </div>
      );
    }
  }
  
  function mapStateToProps(store) {
    return {
      sidebarOpened: store.navigation.sidebarOpened,
      sidebarPosition: store.navigation.sidebarPosition,
      sidebarVisibility: store.navigation.sidebarVisibility,
    };
  }
  
  export default withRouter(connect(mapStateToProps)(Layout));
  