import React, { PropTypes } from 'react';
import ModalTrigger from './../../components/ModalTrigger';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { github } from 'react-syntax-highlighter/dist/styles';

const $ = window.$ = require('jquery');

const propTypes = {
  query: PropTypes.string,
  queryEndpoint: PropTypes.string.isRequired,
};

export default class DisplayQueryButton extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      modalBody: <pre />,
    };
  }
  beforeOpen() {
    this.setState({
      modalBody:
        (<img
          className="loading"
          alt="Loading..."
          src="/static/assets/images/loading.gif"
        />),
    });
    if (this.props.query) {
      const modalBody = (
        <pre>{this.props.query}</pre>
      );
      this.setState({ modalBody });
    } else {
      $.ajax({
        type: 'GET',
        url: this.props.queryEndpoint,
        success: (data) => {
          const modalBody = data.language ?
            <SyntaxHighlighter language={data.language} style={github}>
              {data.query}
            </SyntaxHighlighter>
            :
            <pre>{data.query}</pre>;
          this.setState({ modalBody });
        },
        error(data) {
          this.setState({ modalBody: (<pre>{data.error}</pre>) });
        },
      });
    }
  }
  render() {
    return (
      <ModalTrigger
        isButton
        triggerNode={<span>Query</span>}
        modalTitle="Query"
        bsSize="large"
        beforeOpen={this.beforeOpen.bind(this)}
        modalBody={this.state.modalBody}
      />
    );
  }
}

DisplayQueryButton.propTypes = propTypes;