import React from 'react';
import { Link } from 'react-router-dom';
import Scroll from 'react-scroll';
import {scroller} from 'react-scroll';
import Logo from './Logo.jsx';
import Address from './Address.jsx';
import Navigation from './Navigation.jsx';
import ContactPage from './ContactPage/contactpage.jsx';
import HomeSection from './HomeSection.jsx';
import SuitesPage from './Suites/SuitesPage.jsx';
import BuildingPage from './Building/BuildingPage.jsx';
import CampusPage from './Campus/CampusPage.jsx';
import Modal from './Modal.jsx';

class PageContainer extends React.Component {
  constructor(...args) {
    super(...args);
    this.sections = ['suites', 'building', 'campus', 'contact'];
    this.state = {
      winTop: this.winTop,
      showModal: false,
      activeModal: null,
    };
  }

  componentDidMount() {
    window.addEventListener('scroll', this.handleScroll.bind(this));
   }

  componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll.bind(this));
  }

  get winTop() {
    return window.pageYOffset;
  }

  handleScroll() {
    this.setState({winTop: window.pageYOffset});
  }

  renderModal() {
    if (this.state.showModal) {
      return (
        <Modal
            activeModal={this.state.activeModal}
            closeModal={this.closeModal.bind(this)}/>
        );
    }
  }

  showModal(modal) {
    document.body.className = "modal-open";
    this.setState({ showModal: true, activeModal: modal});
  }

  closeModal() {
    document.body.className= " ";
    this.setState({ showModal: false, activeModal: null});
  }

   render() {
   	return (
       <div>
         {this.renderModal()}
         <Navigation sections={this.sections}/>
          <Address winTop={this.state.winTop}/>
          <span className={`orange-block ${this.state.winTop < 300 ? 'fixed-top' : 'fixed-right'}`}/>
          <Logo winTop={this.state.winTop}/>
          <HomeSection winTop={this.state.winTop}/>
          <SuitesPage
            winTop={this.state.winTop}
            showModal={this.showModal.bind(this)}
            />
          <BuildingPage winTop={this.state.winTop}/>
          <CampusPage winTop={this.state.winTop}/>
          <ContactPage/>
       </div>
 	   );
   }
};

export default PageContainer;
