import React, { useState, useEffect } from "react";

import WaveBalls from "./WaveBalls.js";
import AnimakitExpander from "animakit-expander";

import "./App.css";

const sections = [
  "Platforms",
  "Drivers",
  "Compute",
  "Media",
  "3D",
  "Solutions"
];

class Header extends React.Component {
  render() {
    return (
      <div className="Header">
        <Logo/>
        <div className="Pages">
        {
            sections.map((section) =>
              <div key={ section }>{ section }</div>
            )
        }
        </div>
      </div>
    );
  }
}

class Logo extends React.Component {
  render() {
    return <div className="Logo"></div>
  }
}

class Footer extends React.Component {
  render() {
    return (
      <div className="Footer">
        Copyright 2019 Intel Corporation
      </div>
    );
  }
}

class Body extends React.Component {
  static defaultProps = {
    topics: [ {
      title: "Agama",
      stories: [ {
        title: "About Agama",
        content: "Agama is the quarterly distribution of Intel graphics projects for Linux, packaged, validated, and made available from a single repository."
      }]
    }, {
      title: "Media",
      stories: [ {
        title: "About Media",
        content: "Media capabilities for Intel graphics cards on Linux are provided by Intel's Media packages."
      } ]
    }, {
      title: "Compute",
      stories: [ {
        title: "About Compute",
        content: "Compute capabilities for Intel graphics cards on Linux are provided by Intel's Open CL project: Neo."
      } ]
    }, {
      title: "3D",
      stories: [ {
        title: "About 3D",
        content: "3D capabilities for Intel graphics cards on Linux are provided by Mesa."
      } ]
    }, {
      title: "Solutions",
      stories: [ {
        title: "About Solutions",
        content: "Turn-key containers ready to rock."
      } ]
    } ]
  };

  constructor(props) {
    super(props);
    this.props.topics.forEach((topic) => {
      for (var i = 0; i < 10; i++) {
        topic.stories.push({
          title: "Title #" + (i + 1),
          content: "Content for #" + (i + 1)
        });
      }
    });

    this.topicClicked = this.topicClicked.bind(this);
    this.state = {
      topic: 0,
      story: 0
    }
  }

  topicClicked(index) {
    this.setState({
      topic: index,
      story: 0
    });
  }

  storyClicked(index) {
    this.setState({ story: index });
  }

  componentDidMount() {
    console.log("App.mounted");
    sections.forEach((section) => {
    });
  }

  render() {
    const topic = this.props.topics[this.state.topic],
      story = topic.stories[this.state.story];

    console.log(this.state.topic);
    return (
      <div className="Body">
        <div className="Page">
          <div className="Index" target="Content">
          {
            this.props.topics.map((topic, topicIndex) =>
              <div key={ "topic-" + topicIndex }>
                <div
                  className={ "topic " + ((this.state.topic == topicIndex) ? "active" : "inactive") }
                  onClick={() => this.topicClicked(topicIndex)}>{topic.title}</div>
                <AnimakitExpander expanded={ (this.state.topic == topicIndex) ? true : false }>
                {
                  topic.stories.map((story, storyIndex) => 
                    <div
                      className={ "story " + ((this.state.topic == topicIndex && this.state.story == storyIndex) ? "active" : "inactive") }
                      onClick={() => this.storyClicked(storyIndex)}
                      key={ "story-" + topicIndex + "-" + storyIndex }>{story.title}</div>
                  )
                }
                </AnimakitExpander>

              </div>
            )
          }
          </div>
          <div className="Content">
            <b>{ story.title }</b><br></br>
            <div>{story.content}</div>
          </div>
        </div>
        <WaveBalls/>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Header/>
        <Body/>
        <Footer/>
      </div>
    );
  }
}

export default App;
