// drawingPadLWC.js
import { LightningElement ,track, api} from 'lwc';
import Jquery1_5_1 from "@salesforce/resourceUrl/Jquery1_5_1";
import JQuerySignaturePad from "@salesforce/resourceUrl/JQuerySignaturePad";
import { loadScript } from "lightning/platformResourceLoader";
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import saveDrawnimg from '@salesforce/apex/DrawingPadHandler.saveDiagram';

var $drawn;

export default class DrawingPadLWC extends LightningElement {
  @api recordId;
  @track cWidth ;
  @track cHeight;
  @track error;

  renderedCallback() {
      if(this.initialRender){return;}
      this.initialRender = true;
      this.onResize();
        loadScript(this, Jquery1_5_1 ).then(() => {
          loadScript(this, JQuerySignaturePad ).then(() => {
                console.log("JQuerySignaturePad Script loadedz...");
                // $canvas = this.template.querySelector('canvas');
                $drawn = this.template.querySelector('form');

                $(document).ready(function() {
                  window.$($drawn).signaturePad({
                    drawOnly: true,
                    defaultAction: 'drawIt',
                    validateFields: false,
                    lineWidth: 0,
                    clear: '.clearButton'
                  });
                });                
          });
        });
      }
  onResize(){
    var isMobile = /iPhone|iPad|iPod|Android|Mobile/i.test(navigator.userAgent);
    // alert ('navigator.userAgent '+ navigator.userAgent);
    if(isMobile){//mobile      
      this.cWidth = window.innerWidth-5;
      this.cHeight = window.innerHeight;

      var isDeviceSpecific = /DeviceSpecificID|SM-T837A/i.test(navigator.userAgent);
      if(isDeviceSpecific){//DeviceSpecific for Samsung Galaxy Tab S4 (SM-T837A)
        this.cWidth = window.innerWidth+175;
        this.cHeight = window.innerHeight+30;
      }

    }else{//desktop
      this.cWidth = window.innerWidth/1.30;
      this.cHeight = window.innerHeight/1.55;
    }
  }
  saveDrawing (event) {
    var $drawnCanvas = this.template.querySelector('canvas');

    var drawnURL = $drawnCanvas.toDataURL("image/png");
    var drawnBaseURI = drawnURL.replace(/^data:image\/(png|jpg);base64,/, "");

        saveDrawnimg({signatureBody: drawnBaseURI,recordId: this.recordId})
            .then(result => {
                this.attachment = result;
                console.log('attachment id=' + this.attachment.Id);
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Your Drawing Saved in files!',
                        variant: 'success',
                    }),
                );
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error to Drawing Saved.',
                        message: error.body.message,
                        variant: 'error',
                    }),
                );
            });
  
  }

  
}