class PrintJobForRawCommands extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            printerCommands: ""
        };
    }

    

    setPrinterCommands(cmds) {
        //console.log(cmds);
        //no need to re-render
        this.state.printerCommands = cmds;
        this.props.onPrinterCommandsChange(this.state.printerCommands);
    }

    setPredefinedCommands(cmdId){
        let cmds = '';
        if(cmdId == 'zpl')
            cmds = '^XA^FO30,40^ADN,36,20^FDZPL Printed from JSPrintManager^FS^FO30,60^BY4^B3N,,200^FD12345678^FS^XZ';
        else if(cmdId == 'epl')
            cmds = '\x0AN\x0AQ609,24\x0Aq784\x0AA170,5,0,1,5,5,N,"EPL Printed from JSPrintManager"\x0AB170,50,0,3C,2,6,120,B,"BCP-1234"\x0AP1\x0A';
        else if(cmdId == 'escpos')
            cmds = '\x1b@\x1bE\x01ESC POS Printed from JSPrintManager\x1bd\x01\x1dk\x04987654321\x00\x1bd\x01987654321\x1dV\x41\x03';
        else if(cmdId == 'ipl')
            cmds = '<STX><ESC>C<ETX><STX><ESC>P<ETX><STX>E4;F4<ETX><STX>H0;o200,100;f0;c25;h20;w20;d0,30<ETX><STX>L1;o200,150;f0;l575;w5<ETX><STX>B2;o200,200;c0,0;h100;w2;i1;d0,10<ETX><STX>I2;h1;w1;c20<ETX><STX>R<ETX><STX><ESC>E4<ETX><STX><CAN><ETX><STX>IPL Printed from JSPrintManager<CR><ETX><STX>SAMPLE<ETX><STX><ETB><ETX>';
        else if(cmdId == 'dpl')
            cmds = '\x02L\x0dH07\x0dD11\x0d191100801000025DPL Printed from JSPrintManager\x0d1a6210000000050590PCS\x0dE\x0d';


            

        document.getElementById("cmds-" + this.props.jobIndex).value = cmds;
        this.setPrinterCommands(cmds);
    }

    render() {
        return (
          <div className="col-md-12">
            <hr />
            <strong>Enter the raw printer commands</strong>
            <div className="alert alert-warning">
              <small>
                Enter the printer's commands you want to send and is supported
        by the specified printer (e.g. ESC/POS, ZPL, EPL, etc).
        <br />
        For non-printable characters, use the JS hex notation (e.g.
        \x0D for carriage return, \x1B for ESC)
        <br />
        <strong>Refer to your target printer programming manual to know how to write the raw commands!</strong>
      </small>
    </div>
    <div>
        <small>Predefined Samples for most known RAW Printer Commands</small>
        <br />
        <button type="button" className="btn btn-light btn-sm" onClick={e => this.setPredefinedCommands('zpl')}><i className="fa fa-arrow-circle-down"></i> Zebra ZPL</button>
        &nbsp;&nbsp;
        <button type="button" className="btn btn-light btn-sm" onClick={e => this.setPredefinedCommands('epl')}><i className="fa fa-arrow-circle-down"></i> Zebra EPL</button>
        &nbsp;&nbsp;
        <button type="button" className="btn btn-light btn-sm" onClick={e => this.setPredefinedCommands('escpos')}><i className="fa fa-arrow-circle-down"></i> EPSON ESC/POS</button>
        &nbsp;&nbsp;
        <button type="button" className="btn btn-light btn-sm" onClick={e => this.setPredefinedCommands('ipl')}><i className="fa fa-arrow-circle-down"></i> Intermec IPL</button>
        &nbsp;&nbsp;
        <button type="button" className="btn btn-light btn-sm" onClick={e => this.setPredefinedCommands('dpl')}><i className="fa fa-arrow-circle-down"></i> Datamax DPL</button>
    </div>
    <textarea
        id={"cmds-" + this.props.jobIndex}
        className="form-control form-control-sm"
        onChange={e => this.setPrinterCommands(e.target.value)}
      />
    </div>
      );
    }
}

window.PrintJobForRawCommands = PrintJobForRawCommands;