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({
            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.
                return !annotation.isSignature;
            }
        })
    }

    configurePSPDFKit(instance, handler) {
        instance.addEventListener("annotations.load", (loadedAnnotations) => {
            console.log("annotations loaded", loadedAnnotations.toJS());
        })

        instance.addEventListener("annotations.change", () => {
            console.log("annotations changed")
        })

        instance.addEventListener("annotations.create", async (createdAnnotations) => {
            console.log("annotations created");
        })

        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)
    }

    getCustomItems = function (callback) {
        const customItems = [
            {
                type: "custom",
                id: "button-reset",
                className: "button-reset",
                title: "Zurücksetzen",
                onPress() {
                    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() {
                    callback("FINISH")
                },
                icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-check2-circle" viewBox="0 0 16 16">
                        <path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"/>
                        <path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z" />
                      </svg>`
            }
        ]
        return customItems
    }

    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;
    }
}