import React, {PropTypes} from 'react'

import FieldListItem from './FieldListItem'
import GroupByTimeDropdown from './GroupByTimeDropdown'

import {showFieldKeys} from 'shared/apis/metaQuery'
import showFieldKeysParser from 'shared/parsing/showFieldKeys'

const {string, shape, func} = PropTypes
const FieldList = React.createClass({
  propTypes: {
    query: shape({
      database: string,
      retentionPolicy: string,
      measurement: string,
    }).isRequired,
    onToggleField: func.isRequired,
    onGroupByTime: func.isRequired,
    applyFuncsToField: func.isRequired,
    isKapacitorRule: PropTypes.bool,
  },

  getDefaultProps() {
    return {
      isKapacitorRule: false,
    }
  },

  contextTypes: {
    source: PropTypes.shape({
      links: PropTypes.shape({
        proxy: PropTypes.string.isRequired,
      }).isRequired,
    }).isRequired,
  },

  getInitialState() {
    return {
      fields: [],
    }
  },

  componentDidMount() {
    const {database, measurement} = this.props.query
    if (!database || !measurement) {
      return
    }

    this._getFields()
  },

  componentDidUpdate(prevProps) {
    const {database, measurement, retentionPolicy} = this.props.query
    const {database: prevDB, measurement: prevMeas, retentionPolicy: prevRP} = prevProps.query
    if (!database || !measurement) {
      return
    }

    if (database === prevDB && measurement === prevMeas && retentionPolicy === prevRP) {
      return
    }

    this._getFields()
  },

  handleGroupByTime(groupBy) {
    this.props.onGroupByTime(groupBy.menuOption)
  },

  render() {
    const {query} = this.props
    const hasAggregates = query.fields.some((f) => f.funcs && f.funcs.length)
    const hasGroupByTime = query.groupBy.time

    return (
      <div className="query-builder--column">
        <div className="query-builder--heading">Fields</div>
        {
          hasAggregates ?
            <div className="qeditor--list-header">
              <div className="group-by-time">
                <p>Group by Time</p>
                <GroupByTimeDropdown isOpen={!hasGroupByTime} selected={query.groupBy.time} onChooseGroupByTime={this.handleGroupByTime} />
              </div>
            </div>
            : null
        }
        {this.renderList()}
      </div>
    )
  },

  renderList() {
    const {database, measurement} = this.props.query
    if (!database || !measurement) {
      return (
        <div className="query-builder--list-empty">
          <span>No <strong>Measurement</strong> selected</span>
        </div>
      )
    }

    return (
      <div className="query-builder--list">
        {this.state.fields.map((fieldFunc) => {
          const selectedField = this.props.query.fields.find((f) => f.field === fieldFunc.field)
          return (
            <FieldListItem
              key={fieldFunc.field}
              onToggleField={this.props.onToggleField}
              onApplyFuncsToField={this.props.applyFuncsToField}
              isSelected={!!selectedField}
              fieldFunc={selectedField || fieldFunc}
              isKapacitorRule={this.props.isKapacitorRule}
            />
          )
        })}
      </div>
    )
  },

  _getFields() {
    const {database, measurement, retentionPolicy} = this.props.query
    const {source} = this.context
    const proxySource = source.links.proxy

    showFieldKeys(proxySource, database, measurement, retentionPolicy).then((resp) => {
      const {errors, fieldSets} = showFieldKeysParser(resp.data)
      if (errors.length) {
        // TODO: do something
      }

      this.setState({
        fields: fieldSets[measurement].map((f) => {
          return {field: f, funcs: []}
        }),
      })
    })
  },
})

export default FieldList

@@ -1850,30 +1850,38 @@
 ng%22%3E
-Fields%3C/div%3E%0A        %7B
+%0A          %3Cspan%3EFields%3C/span%3E
 %0A   
@@ -1887,16 +1887,17 @@
         
+%7B
 hasAggre
@@ -1908,61 +1908,8 @@
 s ?%0A
-            %3Cdiv className=%22qeditor--list-header%22%3E%0A  
     
@@ -1948,18 +1948,16 @@
 -time%22%3E%0A
-  
         
@@ -1983,18 +1983,16 @@
 ime%3C/p%3E%0A
-  
         
@@ -2137,38 +2137,15 @@
     
-  
 %3C/div%3E%0A
-            %3C/div%3E%0A  
     
@@ -2156,16 +2156,17 @@
   : null
+%7D
 %0A       
@@ -2166,17 +2166,22 @@
         
-%7D
+%3C/div%3E
 %0A       

Update appearance of group by time in field list heading