import React, { Component } from "react";
import NavBar from "../components/NavBar";
import DropdownContainer from "../components/DropdownContainer";
import Home from "../components/Home";
import Footer from "../components/Footer";
import "../assets/stylesheets/app.scss";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

export default class HomeRoute extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: "",
      hamburger: false
    };
    toast("The new ITR Webpage! 🎉");
    document.title = "ITR - Home";
  }

  hamburgerToggle = () => {
    this.setState({ hamburger: !this.state.hamburger });
  }

  render() {
    return (
      <div className="container">
        {this.state.hamburger ? <DropdownContainer hamburgerToggle={this.hamburgerToggle}/> : null}
        <Home></Home>
        <NavBar hamburgerToggle={this.hamburgerToggle}></NavBar>
        <ToastContainer
          position="bottom-right"
          autoClose={5000}
          hideProgressBar={false}
          newestOnTop={false}
          closeOnClick
          rtl={false}
          pauseOnFocusLoss
          draggable
          pauseOnHover
          theme="dark"
        />
        <Footer></Footer>
      </div>
    );
  }
}