"use strict";
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
/* @flow */
const react_1 = __importStar(require("react"));
const signature_pad_1 = __importDefault(require("signature_pad"));
const ErrorBoundary_1 = __importDefault(require("components/hoc/ErrorBoundary"));
const react_2 = require("@lingui/react");
class Signature extends react_1.Component {
    componentDidMount() {
        if (typeof document !== 'undefined') {
            let wrapper = document.getElementById('signature-pad');
            if (wrapper) {
                let clearButton = wrapper.querySelector('[data-action=clear]'), savePNGButton = wrapper.querySelector('[data-action=save-png]'), saveSVGButton = wrapper.querySelector('[data-action=save-svg]'), canvas = wrapper.querySelector('canvas');
                // Adjust canvas coordinate space taking into account pixel ratio,
                // to make it look crisp on mobile devices.
                // This also causes canvas to be cleared.
                function resizeCanvas() {
                    // When zoomed out to less than 100%, for some very strange reason,
                    // some browsers report devicePixelRatio as less than 1
                    // and only part of the canvas is cleared then.
                    let ratio = Math.max(window.devicePixelRatio || 1, 1);
                    canvas.width = canvas.offsetWidth * ratio;
                    canvas.height = canvas.offsetHeight * ratio;
                    canvas.getContext('2d').scale(ratio, ratio);
                }
                window.onresize = resizeCanvas;
                resizeCanvas();
                let signaturePad = new signature_pad_1.default(canvas);
                clearButton.addEventListener('click', function () {
                    signaturePad.clear();
                });
                savePNGButton.addEventListener('click', function () {
                    if (signaturePad.isEmpty()) {
                        //alert('Please provide signature first.');
                    }
                    else {
                        window.open(signaturePad.toDataURL());
                    }
                });
                saveSVGButton.addEventListener('click', function () {
                    if (signaturePad.isEmpty()) {
                        //alert('Please provide signature first.');
                    }
                    else {
                        window.open(signaturePad.toDataURL('image/svg+xml'));
                    }
                });
            }
        }
    }
    render() {
        return (react_1.default.createElement(ErrorBoundary_1.default, null,
            react_1.default.createElement("div", null,
                react_1.default.createElement("div", { id: "signature-pad", className: "m-signature-pad" },
                    react_1.default.createElement("div", { className: "m-signature-pad--body" },
                        react_1.default.createElement("canvas", null)),
                    react_1.default.createElement("div", { className: "m-signature-pad--footer" },
                        react_1.default.createElement("div", { className: "description" },
                            react_1.default.createElement(react_2.Trans, null, "Sign above")),
                        react_1.default.createElement("div", { className: "left" },
                            react_1.default.createElement("button", { type: "button", className: "btn clear_btn clear", "data-action": "clear" },
                                react_1.default.createElement(react_2.Trans, null, "Clear"))),
                        react_1.default.createElement("div", { className: "right" },
                            react_1.default.createElement("button", { type: "button", className: "btn save_btn save", "data-action": "save-png" },
                                react_1.default.createElement(react_2.Trans, null, "Save as PNG")),
                            react_1.default.createElement("button", { type: "button", className: "btn save_btn save", "data-action": "save-svg" },
                                react_1.default.createElement(react_2.Trans, null, "Save as SVG"))))))));
    }
}
exports.default = Signature;
//# sourceMappingURL=index.js.map