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 Main from '../../pages/videoAnalysis/VideoAnalysis';
import Subject from '../../pages/subject';
import Sidebar from '../Sidebar';
import { openSidebar, closeSidebar, changeActiveSidebarItem, toggleSidebar } from '../../actions/navigation';
import s from './Layout.module.scss';
import { DashboardThemes } from '../../reducers/layout';

class Layout extends React.Component {
    static propTypes = {
      sidebarStatic: PropTypes.bool,
      sidebarOpened: PropTypes.bool,
      dashboardTheme: PropTypes.string,
      dispatch: PropTypes.func.isRequired,
    };
  
    static defaultProps = {
      sidebarStatic: false,
      sidebarOpened: false,
      dashboardTheme: DashboardThemes.DARK
    };
    constructor(props) {
      super(props);
      this.handleSwipe = this.handleSwipe.bind(this);
    }
  
    async componentDidMount() {
      const staticSidebar = JSON.parse(localStorage.getItem('staticSidebar'));
      if (staticSidebar && window.innerWidth > 768) {
        this.props.dispatch(toggleSidebar());
      } else if (this.props.sidebarOpened) {
        setTimeout(() => {
          this.props.dispatch(closeSidebar());
          this.props.dispatch(changeActiveSidebarItem(null));
        }, 2500);
      }
      this.handleResize();
      window.addEventListener('resize', this.handleResize.bind(this));
    }
  
    componentWillUnmount() {
      window.removeEventListener('resize', this.handleResize.bind(this));
    }
  
    handleResize() {
      if (window.innerWidth <= 768 && this.props.sidebarStatic) {
        this.props.dispatch(toggleSidebar());
      }
    }
  
    handleSwipe(e) {
      if ('ontouchstart' in window) {
          this.props.dispatch(openSidebar());
          return;
        }
        if (e.direction === 2 && this.props.sidebarOpened) {
          this.props.dispatch(closeSidebar());
          return;
        }
    }
  
    render() {
      return (
        <div
          className={[
            s.root,
            this.props.sidebarStatic ? s.sidebarStatic : '',
            !this.props.sidebarOpened ? s.sidebarClose : '',
            'video emergency analysis',
            'video emergency-' + this.props.dashboardTheme,
          ].join(' ')}
        >
          <Sidebar />
          <div className={s.wrap}>
            <Hammer onSwipe={this.handleSwipe}>
              <main className={s.content}>
                <TransitionGroup>
                  <CSSTransition
                    key={this.props.location.pathname}
                    classNames="fade"
                    timeout={200}
                  >
                    <Switch>
                      <Route path="/app/main/" exact component={Main} />
                      <Route path="/app/subject" exact component={Subject} />
                    </Switch>
                  </CSSTransition>
                </TransitionGroup>
                <footer className={s.contentFooter}>
                  OSS project
                </footer>
              </main>
            </Hammer>
          </div>
        </div>
      );
    }
  }
  
  function mapStateToProps(store) {
    return {
      sidebarOpened: store.navigation.sidebarOpened,
      sidebarStatic: store.navigation.sidebarStatic,
      dashboardTheme: store.layout.dashboardTheme,
      labelDataGroup: store.labelDataGroup,
    };
  }
  
  export default withRouter(connect(mapStateToProps)(Layout));