import React from 'react';

import './App.css';

class Album extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      media_items: null,
    };
  }
  componentDidMount() {
    let {album} = this.props;
    fetch(process.env.PUBLIC_URL + `/photosync/${album}/album.json`)
      .then(res => res.json())
      .then(
        (result) =>  this.setState({media_items: result}),
        (error) => this.setState({error}),
      );
  }
  render() {
    let {album} = this.props;
    let {error, media_items} = this.state;
    console.log(this.state);
    if (error !== null) {
      return <h2>Error: {JSON.stringify(error)}</h2>;
    } else if (media_items !== null) {
      console.log(media_items);
      return media_items.map((mi) => {
        // TODO(wathiede): use coverPhotoMediaItemId and fetch from a
        // locally cached image.
        return <figure key={ mi.id } className="figure">
          <img height="256" width="256" src={ `/photosync/images/${mi.id}/${mi.filename}?thumb` } className="mr-3" alt={ mi.filename }/>
          <figcaption className="figure-caption">
          <a key={ mi.id } href={ mi.productUrl }>
            <p className="text-truncate">{ mi.filename}</p>
          </a>
          </figcaption>
        </figure>
      });
    } else {
      return <h2>Loading...</h2>;
    }
  }
}

class AlbumIndex 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;
    if (error !== null) {
      return <h2>Error: {JSON.stringify(error)}</h2>;
    } else if (albums !== null) {
      console.log(albums);
      return albums.map((a) => {
        let img = <img src="https://via.placeholder.com/256x128" className="mr-3" alt="unset"/>;
        if (a.coverPhotoBaseUrl !== undefined) {
          img = <img src={ a.coverPhotoBaseUrl + "=w256" } className="mr-3" alt={ a.title }/>;
        }

        let figure = <figure key={ a.id } className="figure">
          {img}
          <figcaption className="figure-caption">{ a.title || "No title" } - { a.mediaItemsCount || 0 } photos </figcaption>
        </figure>;
        return <a key={ a.id } href={ '#' + a.id }>
            { figure }
          </a>
      });
    } else {
      return <h2>Loading...</h2>;
    }
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      curAlbum: window.location.hash,
    };
  }
  render() {
    let {curAlbum} = this.state;
    console.log(this.state);
    let content;
    if (curAlbum) {
      content = <Album album={ curAlbum.slice(1) } />
    } else {
      content = <AlbumIndex />;
    }

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

export default App;