import React from 'react';
import './App.css';
import * as historyData from './history.json';
// import Event from './Event'

class App extends React.Component {
  state = {
    events: historyData.result.events
  }

  search = (event) => {
    event.preventDefault()
    const query = event.target.parentElement.children[0].value
    // console.log(this.state.events)
    // 1. create a filtered list (array) based on the search query, using the .filter method on this.state.events, .includes on the description string
    const filtered = this.state.events.filter((event) => {
      return event.description.includes(query)
    })
     // 2. setState to be the filtered list
    this.setState({
      search: filtered
    })
    // 3. render the filtered array in render
  }

  render() {
    const { search } = this.state
    const centerHeading = {
      textAlign: 'center',
      color: 'red'
    }
    return (
      <>
        <h1 style={centerHeading}>Search for 20th Century Events</h1>
        <form>
          <input type="text" name="search" id="search"/>
          <input onClick={this.search} type="submit" value="Submit" id="submit" />
        </form>
        {search ? search.map((event, index) => {
          return (
            <>
              <h3>{event.date}</h3>
              <p key={index}>{event.description}</p>
            </>
          )
        }) : null}
      </>
    );
  }
}

// stateful component
// class, like object orientated in python
// using render(), which is a lifecycle method, kind of like an instance method in python

export default App;