/** @jsx m */

"use strict";
require("./StudyFinder.scss");

var _ = require("underscore");
var m = require("mithril");
var SearchResults = require("./SearchResults.js");
var ArticleCollection = require("../collections/ArticleCollection.js");
var Spinner = require("./Spinner.js");
var Tooltip = require("./Tooltip.js");
var Popover = require("./Popover.js");
var cx = require("../utils/ClassSet.js");

var StudyFinder = {};

StudyFinder.controller = function(options) {
  this.search = m.prop("");
  this.submitted = m.prop(false);
  this.matchingArticles = new ArticleCollection();
  this.selectedArticle = null;
  this.selectStudy = options.selectStudy;
  this.parentStudy = options.parentStudy;


  var _this = this;
  this.selectArticle = function(article) {
    return function() {
      if (_this.selectedArticle === article) {
        _this.selectedArticle = null;
      } else {
        _this.selectedArticle = article;
        article.get("studies").fetch();
      }
    };
  };

  this.runSearch = function(e) {
    e.preventDefault();
    _this.submitted(true);
    _this.matchingArticles.search({query: _this.search()});
  };

  this.clickStudyButton = function(study) {
    return function() {
      _this.selectStudy(study);
    };
  };
};

StudyFinder.view = function(ctrl) {
  var content;
  if (false && ctrl.selectedArticle) {
    content = StudyFinder.articleView(ctrl, ctrl.selectedArticle);
  } else {
    content = StudyFinder.searchView(ctrl);
  }
  return (
    <div className="StudyFinder">
      {content}
    </div>
  );
};

StudyFinder.articleView = function(ctrl, article) {
  var studies = article.get("studies");
  var content;

  if (studies.loading) {
    var spinner = Spinner.view();
  }

  if (studies.length === 0 && !studies.loading) {
    content = (
      <div> This article has no studies. <a href={article.url()}>Go to article</a> to add a study.</div>
    )
  } else if (studies.length > 0) {
    var parentReplications = false;
    if (ctrl.parentStudy && ctrl.parentStudy()) {
      parentReplications = ctrl.parentStudy().get("replications");
    }
    var list = studies.map(function(study) {
      var classes = cx({
        btn: true,
        btn_subtle: true,
        active: parentReplications && parentReplications.find(function(replication) {
          return replication.get("replicating_study_id") === study.get("id")
        })
      });
  
      var parentStudy = ctrl.parentStudy();
      console.log(study);
      console.log(parentStudy);
      console.log(article);
      return (
        <li>
          <button type="button" className={classes} onclick={ctrl.clickStudyButton(study)} title={"Add " + study.get("article").etAl(3) + " (" + study.get("year") + ") " + study.get("number") + " as a replication of " + parentStudy.etAl(3) + " (" + parentStudy.get("year") +") "+ parentStudy.get("number")}>
              <span>+</span>
	      <span className="icon icon_replication"> {study.get("number")}</span>
	  </button>
	  {/*study.get("independent_variables").join(", ")} vs {study.get("dependent_variables").join(", ")*/}
        </li>
      );
    });
    content = (
      <div>
        <h6>Studies</h6>
        <ul>{list}</ul>
      </div>
    );
  }

  return (
    <div className="articleView">
      {spinner}
      {content}
    </div>
  );
};

StudyFinder.searchView = function(ctrl) {
  var articles = ctrl.matchingArticles;
  var results;
  if (!ctrl.submitted()) {
    results = "";
  } else if (articles.loading) {
    results = Spinner.view();
  } else if (articles.total === 0) {
    results = "No articles found"
  } else {
    var list = articles.map(function(article) {
      if (ctrl.parentStudy && ctrl.parentStudy().get("article_id") === article.get("id")) {
        return;
      }
      var arrow;
      if (ctrl.selectedArticle === article) {
        var expandedContent = StudyFinder.articleView(ctrl, article);
        arrow = <span className="icon icon_up_caret arrow"></span>;
      } else {
        arrow = <span className="icon icon_down_caret arrow"></span>;
      }

      if (article.get("journal_title")) {
        var journalTitle = "- " + article.get("journal_title");
      }

      return (
        <li className="article">
          <header onclick={ctrl.selectArticle(article)}>
            <div className="title">{article.get("title")}</div>
            <div className="authors">({article.get("year")}) {article.authors().etAl(3)} {journalTitle}</div>
            {arrow}
          </header>
          {expandedContent}
        </li>
      );
    });

    results = (
      <ul className="articles">
        {list}
      </ul>
    );
  }

  return (
    <form onsubmit={ctrl.runSearch}>
      <div className="search">
        <div>Find the article, then pick the study.</div>
        <input placeholder="Find article" type="text" value={ctrl.search()} oninput={m.withAttr("value", ctrl.search)} />
        <button type="submit" className="btn">Search</button>
      </div>

      <div className="results">
        {results}
      </div>
    </form>
  );
};

module.exports = StudyFinder;

@@ -2666,23 +2666,8 @@
 udy.
-get(%22article%22).
 etAl

add tooltip to add replication button in add replication modal