import React, { Component } from 'react';
import AlbumSelector from './AlbumSelector.js';
import '../css/AlbumManagerOverlay.css';

// AlbumManagerOverlay
export default class AlbumManagerOverlay extends Component {
  render() {
    return (
      <div className="modal fade" id="albumManagerOverlay" tabIndex="-1" role="dialog" aria-labelledby="album-manager-overlay-label">
        <div className="modal-dialog" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 className="modal-title" id="album-manager-overlay-label">Add to Album</h4>
            </div>
            <div className="modal-body">
              <AlbumManager albums={this.props.albums}/>
            </div>
            <div className="modal-footer">
              <button type="button" className="btn btn-default" data-dismiss="modal">Cancel</button>
              <button type="button" className="btn btn-primary">Save</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

// AlbumManager
class AlbumManager extends Component {

  constructor(props) {
    super(props);
    // Keep our state here so NewAlbumInput will receive 
    // updates when the AlbumSelector/state changes
    this.state = {
      selectedAlbum: {name: "", id: "" }
    };
  }

  updateSelectedAlbum(album) {
    this.setState({ selectedAlbum: album });
  }

  render() {
    var albumManager;

    // If there are albums show the album selector
    if(this.props.albums.length > 0) {
      albumManager = 
        <div className="album-manager">
          <div className="description">
            Add selected pictures to which album?
          </div>

          <div className="input-group">
            <div className="input-group-btn">
              <AlbumSelector updateSelectedAlbum={this.updateSelectedAlbum.bind(this)} albums={this.props.albums} text="Select Album"/>
            </div>
            <NewAlbumInput albumName={this.state.selectedAlbum.name} albumID={this.state.selectedAlbum.id}/>
          </div>
        </div>;

    } else {
      // There are no albums so ask the user to create a new album
      albumManager = 
        <div className="album-manager">
          <div className="description">Enter an album name:</div>
          <div className="input-group">
            <NewAlbumInput albumName="" albumID=""/>
          </div>
        </div>;
    }

    return albumManager;
  }
}

// NewAlbumInput
class NewAlbumInput extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedAlbum: {name: "", id: "" }
    };

    this.handleChange = this.handleChange.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    // We received an album from the parent so the AlbumSelector was used.
    // We should override our selectedAlbum.
    this.setState({
      selectedAlbum: {name: nextProps.albumName, id: nextProps.albumID}
    });
  }

  handleChange(event) {
    // The user is typing
    this.setState({selectedAlbum: {name: event.target.value, id: "" } });
  }

  render() {
    return (
      <input type="text" className="form-control" aria-label="Select album"
             onChange={this.handleChange} value={this.state.selectedAlbum.name}
              data-album-id={this.state.selectedAlbum.id}/>
    )
  }
}


@@ -209,16 +209,253 @@
 onent %7B%0A
+  constructor(props) %7B%0A    super(props);%0A    this.state = %7B%0A      selectedAlbum: %7Bname: %22%22, id: %22%22 %7D%0A    %7D;%0A  %7D%0A%0A  close(save)%7B%0A    // Clear the album for the next modal open%0A    this.setState(%7BselectedAlbum: %7Bname: %22%22, id: %22%22%7D %7D);%0A  %7D%0A%0A
   render
@@ -903,18 +903,16 @@
         
-  
 %3Ch4 clas
@@ -1096,16 +1096,57 @@
 .albums%7D
+ selectedAlbum=%7Bthis.state.selectedAlbum%7D
 /%3E%0A     
@@ -1286,16 +1286,55 @@
 =%22modal%22
+ onClick=%7Bthis.close.bind(this, false)%7D
 %3ECancel%3C
@@ -1405,16 +1405,54 @@
 primary%22
+ onClick=%7Bthis.close.bind(this, true)%7D
 %3ESave%3C/b
@@ -1641,113 +1641,165 @@
     
-// Keep our state here so NewAlbumInput will receive %0A    // updates when
+this.state = %7B%0A      selectedAlbum: %7Bname: %22%22, id: %22%22 %7D%0A    %7D;%0A  %7D%0A%0A  // AlbumManagerOverlay is resetting
  the 
-A
+a
 lbum
-Selector/state changes
+ %0A  componentWillReceiveProps(nextProps) %7B
 %0A   
@@ -1797,39 +1797,40 @@
 ps) %7B%0A    this.s
+etS
 tate
- = 
+(
 %7B%0A      selected
@@ -1840,40 +1840,90 @@
 um: 
-%7Bname: %22%22, id: %22%22 %7D
+nextProps.selectedAlbum
 %0A    %7D
+)
 ;%0A  %7D%0A%0A
+  // We received an album from AlbumSelector%0A
   up

Clear album manager on modal close