import React, {PropTypes} from 'react'

import EmptyQuery from 'src/shared/components/EmptyQuery'
import QueryTabList from 'src/shared/components/QueryTabList'
import QueryTextArea from 'src/dashboards/components/QueryTextArea'
import SchemaExplorer from 'src/dashboards/components/SchemaExplorer'
import buildInfluxQLQuery from 'utils/influxql'

const TEMPLATE_RANGE = {upper: null, lower: ':dashboardTime:'}
const rawTextBinder = (links, id, action) => text =>
  action(links.queries, id, text)
const buildText = q =>
  q.rawText || buildInfluxQLQuery(q.range || TEMPLATE_RANGE, q) || ''

const QueryMaker = ({
  source: {links},
  actions,
  queries,
  timeRange,
  onAddQuery,
  activeQuery,
  onDeleteQuery,
  activeQueryIndex,
  setActiveQueryIndex,
}) => {
  return (
    <div className="query-maker query-maker--panel">
      <QueryTabList
        queries={queries}
        timeRange={timeRange}
        onAddQuery={onAddQuery}
        onDeleteQuery={onDeleteQuery}
        activeQueryIndex={activeQueryIndex}
        setActiveQueryIndex={setActiveQueryIndex}
      />
      {activeQuery && activeQuery.id
        ? <div className="query-maker--tab-contents">
            <QueryTextArea
              query={buildText(activeQuery)}
              config={activeQuery}
              onUpdate={rawTextBinder(
                links,
                activeQuery.id,
                actions.editRawTextAsync
              )}
            />
            <SchemaExplorer
              query={activeQuery}
              actions={actions}
              onAddQuery={onAddQuery}
            />
          </div>
        : <EmptyQuery onAddQuery={onAddQuery} />}
    </div>
  )
}

const {arrayOf, bool, func, number, shape, string} = PropTypes

QueryMaker.propTypes = {
  source: shape({
    links: shape({
      queries: string.isRequired,
    }).isRequired,
  }).isRequired,
  queries: arrayOf(shape({})).isRequired,
  timeRange: shape({
    upper: string,
    lower: string,
  }).isRequired,
  isInDataExplorer: bool,
  actions: shape({
    chooseNamespace: func.isRequired,
    chooseMeasurement: func.isRequired,
    chooseTag: func.isRequired,
    groupByTag: func.isRequired,
    toggleField: func.isRequired,
    groupByTime: func.isRequired,
    toggleTagAcceptance: func.isRequired,
    applyFuncsToField: func.isRequired,
    editRawTextAsync: func.isRequired,
  }).isRequired,
  setActiveQueryIndex: func.isRequired,
  onDeleteQuery: func.isRequired,
  activeQueryIndex: number,
  activeQuery: shape({}),
  onAddQuery: func.isRequired,
}

export default QueryMaker

@@ -660,16 +660,29 @@
 eRange,%0A
+  templates,%0A
   onAddQ
@@ -1433,16 +1433,52 @@
      )%7D%0A
+              templates=%7Btemplates%7D%0A
         
@@ -2583,16 +2583,107 @@
 quired,%0A
+  templates: arrayOf(%0A    shape(%7B%0A      tempVar: string.isRequired,%0A    %7D)%0A  ).isRequired,%0A
 %7D%0A%0Aexpor

Add templates back to query text editor