/****************
  COMPONENTS LIST
*****************
  #App component
	#Title component
	#ItemsAdd component
	#ItemsDisplay component
****************/

"use strict";

var FirebaseURL = new Firebase("https://logapp.firebaseio.com/");

// #App component
var App = React.createClass({
  displayName: "App",

  render: function render() {
    return React.createElement(
      "div",
      { className: "row col-xs-12 center" },
      React.createElement(Title, null),
      React.createElement(ItemsAdd, null),
      React.createElement(ItemsDisplay, null)
    );
  }
});

// #Title component
var Title = React.createClass({
  displayName: "Title",

  render: function render() {
    return React.createElement(
      "h1",
      { className: "col-xs-12" },
      "Logbook of Exersices"
    );
  }
});

// #ItemsAdd component
var ItemsAdd = React.createClass({
  displayName: "ItemsAdd",

  getInitialState: function getInitialState() {
    return {
      muscles: ["Back", "Chest", "Legs", "Arms", "Shoulders", "Other"],
      reps: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13+"],
      back: ["Deadlift", "Rod"],
      chest: ["Benchpress", "Chest2"],
      legs: ["Squats", "Legs2"]
    };
  },

  handleSubmit: function handleSubmit(e) {
    e.preventDefault();
    this.firebaseRef = FirebaseURL;
    this.firebaseRef.push({
      added: Date.now(),
      muscle: "test1",
      reps: "5",
      comment: "This was added to firebase!"
    });
  },

  render: function render() {
    var renderMuscles = this.state.muscles.sort().map(function (muscle) {
      return React.createElement(
        "label",
        { className: "btn btn-default", key: muscle },
        React.createElement("input", { type: "radio", id: muscle, name: muscle, value: muscle }),
        muscle
      );
    });
    var renderReps = this.state.reps.map(function (rep) {
      return React.createElement(
        "label",
        { className: "btn btn-default", key: rep },
        React.createElement("input", { type: "radio", id: rep, name: rep, value: rep }),
        rep
      );
    });
    return React.createElement(
      "div",
      { className: "col-xs-12" },
      React.createElement(
        "form",
        { role: "form", onSubmit: this.handleSubmit },
        React.createElement(
          "div",
          { className: "form-group" },
          React.createElement(
            "div",
            { className: "btn-group", "data-toggle": "buttons" },
            renderMuscles
          )
        ),
        React.createElement(
          "div",
          { className: "form-group" },
          React.createElement(
            "div",
            { className: "btn-group", "data-toggle": "buttons" },
            renderReps
          )
        ),
        React.createElement(
          "div",
          { className: "form-group" },
          React.createElement("input", { type: "text", className: "form-control", id: "comment", placeholder: "Enter comment", required: true })
        ),
        React.createElement("button", { type: "submit", className: "btn btn-primary glyphicon glyphicon-plus-sign" })
      )
    );
  }
});

// #ItemsDisplay component
var ItemsDisplay = React.createClass({
  displayName: "ItemsDisplay",

  mixins: [ReactFireMixin],

  removeItem: function removeItem(key) {
    this.firebaseRef = FirebaseURL.child(key);
    this.firebaseRef.remove();
  },

  componentWillMount: function componentWillMount() {
    this.bindAsArray(FirebaseURL, "items");
  },

  render: function render() {
    var _this = this;

    var myItems = this.state.items.sort().map(function (item) {
      return React.createElement(
        "div",
        { onClick: _this.removeItem.bind(_this, item[".key"]), className: "panel panel-info", key: item[".key"] },
        React.createElement(
          "div",
          { className: "panel-heading" },
          item[".key"]
        ),
        React.createElement(
          "div",
          { className: "panel-body" },
          item.muscle,
          " - ",
          item.reps,
          " - ",
          item.comment,
          " - ",
          item.uid
        )
      );
    });

    return React.createElement(
      "div",
      { className: "col-xs-12" },
      myItems
    );
  }
});

// App render
ReactDOM.render(React.createElement(App, null), document.getElementById('root'));