Name And Signature

/* global SignaturePad */

import { loadJS } from "@web/core/assets";
import { isMobileOS } from "@web/core/browser/feature_detection";
import { Dropdown } from "@web/core/dropdown/dropdown";
import { DropdownItem } from "@web/core/dropdown/dropdown_item";
import { rpc } from "@web/core/network/rpc";
import { useAutofocus } from "@web/core/utils/hooks";
import { renderToString } from "@web/core/utils/render";
import { getDataURLFromFile } from "@web/core/utils/urls";

import { Component, useState, onWillStart, useRef, useEffect } from "@odoo/owl";

let htmlId = 0;
export class NameAndSignature extends Component {
    static template = "web.NameAndSignature";
    static components = { Dropdown, DropdownItem };
    static props = {
        signature: { type: Object },
        defaultFont: { type: String, optional: true },
        displaySignatureRatio: { type: Number, optional: true },
        fontColor: { type: String, optional: true },
        signatureType: { type: String, optional: true },
        noInputName: { type: Boolean, optional: true },
        mode: { type: String, optional: true },
        onSignatureChange: { type: Function, optional: true },
    };
    static defaultProps = {
        defaultFont: "",
        displaySignatureRatio: 3.0,
        fontColor: "DarkBlue",
        signatureType: "signature",
        noInputName: false,
        onSignatureChange: () => {},
    };

    setup() {
        this.htmlId = htmlId++;
        this.defaultName = this.props.signature.name || "";
        this.currentFont = 0;
        this.drawTimeout = null;

        this.state = useState({
            signMode:
                this.props.mode || (this.props.noInputName && !this.defaultName ? "draw" : "auto"),
            showSignatureArea: !!(this.props.noInputName || this.defaultName),
            showFontList: false,
        });

        this.signNameInputRef = useRef("signNameInput");
        this.signInputLoad = useRef("signInputLoad");
        useAutofocus({ refName: "signNameInput" });
        useEffect(
            (el) => {
                if (el) {
                    el.click();
                }
            },
            () => [this.signInputLoad.el]
        );

        onWillStart(async () => {
            this.fonts = await rpc(`/web/sign/get_fonts/${this.props.defaultFont}`);
        });

        onWillStart(async () => {
            await loadJS("/web/static/lib/signature_pad/signature_pad.umd.js");
        });

        this.signatureRef = useRef("signature");
        useEffect(
            (el) => {
                if (el) {
                    this.signaturePad = new SignaturePad(el, {
                        penColor: this.props.fontColor,
                        backgroundColor: "rgba(255,255,255,0)",
                        minWidth: 2,
                        maxWidth: 2,
                    });
                    this.signaturePad.addEventListener("endStroke", () => {
                        this.props.signature.isSignatureEmpty = this.isSignatureEmpty;
                        this.props.onSignatureChange(this.state.signMode);
                    });
                    this.resetSignature();
                    this.props.signature.getSignatureImage = () => this.signaturePad.toDataURL();
                    this.props.signature.resetSignature = () => this.resetSignature();
                    if (this.state.signMode === "auto") {
                        this.drawCurrentName();
                    }
                    if (this.props.signature.signatureImage) {
                        this.clear();
                        this.fromDataURL(this.props.signature.signatureImage);
                    }
                }
            },
            () => [this.signatureRef.el]
        );
    }

    /**
     * Draws the current name with the current font in the signature field.
     */
    async drawCurrentName() {
        const font = this.fonts[this.currentFont];
        const text = this.getCleanedName();
        if (text.trim() === "") {
            this.clear();
            return;
        }
        const canvas = this.signatureRef.el;
        const img = this.getSVGText(font, text, canvas.width, canvas.height);
        await this.printImage(img);
    }

    focusName() {
        // Don't focus on mobile
        if (!isMobileOS() && this.signNameInputRef.el) {
            this.signNameInputRef.el.focus();
        }
    }