import React from 'react';

import Breadcrumb from 'components/Breadcrumb';
import PanelGroup, { Container, StandardPanelTitle } from 'components/Layout';
import UpdateList from 'components/UpdateList';

import { getInProgressStates, getTerminalStates } from 'utils/Update';

export const MAX_QUERY_SIZE = 100;

export class UpdatesFetcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = { updates: null };
  }

  componentWillMount() {
    const that = this;
    const query = new JobUpdateQuery();
    query.updateStatuses = this.props.states;
    query.limit = MAX_QUERY_SIZE;
    this.props.api.getJobUpdateSummaries(query, (response) => {
      const updates = response.result.getJobUpdateSummariesResult.updateSummaries;
      that.setState({updates});
      that.props.clusterFn(response.serverInfo.clusterName);
    });
  }

  render() {
    return (<Container>
      <PanelGroup noPadding title={<StandardPanelTitle title={this.props.title} />}>
        <UpdateList updates={this.state.updates} />
      </PanelGroup>
    </Container>);
  }
}

export default class Updates extends React.Component {
  constructor(props) {
    super(props);
    this.state = { cluster: null };
    this.clusterFn = this.setCluster.bind(this);
  }

  setCluster(cluster) {
    // TODO(dmcg): We should just have the Scheduler return the cluster as a global.
    this.setState({cluster});
  }

  render() {
    const api = this.props.api;
    return (<div className='update-page'>
      <Breadcrumb cluster={this.state.cluster} />
      <UpdatesFetcher
        api={api}
        clusterFn={this.clusterFn}
        states={getInProgressStates()}
        title='Updates In Progress' />
      <UpdatesFetcher
        api={api}
        clusterFn={this.clusterFn}
        states={getTerminalStates()}
        title='Recently Completed Updates' />
    </div>);
  }
}