"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SignaturePadFormControl = void 0;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = tslib_1.__importStar(require("react"));
const styled_components_1 = tslib_1.__importDefault(require("styled-components"));
const FormControl_1 = tslib_1.__importDefault(require("@material-ui/core/FormControl"));
const signature_pad_1 = tslib_1.__importDefault(require("signature_pad"));
const CommonStyled_1 = require("./CommonStyled");
const DataFormControl_1 = require("../DataFormControl");
const StringDataDefinition_1 = require("@appglue/common/dist/Common/Data/Definitions/StringDataDefinition");
const DataUtilities_1 = require("@appglue/common/dist/Common/DataUtilities");
const SignPadCanvas = react_1.default.forwardRef((props, ref) => {
    const signaturePad = (0, react_1.useRef)();
    const handleChange = () => {
        if (props.control.valueName) {
            props.control.setFormDataValue(props.control.valueName, signaturePad.current.toDataURL());
        }
    };
    /* eslint-disable react-hooks/exhaustive-deps */
    (0, react_1.useEffect)(() => {
        let canvas = document.querySelector("canvas");
        signaturePad.current = canvas ? new signature_pad_1.default(canvas, { onEnd: handleChange }) : null;
    }, []);
    /* eslint-enable react-hooks/exhaustive-deps */
    return (0, jsx_runtime_1.jsx)(StyledCanvas, { ref: ref });
});
class XSignaturePadEditUI extends react_1.default.Component {
    render() {
        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: this.props.editMe.renderBaseDataControlEditor() });
    }
}
class SignaturePadFormControl extends DataFormControl_1.DataFormControl {
    __type = "Signature Pad";
    render() {
        const issueData = this.getFormContext().getControlContext(this).getRuntimeIssueData();
        const issueText = issueData?.text || "";
        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [this.label && (0, jsx_runtime_1.jsx)(CommonStyled_1.StyledInputLabel, { children: this.label }), (0, jsx_runtime_1.jsxs)(FormControl_1.default, { variant: "outlined", error: Boolean(issueText), children: [(0, jsx_runtime_1.jsx)(SignPadCanvas, { control: this, ref: this.ref }), issueText && ((0, jsx_runtime_1.jsx)(CommonStyled_1.StyledFormHelperText, { error: Boolean(issueText), "data-testid": `${this.valueName}`, children: issueText }))] })] }));
    }
    renderEditUI() {
        return (0, jsx_runtime_1.jsx)(XSignaturePadEditUI, { editMe: this });
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new StringDataDefinition_1.StringDataDefinition();
        def.name = this.valueName;
        return def;
    }
    getStorageData() {
        let retData = super.getStorageData();
        retData = DataUtilities_1.DataUtilities.addStorageData(this, retData, "__type");
        return retData;
    }
    setStorageData(data) {
        super.setStorageData(data);
        DataUtilities_1.DataUtilities.setStorageData(this, data, "__type");
    }
}
exports.SignaturePadFormControl = SignaturePadFormControl;
const StyledCanvas = styled_components_1.default.canvas `
    width: 300px;
    height: 100px;

    border-radius: 4px;
    border: 1px solid #696969;
`;
//# sourceMappingURL=SignaturePadFormControl.js.map