import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      albums: null,
    };
  }
  componentDidMount() {
    fetch(process.env.PUBLIC_URL + "/photosync/albums.json")
      .then(res => res.json())
      .then(
        (result) =>  this.setState({albums: result}),
        (error) => this.setState({error}),
      );
  }
  render() {
    let {error, albums} = this.state;
    console.log(this.state);
    let content;
    if (error !== null) {
      content = <h2>Error: {JSON.stringify(error)}</h2>;
    } else if (albums !== null) {
      console.log(albums);
      content = albums.map((a) => {
        let thumb = <img className="mr-3"/>;
        if (a.coverPhotoBaseUrl !== undefined) {
          thumb = <img src={ a.coverPhotoBaseUrl + "=w64-h64-c" } className="mr-3" alt={ a.title }/>;
        }
        return <div key={ a.id } className="media">
          <a href={ a.productUrl }>
            {thumb}
          </a>
          <div className="media-body">
            <h5 className="mt-0">{ a.title }</h5>
            { a.mediaItemsCount } photos
          </div>
        </div>
      });
    } else {
      content = <h2>Loading...</h2>;
    }

    return (
      <div className="container">
      { content }
      </div>
    );
  }
}

export default App;