import React, { Component } from 'react';
import Header from './Header';
import Footer from './Footer';
import About from './About';
import Skills from './Skills';
import Vitae from './Vitae';
import Links from './Links';
import './Page.css';

class Page extends Component {
  constructor(props) {
    super(props);
    this.handleScroll = this.handleScroll.bind(this);
    this.state = {
      active: 0,
      sections: [],
      sections_data: [
        { title: 'About me', },
        { title: 'Skills', },
        { title: 'Vitae', },
        { title: 'Links', },
      ],
    }
  }

  componentDidMount() {
    const sections = document.getElementsByClassName('section');
    this.setState({
      sections: sections,
    });
    window.addEventListener('scroll', this.handleScroll);
  }

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

  handleScroll(event) {
    let active = null;
    for (var i=0; i<this.state.sections.length; i++) {
      if (document.documentElement.scrollTop >=
        this.state.sections[i].offsetTop) {
        active = i;
      }
      else {
        break;
      }
    }
    this.setState({
      active: active,
    });
  }

  handleShow(section) {
    this.refs[section].scrollIntoView({
      block: 'start',
      behavior: 'smooth',
    });
  }

  render() {
    return (
      <div id="page">
        <Header
          sections={this.state.sections_data}
          active={this.state.active}
          onClick={(section) => this.handleShow.bind(this, section)}
        />
        <div id="section1" ref="1" className="section">
          <About />
        </div>
        <div id="section2" ref="2" className="section">
          <Skills />
        </div>
        <div id="section3" ref="3" className="section">
          <Vitae />
        </div>
        <div id="section4" ref="4" className="section">
          <Links />
        </div>
        <Footer />
      </div>
      );
  }
}

export default Page;
// vim: set ts=2 sw=2 et: