import { action, makeObservable } from 'mobx';
import { observer } from 'mobx-react';
import React from 'react';
import { Doc } from '../../../fields/Doc';
import { ImageCast } from '../../../fields/Types';
import { ImageField } from '../../../fields/URLField';
import { Docs } from '../../documents/Documents';
import { Networking } from '../../Network';
import { makeUserTemplateButtonOrImage } from '../../util/DropConverter';
import { DocumentView, DocumentViewInternal } from '../nodes/DocumentView';
import { ImageUtility } from '../nodes/imageEditor/imageEditorUtils/ImageHandler';
import { OpenWhere } from '../nodes/OpenWhere';
import { ObservableReactComponent } from '../ObservableReactComponent';

export class DrawingFillHandler {
    static drawingToImage = async (drawing: Doc, prompt: string) => {
        const imageField = await DocumentView.GetDocImage(drawing);
        if (!imageField) return;
        const { href } = ImageCast(imageField).url;
        const hrefParts = href.split('.');
        const hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`;
        try {
            const response = await fetch(hrefComplete);
            const blob: Blob = await response.blob();
            const strength: number = 100;
            const img = await Networking.PostToServer('/queryFireflyImage', { prompt, blob, strength });
            DocumentViewInternal.addDocTabFunc(Docs.Create.ImageDocument(img, {}), OpenWhere.addRight);
            // Networking.PostToServer('/queryFireflyImage', { prompt, blob, strength }).then(img => DocumentViewInternal.addDocTabFunc(Docs.Create.ImageDocument(img, {}), OpenWhere.addRight));
        } catch (error) {
            console.error('Error fetching image:', error);
            return;
        }

        // const image = new Image();
        // image.src = imageField.url?.href;
        // // image.onload = async () => {
        //     const canvas = document.createElement('canvas');
        //     canvas.width = image.width;
        //     canvas.height = image.height;
        //     const ctx = canvas.getContext('2d');
        //     if (!ctx) return;
        //     ctx.globalCompositeOperation = 'source-over';
        //     ctx.clearRect(0, 0, image.width, image.height);
        //     ctx.drawImage(image, 0, 0);
        // const blob: Blob = await ImageUtility.canvasToBlob(canvas);
        // const strength: number = 100;
        // Networking.PostToServer('/queryFireflyImage', { prompt, blob, strength }).then(img => DocumentViewInternal.addDocTabFunc(Docs.Create.ImageDocument(img, {}), OpenWhere.addRight));
        // };
    };
}