import React from 'react';
import SingleLetterHoverWord from './Effects/SingleLetterHoverWord';

class NavigationMenu extends React.Component {

  state = {
    fixedTop: false
}

  constructor(props)
  {
    super(props);
    this.observerCallback = this.observerCallback.bind(this);

    this.setState({fixedTop: false});
    const options = { threshold: 0.01 };
    this.observer = new IntersectionObserver(this.observerCallback, options);
    this.selfRef = React.createRef();
  }

  observerCallback(entry)
  {
      //console.log(entry[0]);
      //console.log(entry[0].target);
      // if(this.state.fixedTop)
      // {
      //   this.setState({fixedTop: entry[0].intersectionRatio > 0 })
      // }
      // else
      // {
      //   this.setState({fixedTop: entry[0].intersectionRatio < 0.2 })
      // }
  }

  
  componentDidMount() {
    this.observer.observe(this.selfRef.current);  
}

  render() {
      let dispProjects = []
      for(const [index, value] of this.props.projects.details.entries())
        {
          var itemClass = "menu_item";
          if (this.props.visible && value.fr == this.props.visible.fr)
            {
             itemClass += " expanded"; 
            }
          dispProjects.push(
            <a href={"#"+value.name} class={itemClass} proj={value.fr} key={index} parentComponent={this}><div>{value.fr}</div></a>
          );
        }
      
        return <div 
          class={this.state.fixedTop ? 'fixed_nav_menu' : 'nav_menu'} 
          ref={this.selfRef}>
          <div >
            {dispProjects}
          </div>
        </div>;
    }
  }

export default NavigationMenu