import React from 'react';
import {
  HashRouter as Router,
  Switch,
  Route,
  Link,
  useParams
} from "react-router-dom";

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 + `/api/album/${album}`)
      .then(res => res.json())
      .then(
        (result) =>  this.setState({media_items: result}),
        (error) => this.setState({error}),
      );
  }
  render() {
    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={ `/api/image/${mi.id}?w=256&h=256` } 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 + "/api/albums")
      .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.coverPhotoMediaItemId !== undefined) {
          img = <img height="256" width="256" src={ `/api/image/${a.coverPhotoMediaItemId}?w=256&h=256` } 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>;
    }
  }
}

const AlbumRoute = () => {
  // We can use the `useParams` hook here to access
  // the dynamic pieces of the URL.
  let { album_id } = useParams();
  return <Album album={album_id} />;
}

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;

    return (
      <div className="container">
        <Router>
          <Switch>
            <Route exact path="/">
              <AlbumIndex />
            </Route>
            <Route exact path="/:album_id">
              <AlbumRoute />
            </Route>
          </Switch>
        </Router>
      </div>
    );
  }
}

export default App;