import React, { Component } from "react";

import "./pages/general/App.css";

import {
  BrowserRouter as Router,
  Route,
  useLocation
} from "react-router-dom";

import HeaderPage   from "./pages/general/header.page";
import MainPage  from "./pages/mainPage/main.page";
import PlanesPage from "./pages/planesPage/planes.page"
import SignInPage from "./pages/signinPage/login.page"
import SignUpPage from "./pages/signinPage/signup.page"
import CalendarPage from "./pages/calendarPage/calendar.page"


import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.updateWindowDimensions = this.updateWindowDimensions.bind(this);

    this.state = {
      sectionPage: '',
      app_id_s: '',
      arrData: {},
      conekta: {},
    }
  }

  componentDidMount() {
    document.title = "tarjeta.id"
    this.updateWindowDimensions();
    window.addEventListener('resize', this.updateWindowDimensions);
     // if( param.indexOf('agente') !== -1 || param == '' ) {
     //   this.setState({ typeUser: 'agente', })
     // } else if( param.indexOf('operador') !== -1 ) {
     //   this.setState({ typeUser: 'operador', })
     // }
  }

  usePageViews() {
    let location = useLocation();
    return location.pathname;
  }

  locate() {
    return this.usePageViews();
  }


  componentWillUnmount() {
    window.removeEventListener('resize', this.updateWindowDimensions);
  }

  updateWindowDimensions() {
    this.setState({ width: window.innerWidth, height: window.innerHeight });
  }

  render() {
    const { sectionPage } = this.state

    return (
      <div style={{ background: '#f2f2f2', height: '100%', paddingTop: 60 }}>

        <Router>

          {/* Header */}

          {/* Sections */}
          <Route exact path="/">
            <HeaderPage initState={ this.state } initsetState={ (param) => this.setState(param) } />
            <MainPage initState={ this.state } initsetState={ (param) => this.setState(param)} />
          </Route>

          {/* <Route exact path="/plan/valentin">
            <HeaderPage initState={ this.state } initsetState={ (param) => this.setState(param) } />
            <PlanesPage initState={ this.state } initsetState={ (param) => this.setState(param) } />
          </Route> */}

          <Route exact path="/plan">
            <HeaderPage initState={ this.state } initsetState={ (param) => this.setState(param) } />
            <PlanesPage initState={ this.state } initsetState={ (param) => this.setState(param) } />
          </Route>
          
          <Route exact path="/calendar">
            <HeaderPage initState={ this.state } initsetState={ (param) => this.setState(param) } />
            <CalendarPage />
          </Route>

          <Route exact path="/signin">
            <SignInPage initState={ this.state } initsetState={ (param) => this.setState(param) } />
          </Route>

          <Route exact path="/signup">
            <SignUpPage initState={ this.state } initsetState={ (param) => this.setState(param) } />
          </Route>

          {/* Tabs */}
          {/*<FooterPage initState={ this.state } initsetState={ (param) => this.setState(param) } />*/}

        </Router>
      </div>
    );
  }

}

export default App;