const {Button,
    Accordion,
    Panel,
    ListGroup,
    ListGroupItem,
    Modal,
    FormGroup,
    ControlLabel,
    FormControl,
    Glyphicon} = ReactBootstrap;

const defaultRecipes = [{name: "Spaghetti & Meat Sauce", ingredients: ["Spaghetti", "Meat Sauce"]}, {name: "Pumpkin Pie", ingredients: ["Crust", "Filling", "Whipped Cream"]}, {name: "Ice Cream", ingredients: ["Vanilla Ice Cream", "Chocolate Ice Cream", "Whipped Cream", "Chocolate Sauce", "Caramel"]}];

let recipes = localStorage.recipes ? JSON.parse(localStorage.recipes) : saveRecipes('recipes', defaultRecipes, 'Saving default recipes');

function saveRecipes(key, value, msg) {
  console.log(msg);
  localStorage.setItem(key, JSON.stringify(value));
  return JSON.parse(localStorage.getItem(key));    
}

class BaseComponent extends React.Component {
  _bind(...methods) {
    methods.forEach( (method) => this[method] = this[method].bind(this) );
  }
}

class App extends BaseComponent {
  constructor(props) {
    super(props);
    this._bind('actionPath', 'showModal');
    this.state = {recipes: recipes, showModal: false};
  }
  actionPath(actionKey) {
    if (actionKey === "close") {
      this.setState({showModal: false, editKey: ''});
    } else if (actionKey === "save") {
      this.setState({recipes: recipes, showModal: false, editKey: ''});
    } else {
      this.setState({showModal: true, editKey: actionKey});
    }
  }
  showModal() {
    this.setState({showModal: true, editKey: ''});
  }
  render() {
    return (
      <div>
        <h1>Recipe Box <Button id="add" bsStyle="btn btn-info" onClick={this.showModal}><Glyphicon glyph="plus" /> Add</Button></h1>
        <RecipeList recipes={this.state.recipes} onChange={this.actionPath}/>
        <AddModal editKey={this.state.editKey} show={this.state.showModal} onChange={this.actionPath} />
      </div>
    )
  }
}

class RecipeList extends BaseComponent {
  constructor(props) {
    super(props);
    this._bind('delete', 'edit');
  }
  delete(e) {
    const idx = e.target.id.substr(4);
    let newRecipes = recipes;
    newRecipes.splice(idx, 1);
    saveRecipes('recipes', newRecipes, 'Deleted recipe at index' + idx);
    ReactDOM.render(<App />, document.querySelector('#app'));
  }
  edit(e) {
    const idx = e.target.id.substr(5);
    this.props.onChange(idx);
  }
  render() {
    const recipePanels = this.props.recipes.map((recipe, idx) => 
      <Panel header={recipe.name} eventKey={idx}>
        <h4>Ingredients for {recipe.name}</h4>
        <IngredientList ingredients={recipe.ingredients} />
        <Button bsStyle="btn btn-lg btn-danger" id={"del-" + idx} onClick={this.delete}>Delete</Button>
        <Button bsStyle="btn btn-lg btn-info" id={"edit-" + idx} onClick={this.edit}>Edit</Button>
      </Panel>
    );
    return (
      <Accordion>
        {recipePanels}
      </Accordion>
    )
  }
}

class IngredientList extends BaseComponent {
  constructor(props) {
    super(props);
  }
  render() {
    const ingredientItems = this.props.ingredients.map(ingredient => <ListGroupItem>{ingredient}</ListGroupItem>)
    return (
      <ListGroup>
        {ingredientItems}
      </ListGroup>
    )
  }  
}

class AddModal extends BaseComponent {
  constructor(props) {
    super(props);
    this._bind('close', 'save');
  }
  close(e) {
    this.props.onChange(e.target.id);
  }
  save(e) {
    const newName = document.querySelector('#newName').value;
    const newIngredients = document.querySelector('#newIngredients').value.split(', ');
    let newRecipes = recipes;
    if (this.props.editKey !== '') {
      newRecipes[this.props.editKey] = {name: newName, ingredients: newIngredients};
    } else {
      newRecipes.push({name: newName, ingredients: newIngredients})
    }
 
    saveRecipes('recipes', newRecipes, 'Saving edited ' + newName);
    this.props.onChange(e.target.id);
    ReactDOM.render(<App />, document.querySelector('#app'));
  }
  render() {
    let title, name, ingredients
    if (this.props.editKey) {
      name = recipes[this.props.editKey].name;
      ingredients = recipes[this.props.editKey].ingredients.join(', ');
      title = "Editing " + name;
    } else {
      name = '';
      ingredients = '';
      title = "Add New Recipe";
    }
    return (
      <Modal show={this.props.show} onHide={this.close}>
        <Modal.Header>
          <Modal.Title>{title}</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <form>
            <FormGroup>
              <ControlLabel>Name:</ControlLabel>
              <FormControl componentClass="input" type="text" defaultValue={name} id="newName"/>
            </FormGroup>
            <FormGroup>
              <ControlLabel>Ingredients:</ControlLabel>
              <FormControl componentClass="textarea" id="newIngredients">{ingredients}</FormControl>
            </FormGroup>
          </form>
        </Modal.Body>
        <Modal.Footer>
          <Button bsStyle="btn btn-success" onClick={this.save} id="save" type="submit">Save</Button>
          <Button bsStyle="btn btn-warn" onClick={this.close} id="close">Cancel</Button>
        </Modal.Footer>
      </Modal>
    )
  }
}


ReactDOM.render(<App />, document.querySelector('#app'));