const Data = {
  projects: [
    { name: "project 1" },
    { name: "project 2" },
    { name: "project 3" },
    { name: "project 4" },
    { name: "project 5" }
  ]
};

const menuTl = new TimelineMax({ paused: true, reversed: true });

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      menuActive: false,
      allProjects: Data.projects,
      csPreviewActive: false,
      activePanel: null,
      openedCases:  null
    };
    
  this.togglePreviewCase = this.togglePreviewCase.bind(this);
  this.previewCaseReverseHandler = this.previewCaseReverseHandler.bind(this);
    // store the timeline in the component because we need to access
    // a callback that's inside the component in the reverse complete event
    this.previewCaseTl = new TimelineMax({
      paused:true,
      reversed: true,
      onReverseComplete: this.previewCaseReverseHandler
    });
    
    // create a master time line to animate both timeline on close
    this.closeAllTl = new TimelineMax({
      paused: true
    })
  }

  componentDidMount() {
    this.slideMenu();
  }
  
  closeAll = (e) => {
    const { activePanel, menuActive, csPreviewActive} = this.state;
    
    this.setState({ 
      activePanel: null,
      menuActive: false,
      csPreviewActive: false
    });
    
     this.previewCaseTl.clear();
    
    //My problem is here, I dont understand why menuTl.reverse is not triggered after the this.previewCase and need a second clikc on a menu button???
     this.closeAllTl
        .add(this.previewCase())
        .add(menuTl.reverse())
        .play();
  }

  // bring the project to view//
  slideMenu = () => {
    var projects = document.getElementsByClassName("project");
    //transform the HTMLcollection to an array
    var projects = Array.from(projects);
    menuTl.set(".tomsah-project", { zIndex: 0 }).staggerTo(projects, 1, {
      cycle: { x: ["56%","64%", "72%", "80%", "88%"] },
      ease: Power2.easeInOut
    });
    return menuTl;
  };

  toggleMenu = e => {
    e.preventDefault();
    const {openedCases, 
           menuActive, 
           activePanel,
           csPreviewActive} = this.state;
    
    if(menuTl.reversed()) {
      menuTl.play();
      this.setState({csPreviewActive : true});
    } else if( !menuTl.reversed() && activePanel !== null) {
      this.closeAll();
    } else {
       menuTl.reverse();
       this.previewCaseTl.clear();
       this.setState({
        menuActive: !menuActive
      });
    }
  };

  previewCase = (id) => {
    var element = `#${id}`;
    const { openedCases, allProjects} = this.state;
    
    // transform this.refs to an array of the projects
    var caseList = []; 
    Object.keys(this.refs).forEach((key, index) => {
      //var previousCaseList = animatedList;
      const ref = this.refs[key];
      if(ref.id !== openedCases && ref.id !== "" ) {
         caseList.push(`#${ref.id}`);
      }
    });
    //get the index of the click element in caseList array
    var idIndex = caseList.indexOf(element);
    //get the length of the previous array of animated panel
    if(openedCases !== null) {
      var openedCasesLength = openedCases.length;
    }  
    // create a new array of panels that need animatiom
    var animatedArray = caseList.slice(openedCasesLength, idIndex + 1)
    //keep track of all the previous open panel
    var previousAnimatedArray = caseList.slice(0, idIndex + 1);
    //reverse the panels
    if( idIndex < openedCasesLength - 1) {
      var reversePanels = caseList.slice(idIndex + 1, openedCasesLength)
     this.previewCaseTl
        .staggerTo(reversePanels, 1, {x: '+=50%', ease:              Power2.easeInOut})
        .reverse(); 
    } 
   
    //stagger Method
    this.previewCaseTl
        .staggerTo(animatedArray, 1, {x: '-=50%', ease:              Power2.easeInOut})
        .play(); 
    // set the state with the new array of animetd panel
    this.setState({ openedCases: previousAnimatedArray });
  };

  togglePreviewCase = e => {
    const { activePanel, csPreviewActive } = this.state;
    const { id } = e.currentTarget;
    e.preventDefault();
   
    // first check if a panel is active
    if ( activePanel ) {           
      // check if the id is the same of the active panel
      if ( activePanel === id ) {
        console.log('open the project full screen');
        // the current panel is the active one, set the
        // state prop to null
        this.setState({ activePanel: id });
      } else if ( activePanel !== id) {
        // the current panel is not the active update the state with the new id
        this.setState({ activePanel: id });
      }
      
           
      this.previewCase(id);
    } else {
      // there's no active panel
      // set the active panel
      this.setState({csPreviewActive: true});
      this.setState({ activePanel: id }); 
      // since there's no active panel the timeline is empty
      // add the instances to the timeline and play it
      this.previewCase(id);
    }
  };



  // the reverse complete callback
  // used to create the new instance of the panel tween
  // if there's an active panel
  previewCaseReverseHandler(){
    const { activePanel } = this.state;
    // if there's an active panel in the state, clear the timeline and
    // create a new instance with the active panel
    if ( activePanel ) {
     this.previewCaseTl.clear();
     this.previewCase(activePanel);
    } else {
      this.previewCaseTl.clear();
     console.log('nothing to see');
    }
  }

  render() {
    const { allProjects } = this.state;
    return (
      <div className="main">
        <button onClick={this.toggleMenu} id='toggleMenu'> menu </button>
        <div className="projects" ref="projects">
          {allProjects.map((project, index) => {
            return (
              <div
                className="project"
                ref={`CaseStudy${index}`}
                key={index}
                id={`project-${index + 1}`}
                onClick={this.togglePreviewCase}
              >
                <span> {project.name} </span>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}

/*
 * Render the above component into the div#app
 */

ReactDOM.render(<App />, document.getElementById("app"));