import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useEffect, useRef } from "react";
import styled from "styled-components";
import FormControl from "@material-ui/core/FormControl";
import SignaturePad from "signature_pad";
import { StyledInputLabel, StyledFormHelperText } from "./XCommonStyled";
import { BaseDataControl } from "./BaseDataControl";
import { StringDataDefinition } from "../../Common/Data/Definitions/StringDataDefinition";
const SignPadCanvas = React.forwardRef((props, ref) => {
    const signaturePad = useRef();
    const handleChange = () => {
        if (props.control.valueName) {
            props.control.setFormDataValue(props.control.valueName, signaturePad.current.toDataURL());
        }
    };
    /* eslint-disable react-hooks/exhaustive-deps */
    useEffect(() => {
        let canvas = document.querySelector("canvas");
        signaturePad.current = canvas
            ? new SignaturePad(canvas, { onEnd: handleChange })
            : null;
    }, []);
    /* eslint-enable react-hooks/exhaustive-deps */
    return _jsx(StyledCanvas, { ref: ref }, void 0);
});
class XSignaturePadEditUI extends React.Component {
    render() {
        return _jsx(_Fragment, { children: this.props.editMe.renderBaseDataControlEditor() }, void 0);
    }
}
export class XSignaturePad extends BaseDataControl {
    render() {
        const issueData = this.getFormContext()
            .getControlContext(this)
            .getRuntimeIssueData();
        const issueText = (issueData === null || issueData === void 0 ? void 0 : issueData.text) || "";
        return (_jsxs(_Fragment, { children: [this.label && (_jsx(StyledInputLabel, { children: this.label }, void 0)),
                _jsxs(FormControl, Object.assign({ variant: "outlined", error: Boolean(issueText) }, { children: [_jsx(SignPadCanvas, { control: this, ref: this.ref }, void 0),
                        issueText && (_jsx(StyledFormHelperText, Object.assign({ error: Boolean(issueText), "data-testid": `${this.valueName}` }, { children: issueText }), void 0))] }), void 0)] }, void 0));
    }
    renderEditUI() {
        return _jsx(XSignaturePadEditUI, { editMe: this }, void 0);
    }
    getAddedData() {
        if (!this.valueName)
            return;
        let def = new StringDataDefinition();
        def.name = this.valueName;
        return def;
    }
}
const StyledCanvas = styled.canvas `
    width: 300px;
    height: 100px;

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