import React from 'react';
import './APIRequest.css';

export default class APIRequest extends React.Component {
  constructor(props) {
    super(props); 
    this.state = {
      img: "",
      maxNum: 0,
      num: "",
      alt: "",
      title: "Loading Comic..."
    };
  }
  
  componentDidMount() {
    this.fetchComic().catch(e => {
      console.error("Failed to fetch initial comic! : ", e);
    });
  }
  
  updateComicFromAPI(data) {
    this.setState(old => {
      if(old.num !== "" && old.num !== data.num) return {};
      return {
        img: data.imgRetina ? data.imgRetina : data.img,
        maxNum: data.num > old.maxNum ? data.num : old.maxNum,
        num: data.num,
        alt: data.alt,
        title: data.title
      };
    });
  }
  
  fetchComic() {
    return fetch(`https://xkcd.now.sh/${this.state.num}`).then(
      response => response.json()
    ).then(x => this.updateComicFromAPI(x));
  }
  
  fetchNext() {
    this.setState(old => ({num: ++old.num}), () => {
      this.fetchComic().catch( err => {
        console.error("Error fetching next comic: ", err);
      });
    });
  }
  fetchPrevious() {
    this.setState(old => ({num: --old.num}), () => {
      this.fetchComic().catch( err => {
        console.error("Error fetching prev comic: ", err);
      });
    });
  }
    
  render() {
    const s = this.state;
    const prev = s.num > 0 ? 
        <button className="btn" onClick={() => this.fetchPrevious()}>Previous</button> :
        "";
    const next = s.num < s.maxNum ?
        <button className="btn" onClick={() => this.fetchNext()}>Next</button> :
        "";
    return <section className="card mt-3 comic-component" >
      <div className="card-body">
        <p>This interviewer requested I write a component that makes an API
          call and displays it.  I did a bit more than that since it was more
          fun and I think better deomnstrated my ability to make API calls.</p>
        <div className="comic-nav">{prev}{next}</div>
        <h5 className="card-title">{s.title}</h5>
        { s.img ? <img className="comic-image" src={s.img} title={s.alt} /> : "" }
        <p>All comics from <a href="https://Xkcd.com">xkcd web comic</a></p>
      </div>
    </section>;
  }
}