import React, {PropTypes} from 'react';
import AutoRefresh from 'shared/components/AutoRefresh';
import LineGraph from 'shared/components/LineGraph';
import ReactGridLayout from 'react-grid-layout';
import _ from 'lodash';

const RefreshingLineGraph = AutoRefresh(LineGraph);

export const LayoutRenderer = React.createClass({
  propTypes: {
    timeRange: PropTypes.shape({
      defaultGroupBy: PropTypes.string.isRequired,
      queryValue: PropTypes.string.isRequired,
    }).isRequired,
    cells: PropTypes.arrayOf(
      PropTypes.shape({
        queries: PropTypes.arrayOf(
          PropTypes.shape({
            rp: PropTypes.string.isRequired,
            text: PropTypes.string.isRequired,
            database: PropTypes.string.isRequired,
            groupbys: PropTypes.arrayOf(PropTypes.string),
            wheres: PropTypes.arrayOf(PropTypes.string),
          }).isRequired
        ).isRequired,
        x: PropTypes.number.isRequired,
        y: PropTypes.number.isRequired,
        w: PropTypes.number.isRequired,
        h: PropTypes.number.isRequired,
        i: PropTypes.string.isRequired,
        name: PropTypes.string.isRequired,
      }).isRequired
    ),
    autoRefreshMs: PropTypes.number.isRequired,
    host: PropTypes.string.isRequired,
    source: PropTypes.string,
  },

  getInitialState() {
    return ({
      layout: _.without(this.props.cells, ['queries']),
    });
  },

  buildQuery(q) {
    const {timeRange, host} = this.props;
    const {wheres, groupbys} = q;

    let text = q.text;
    text += ` where \"host\" = '${host}' and time > ${timeRange.queryValue}`;
    if (wheres && wheres.length > 0) {
      text += ` and ${wheres.join(' and ')}`;
    }
    if (groupbys) {
      if (groupbys.find((g) => g.includes("time"))) {
        text += ` group by ${groupbys.join(',')}`;
      } else {
        text += ` group by time(${timeRange.defaultGroupBy}),${groupbys.join(',')}`;
      }
    } else {
      text += ` group by time(${timeRange.defaultGroupBy})`;
    }
    return text;
  },

  generateGraphs() {
    const {autoRefreshMs, source} = this.props;

    return this.props.cells.map((cell) => {
      const qs = cell.queries.map((q) => {
        return Object.assign({}, q, {
          host: source,
          text: this.buildQuery(q),
        });
      });
      return (
        <div key={cell.i}>
          <h2 className="hosts-graph-heading">{cell.name}</h2>
          <div className="hosts-graph graph-panel__graph-container">
            <RefreshingLineGraph
              queries={qs}
              autoRefresh={autoRefreshMs}
            />
          </div>
        </div>
      );
    });
  },

  render() {
    return (
      <ReactGridLayout layout={this.state.layout} isDraggable={false} isResizable={false} cols={12} rowHeight={90} width={1200}>
        {this.generateGraphs()}
      </ReactGridLayout>
    );
  },
});

export default LayoutRenderer;

@@ -1823,32 +1823,57 @@
 %7D%60;%0A      %7D else
+ if (groupbys.length %3E 0)
  %7B%0A        text 
@@ -1940,24 +1940,102 @@
 oin(',')%7D%60;%0A
+      %7D else %7B%0A        text += %60 group by time($%7BtimeRange.defaultGroupBy%7D)%60;%0A
       %7D%0A    

Fix layout group by commas when array is empty