class UI {
    allowedToolbarItems = [
        "sidebar-thumbnails",
        "sidebar-document-ouline",
        "sidebar-bookmarks",
        "pager",
        "pan",
        "zoom-out",
        "zoom-in",
        "zoom-mode",
        "spacer",
        "search"
    ]

    // Load the PSPDFKit UI by setting a target element as the container to render in
    // and a arraybuffer which represents the document that should be displayed.
    loadPSPDFKit(arrayBuffer, container) {
        return PSPDFKit.load({
            styleSheets: ['/css/site.css'],
            container: container,
            document: arrayBuffer,
            autoSaveMode: "DISABLED",
            annotationPresets: this.getPresets(),
            electronicSignatures: {
                creationModes: ["DRAW", "TYPE"]
            },
            isEditableAnnotation: function (annotation) {
                // Check if the annotation is a signature
                // This will allow new signatures, but not allow edits.
                console.log(annotation.isSignature, annotation.description)

                if (annotation.isSignature || annotation.description == "FRAME") {
                    return false;
                }

                return true;

                //return !annotation.isSignature;
            }
        })
    }

    configurePSPDFKit(instance, handler) {
        const toolbarItems = this.getToolbarItems(instance, handler)
        instance.setToolbarItems(toolbarItems)

        console.debug("PSPDFKit configured!");
    }

    getToolbarItems(instance, handler) {
        const customItems = this.getCustomItems(handler)
        const defaultItems = this.getDefaultItems(instance.toolbarItems)
        return defaultItems.concat(customItems)
    }

    createElementFromHTML(html) {
        const el = document.createElement('div')
        el.innerHTML = html.trim()

        return el.firstChild
    }

    getCustomItems = function (callback) {
        return [
            {
                type: "custom",
                id: "button-reset",
                className: "button-reset",
                title: "Zurücksetzen",
                onPress() {
                    console.log("RESET")
                    callback("RESET")
                },
                icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
                        <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
                      </svg>`
            },
            {
                type: "custom",
                id: "button-finish",
                className: "button-finish",
                title: "Abschließen",
                onPress() {
                    console.log("FINISH")
                    callback("FINISH")
                }
            }
        ]
    }

    getDefaultItems(items) {
        return items.filter((item) => this.allowedToolbarItems.includes(item.type))
    }

    getPresets() {
        const annotationPresets = PSPDFKit.defaultAnnotationPresets;
        annotationPresets.ink = {
            lineWidth: 10
        };

        annotationPresets.widget = {
            readOnly: true
        }

        return annotationPresets;
    }
}