import { useImagePreviewWidget } from '@/composable/widgets/imagePreviewWidget.js'

const CANVAS_IMAGE_PREVIEW_WIDGET = '$$canvas-image-preview'

/**
 * Composable for handling canvas image previews in nodes
 */
export function useNodeCanvasImagePreview() {
    const imagePreviewWidget = useImagePreviewWidget()
    /**
     * Shows canvas image preview for a node
     * @param node The graph node to show the preview for
     */
    function showCanvasImagePreview(node) {
        if (!node.imgs?.length) return
        if (!node.widgets) return

        if (!node.widgets.find((w) => w.name === CANVAS_IMAGE_PREVIEW_WIDGET)) {
            imagePreviewWidget(node, {
                type: 'IMAGE_PREVIEW',
                name: CANVAS_IMAGE_PREVIEW_WIDGET
            })
        }
    }

    /**
     * Removes canvas image preview from a node
     * @param node The graph node to remove the preview from
     */
    function removeCanvasImagePreview(node) {
        if (!node.widgets) return

        const widgetIdx = node.widgets.findIndex(
            (w) => w.name === CANVAS_IMAGE_PREVIEW_WIDGET
        )

        if (widgetIdx > -1) {
            node.widgets[widgetIdx].onRemove?.()
            node.widgets.splice(widgetIdx, 1)
        }
    }

    return {
        showCanvasImagePreview,
        removeCanvasImagePreview
    }
}