class PrintingMultiplePrintJobsSample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            jobs: []
        };
    }

    removeJob(i) {
        let arr = this.state.jobs;
        arr.splice(i, 1);
        this.setState({ jobs: arr });
    }

    addJob() {
        let arr = this.state.jobs;
        arr.push(new JSPM.ClientPrintJob());
        this.setState({ jobs: arr });
    }

    updateJob(i, pj) {
        //no need to re-render
        this.state.jobs[i] = pj;
    }

    doPrinting() {
        var cpjg = new JSPM.ClientPrintJobGroup();
        for (var i = 0; i < this.state.jobs.length; i++) {
            cpjg.jobs.push(this.state.jobs[i]);
        }
        cpjg.sendToClient();
    }

    render() {
        let printButton;
        if (this.state.jobs.length > 0) {
            printButton = (
              <div className="row">
                <div className="col-md-12">
                  <br />
                  <div className="text-center">
                    <button
            className="btn btn-success btn-lg"
            onClick={this.doPrinting.bind(this)}
          >
            <i className="fa fa-print" /> Print Now...
          </button>
        </div>
      </div>
    </div>
          );
        }

        return (
          <div>
            <div className="row">
              <div className="col-md-1">
                <button
        className="btn btn-dark btn-lg"
        onClick={() => this.props.setSample(0)}
      >
        <i className="fa fa-arrow-left" />
      </button>
    </div>
    <div className="col-md-11">
      <h2 className="text-center">
        <i className="fa fa-barcode" />+
        <i className="fa fa-file-text" />&nbsp;Print Multiple Jobs
        in one shot!
      </h2>
      <hr />
    </div>
  </div>
  <div className="row">
    <div className="col-md-3">
      <button
        className="btn btn-info btn-lg"
        onClick={this.addJob.bind(this)}
      >
        <i className="fa fa-plus" /> Add Print Job
      </button>
    </div>
    <div className="col-md-9">
      <div
        className="alert alert-warning alert-dismissible fade show"
        role="alert"
      >
        <i className="fa fa-info-circle" />{" "}
        <small>
          You can print raw commands and files to different client
        printers if needed!
      </small>
      <button
        type="button"
        className="close"
        data-dismiss="alert"
        aria-label="Close"
      >
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  </div>
</div>
<div id="accordion">
  {this.state.jobs.map((pj, i) => {
      return (
        <PrintJob
          jobIndex={i}
        removeJobHandler={this.removeJob.bind(this)}
        updateJobHandler={this.updateJob.bind(this)}
      />
    );
    })}
              </div>
              {printButton}
            </div>
          );
              }
}

window.PrintingMultiplePrintJobsSample = PrintingMultiplePrintJobsSample;