import React, { Component } from 'react';
import './App.css';
import UniqueId from 'react-html-id';



class App extends Component {

  constructor(props) {
    super(props);
    // UniqueId.bind(this);
    this.state = {
      results: [
        { id: UniqueId.nextUniqueId(), artistName: "Metallica", artistId: 3996865 }
      ],
      searchWord: ""
    }
  }

  setSearchWord = (x) => {
    this.setState({ searchWord: x.target.value })
  }


  getInfo = () => {
    let api_url = `https://itunes.apple.com/search?term=${this.state.searchWord}&entity=musicArtist&limit=10`;
    fetch(api_url)
      .then(res => res.json())
      .then(json => {
        this.setState({ results: json.results });
      })
      .catch(error => console.error(error));
  }

  getResults = () => {

    let tenArtistsArr = [];
    let items = this.state.results;

    for (let i = 0; i < items.length; i++) {
      // console.log(items[i].artistName);
      tenArtistsArr.push(items[i].artistName);
    }

    return tenArtistsArr;

  }


  getIDs = () => {

    let artistIdArr = [];
    let items = this.state.results;

    for (let i = 0; i < items.length; i++) {
      // console.log(items[i].artistId);
      artistIdArr.push(items[i].artistId);
    }

    return artistIdArr;

  }


  deleteElements = () => {

  }

  render() {

    const tenArtistsArr = this.getResults();
    const listItems = tenArtistsArr.map((results) => <li>{results}</li>);

    return (
      <div className="App">
        <div>
          <input type="text" onChange={this.setSearchWord} placeholder="Search artist" />
          <button onClick={this.getInfo}>Search</button>
          <button onClick={this.deleteElements}>DELETE</button>

          <div id="searchResults"></div>
          <ul>{listItems}</ul>
        </div>
      </div>
    )
  }
}

export default App;