import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import { PageHeader, Navbar } from 'react-bootstrap';
import axios from 'axios';
import {FormattedMessage} from 'react-intl';
import Sidebar from 'react-sidebar';
import { LastLocationProvider } from 'react-router-last-location';

import './App.css';

import About from './components/About';
import Page from './components/Page';
import Home from './components/Home';
import Indice from './components/Indice';
import Index from './components/Index';
import Abhanga from './components/Abhanga';
import Search from './components/Search';
import ResponsiveGallery from './components/ResponsiveGallery';

axios.defaults.baseURL = 'https://tukaram-gatha.herokuapp.com';

const mql = window.matchMedia(`(min-width: 800px)`);

class App extends Component {

  constructor(props, context){
    super(props);

    this.state = {
      mql: mql,
      sidebarOpen: true,
      sidebarDocked: true
    }

    this.mediaQueryChanged = this.mediaQueryChanged.bind(this);
    this.onSetSidebarOpen = this.onSetSidebarOpen.bind(this);
    this.toggleNavMenu = this.toggleNavMenu.bind(this);
    this.onRequestHide = this.onRequestHide.bind(this);

  }

  onSetSidebarOpen(open) {
    this.setState({sidebarOpen: open});
  }

  toggleNavMenu(e) {
    this.setState({
      sidebarOpen: !this.state.sidebarOpen
    });

  }
  componentWillMount() {
    mql.addListener(this.mediaQueryChanged);
    this.setState({mql: mql, sidebarDocked: mql.matches});
  }

  componentWillUnmount() {
    this.state.mql.removeListener(this.mediaQueryChanged);
  }

  mediaQueryChanged() {
    this.setState({sidebarDocked: this.state.mql.matches});
  }

  onRequestHide() {
     this.setState({
      sidebarOpen: false
    });
  }

  render() {

    let sidebarContent = (

      <div className="Sidebar-Content">
        <button type="button" className="close" aria-hidden="true" onClick={this.onRequestHide}>&times;</button>
        <h4>
          <FormattedMessage id="welcome" defaultMessage="Welcome!"/>
        </h4>

        <ul className="App-Menu list-unstyled">
          <li className="menu-item">
          <Link to="/" onClick={() => this.onSetSidebarOpen(false)}>
            <FormattedMessage id="home" defaultMessage="Home"/>
          </Link>
          </li>
          <li className="menu-item">
            <Link to="/about" onClick={() => this.onSetSidebarOpen(false)}>
              <FormattedMessage id="about" defaultMessage="About"/>
            </Link>
          </li>
          <li className="menu-item">
            <Link to="/index" onClick={() => this.onSetSidebarOpen(false)}>
              <FormattedMessage id="index" defaultMessage="Index"/>
            </Link>
          </li>
          <li className="menu-item">
            <Link to="/page/1" onClick={() => this.onSetSidebarOpen(false)}>
              <FormattedMessage id="read" defaultMessage="Read now"/>
            </Link>
          </li>
          <li className="menu-item">
            <Link to="/search" onClick={() => this.onSetSidebarOpen(false)}>
              <FormattedMessage id="search" defaultMessage="Search"/>
            </Link>
          </li>
          <li className="menu-item">
            <Link to="/gallery" onClick={() => this.onSetSidebarOpen(false)}>
              <FormattedMessage id="gallery" defaultMessage="Gallery"/>
            </Link>
          </li>
          <li className="menu-item">
            <Link to="/other-info" onClick={() => this.onSetSidebarOpen(false)}>
              <FormattedMessage id="other" defaultMessage="Other Info"/>
            </Link>
          </li>
        </ul>
      </div>
    );

    return (
      <div className="App">
        <Router basename="/tukaram-gatha/">
        <LastLocationProvider>
          <div className="App-Body">
            <Sidebar sidebar={sidebarContent}
                sidebarClassName="sidebar"
                contentClassName="main"
                rootClassName="wrap"
                overlayClassName="overlay"
                open={this.state.sidebarOpen}
                docked={this.state.sidebarDocked}
                onSetOpen={this.onSetSidebarOpen}>

                <div className="Content-Inner">
                  <PageHeader>
                    <Navbar.Toggle onClick={this.toggleNavMenu}/>
                    <FormattedMessage id="sant-tukaram-gatha" defaultMessage="Sant Tukaram Gatha"/>
                  </PageHeader>
                  <Switch>
                    <Route path='/' exact={true} component={Home} />
                    <Route path='/about' exact={true} component={About} />
                    <Route path='/index' exact={true} component={Index} />
                    <Route path='/gallery' exact={true} component={ResponsiveGallery} />
                    <Route path='/indice/:char' exact={true} component={Indice} />
                    <Route path='/search' exact={true} component={Search} />
                    <Route path='/page/:id' exact={true} component={Page} />
                    <Route path='/page/:currentPage/abhanga/:id' exact={true} component={Abhanga} />
                    <Route path='/indice/:currentChar/abhanga/:id' exact={true} component={Abhanga} />
                    <Route path='/abhanga/:id' exact={true} component={Abhanga} />
                  </Switch>
                </div>

            </Sidebar>
          </div>
        </LastLocationProvider>
        </Router>

        <footer className="navbar navbar-fixed-bottom">
          <a className="copyright" href="https://mohandere.github.io/" target="_blank">&copy;  Mohan Dere</a>
        </footer>
      </div>

    );
  }
}

export default App;
