const {Component} = React;

const DATA = {
  "1880": { pirates: 20000, temperature: 14.5 },
  "1920": { pirates: 15000, temperature: 15.0 },
  "1940": { pirates: 5000, temperature: 15.3 },
  "1980": { pirates: 400, temperature: 15.7 },
  "2000": { pirates: 17, temperature: 16 },
}

// immagini dei pirati
const URLS = {
  20000: "https://res.cloudinary.com/dusxjrqiu/image/upload/v1452510351/20000.png",
  15000: "https://res.cloudinary.com/dusxjrqiu/image/upload/v1452678308/15000.png",
  5000: "https://res.cloudinary.com/dusxjrqiu/image/upload/v1452678308/5000.png",
  400: "https://res.cloudinary.com/dusxjrqiu/image/upload/v1452678307/400.png",
  17: "https://res.cloudinary.com/dusxjrqiu/image/upload/v1452678129/17.png"
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedYear: null
    }
  }
  
  handleClick(year, e) {
    e.preventDefault()
    this.setState({ selectedYear: year})
  }
  
  renderYearbuttons(year) {
    let appYearsItem = classNames(
      "app__years__item",
      { "app__years__item--active": year === this.state.selectedYear }
    )
    
    return (
      <div
        key={year}
        className={ appYearsItem }
        onClick={ this.handleClick.bind(this, year) }
        >
        { year }
      </div>
      )
  }

  render() {
    let app = classNames(
      "app",
      this.state.selectedYear ? DATA[this.state.selectedYear].className : ""
    )
    
    return (
      <div className={ app }>
        <div className="app__years">
          { Object.keys(DATA).map(this.renderYearbuttons.bind(this)) }
        </div>
        {
          // Un componente viene chiamato con la stessa sintassi di un tag html.
          // Le props e i loro contenuti vengono aggiunti in forma di attributi.
          // In questo caso, il contenuto delle props è lo stato del componente padre, App.
        }
        {
          // Se la condizione (in questo caso lo state) è true allora viene renderizzato il contenuto tra tonde
          this.state.selectedYear && (
            <Child
            pirates={ DATA[this.state.selectedYear].pirates }
            temperature={ DATA[this.state.selectedYear].temperature }
            />
          )
        }
      </div>
    );
  }
};


// Child ha soltanto il compito di mostrare un certo tipo di contenuto in funzione
// delle props che riceve da App. Le props vengono chiamate attraverso this.props.nomeProp

class Child extends Component {

  render() {
    let piratesStyle = {
      backgroundImage: 'url(' + URLS[this.props.pirates] + ')'
    }
    
    return (
      <div className="child">
        <div className="child__data">
          {
            (this.props.temperature) && (
              `${this.props.temperature}° C`
            )
          }
          <br />
          {
            (this.props.pirates) && (
              `${this.props.pirates} pirates`
            )
          }
        </div>
         {
          (this.props.pirates) && (
            <div
              className="child__pirates"
              style={ piratesStyle }
              >
            </div>
          )
        }
      </div>
    )
  }
}
 
ReactDOM.render(
  <App />, 
  document.getElementById('app'));