/*const { Accordion, Alert, Panel, ListGroup, ListGroupItem, Input, Glyphicon, Button, ButtonToolbar, Modal, OverlayTrigger, Popover } = ReactBootstrap;*/

import { Accordion, Alert, Panel, ListGroup, ListGroupItem, Input, Glyphicon, Button, ButtonToolbar, Modal, OverlayTrigger, Popover } from 'react-bootstrap';

var recipes = (localStorage.getItem("recipeBox") !== null) ? JSON.parse(localStorage["recipeBox"]) : [
        {title: "Pizza", ingredients: ["Cheese", "Tomato Sauce"]},
        {title: "Mac & Cheese", ingredients: ["Mac", "Cheese"]}
      ];

class RecipeBox extends React.Component {
  render() {
    var recipeList = recipes.map(function(recipes, index) {
      return <RecipeItem key = {index} recipe = {recipes} />
    });
    
    return(
      <div>{recipeList}</div>
    )
  }
}

class RecipeItem extends React.Component {
    constructor(props) {
      super(props);
      
      this.state = {
        isEditing: false,
        btnDisabled: false
      }
    }
  
    removeRecipe() {
      console.log(recipes);
      for (var i = recipes.length - 1; i > -1; i--) {
        if (recipes[i].title === this.props.recipe.title) {
          recipes.splice(i, 1);
          console.log(recipes);
        }
      }
    localStorage.setItem("recipeBox", JSON.stringify(recipes));
    React.render(<Application />, document.getElementById("app"));
  }
  
  editRecipe() {
    // console.log(document.getElementById("title2").value);
    // console.log(document.getElementById("ingredients2").value.split(","));
    this.setState({isEditing: false});
    
    var newTitle = document.getElementById("title2").value;
    var newIngredients = document.getElementById("ingredients2").value.split(",");
    
    var newRecipe = {title: newTitle, ingredients: newIngredients};
    
    for (var i = 0; i < recipes.length; i++) {
      if (recipes[i].title === newRecipe.title) {
        recipes.splice(i, 1);
        recipes.splice(i, 0, newRecipe);
      }
    }
    
    localStorage.setItem("recipeBox", JSON.stringify(recipes));
    React.render(<Application />, document.getElementById("app"));
  }
  
  showEditModal() {
    this.setState({isEditing: true});
  }
  
  hideEditModal() {
    this.setState({isEditing: false});
  }
  
  render() {
    return(
      <div>
        <Modal show={this.state.isEditing} hide={this.hideEditModal} autoFocus="true">
          <Modal.Header>
            <Modal.Title>Edit Recipe</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <form>
              {this.state.btnDisabled === true ? <Alert bsStyle="danger">
    <strong>Small Problem!</strong> You already have {document.getElementById("title2").value}
  </Alert> : ""}
              <Input type="text" label="Recipe" placeholder="Recipe Name" id="title2" value={this.props.recipe.title}/>
              <Input type="textarea" label="Ingredients (seperate with commas)" placeholder="Beef, Pork, Chicken" id="ingredients2" defaultValue={this.props.recipe.ingredients} autoFocus />
            </form>
          </Modal.Body>
          <Modal.Footer>
            <Button bsStyle="warning" onClick={this.hideEditModal.bind(this)}>Close</Button>
            <Button bsStyle="success" onClick={this.editRecipe.bind(this)}>Edit Recipe</Button>
          </Modal.Footer>
        </Modal>
        <Panel collapsible header={this.props.recipe.title} eventKey="1">
          <ListGroup fill>
            {this.props.recipe.ingredients.map((ingredient, i) => <ListGroupItem key={i}>{ingredient}</ListGroupItem>)}
          </ListGroup>
          <ButtonToolbar>
            <Button bsStyle="warning" onClick={this.showEditModal.bind(this)}>Edit</Button>
            <Button bsStyle="danger" onClick={this.removeRecipe.bind(this)}>Delete</Button>
          </ButtonToolbar>
        </Panel>
      </div>
    )
  }
}

class Application extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = (localStorage.getItem("recipeBox") !== null) ? {
      isCreating: false,
      btnDisabled: false
      //recipes: JSON.parse(localStorage["recipeBox"])
    } : {
      isCreating: false,
      btnDisabled: false
      /*recipes: [
        {title: "Pizza", ingredients: ["Cheese", "Tomato Sauce"]},
        {title: "Mac & Cheese", ingredients: ["Mac", "Cheese"]}
      ]*/
    }
  }
  
  showAddModal() {
    this.setState({isCreating: true});
  }
  
  hideAddModal() {
    this.setState({isCreating: false,
                  btnDisabled: false
                  });
  }
  
  addNewRecipe() {
    console.log(document.getElementById("title").value);
    console.log(document.getElementById("ingredients").value.split(","));
    this.setState({isCreating: false});
    
    var newTitle = document.getElementById("title").value;
    var newIngredients = document.getElementById("ingredients").value.split(",");
    
    var newRecipe = {title: newTitle, ingredients: newIngredients};
    
    for (var i = recipes.length - 1; i > -1; i--) {
      if (recipes[i].title === newRecipe.title) {
        console.log("DUPE!");
        return;
      }
    }
    recipes.push(newRecipe);
    localStorage.setItem("recipeBox", JSON.stringify(recipes));
  }
  
  checkDupe(e) {
    console.log(e.target.value);
    
    for (var i = 0; i < recipes.length; i++) {
      if (recipes[i].title === e.target.value) {
        this.setState({btnDisabled: true});
        return;
      }
      else {
        this.setState({btnDisabled: false});
      }
    }
  }
  
  render() {
    return(
      <div className="container">
        <Modal show={this.state.isCreating} hide={this.hideAddModal} autoFocus="true">
          <Modal.Header>
            <Modal.Title>Add Recipe</Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <form>
              {this.state.btnDisabled === true ? <Alert bsStyle="danger">
    <strong>Small Problem!</strong> You already have {document.getElementById("title").value}
  </Alert> : ""}
              <Input type="text" label="Recipe" placeholder="Recipe Name" id="title" onChange={this.checkDupe.bind(this)} autoFocus />
              <Input type="textarea" label="Ingredients (seperate with commas)" placeholder="Beef, Pork, Chicken" id="ingredients" />
            </form>
          </Modal.Body>
          <Modal.Footer>
            <Button bsStyle="warning" onClick={this.hideAddModal.bind(this)}>Close</Button>
            <Button bsStyle="success" onClick={this.addNewRecipe.bind(this)} disabled={this.state.btnDisabled}>Add Recipe</Button>
          </Modal.Footer>
        </Modal>
        <h1 className="text-center">Recipe Box</h1>
        <div className="jumbotron" id="outerBox">
          <RecipeBox recipes={recipes}/>
        </div>
        
        <div className="text-center">
          <Button bsStyle="primary" bsSize="large" onClick={this.showAddModal.bind(this)}>Add Recipe</Button>
        </div>
      </div>
    );
  }
}

React.render(<Application />, document.getElementById("app"));