'use strict';

window.define(['react', 'color-picker', 'underscore'], function (React, ColorPicker, _) {

  var searchableTypes = [
    'name',
    'defaultValue',
    'value',
    'label'
  ];

  var FormCollection = React.createClass({
    areDefined: function (value) {
      return typeof value !== 'undefined';
    },

    containsSearchTerm: function (value, key) {
      var searchTerm = this.props.searchTerm.toLowerCase().replace(/\s+?/gi, ' ');
      var searchTerms = searchTerm.split(' ');

      var areInValue = function (term) {
        return value.toLowerCase().indexOf(term) >= 0;
      };

      return searchableTypes.indexOf(key) >= 0 &&
        value &&
        (
          value.toLowerCase().indexOf(searchTerm) >= 0 ||
          _.every(searchTerms, areInValue)
        );
    },

    create: {
      subHeader: function (child) {
        if (this.props.searchTerm) {
          return undefined;
        }
        return React.createElement(
          'h5',
          null,
          child.value
        );
      },

      variable: function (child, index) {
        var self = this;
        var colorPicker, label;

        if (this.props.searchTerm && !_.any(child, this.containsSearchTerm)) {
          return undefined;
        }

        if (child.type === 'color') {
          colorPicker = React.createElement(
            ColorPicker,
            {
              setValue: self.props.updateVariable.bind(null, self.props.index, index),
              value: child.value,
              defaultValue: child.defaultValue
            }
          );
        }

        if (child.label) {
          label = React.createElement(
            'p',
            null,
            React.createElement(
              'sub',
              null,
              child.label
            )
          );
        }

        return React.createElement(
          'div',
          {
            className: 'form-group'
          },
          label,
          React.createElement(
            'label',
            null,
            child.name
          ),
          React.createElement(
            'div',
            {
              className: 'input-wrapper'
            },
            React.createElement(
              'input',
              {
                className: 'form-control',
                placeholder: child.defaultValue,
                value: child.value,
                onChange: self.props.updateVariable.bind(null, self.props.index, index)
              },
              child.value
            ),
            colorPicker
          )
        );
      }
    },

    render: function () {
      var self = this;
      var description, hasSearchResults;

      var children = this.props.group.children.map(function (child, index) {
        return self.create[child.element].call(self, child, index);
      });

      if (this.props.group.description) {
        description = React.createElement(
          'p',
          null,
          this.props.group.description
        );
      }

      if (this.props.searchTerm) {
        hasSearchResults = _.any(children, this.areDefined);

        if (!hasSearchResults) {
          return false;
        }
      }

      return React.createElement(
        'div',
        {
          className: 'form-collection' +
            (hasSearchResults || this.props.index === this.props.activeIndex ? ' active' : '') +
            (hasSearchResults ? ' filtered' : '')
        },
        React.createElement(
          'a',
          {
            onClick: self.props.setActiveCollection.bind(null, this.props.index)
          },
          React.createElement(
            'h4',
            null,
            this.props.group.value
          )
        ),
        {description},
        children
      );
    }
  });

  return FormCollection;

});

@@ -3722,17 +3722,16 @@
         
-%7B
 descript
@@ -3733,17 +3733,16 @@
 cription
-%7D
 ,%0A      

Fix description syntax