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

@observer
export class DrawingFillHandler extends ObservableReactComponent<object> {
    static Instance: DrawingFillHandler;

    constructor(props: object) {
        super(props);
        makeObservable(this);
        DrawingFillHandler.Instance = this;
    }

    @action
    drawingToImage = async (drawing: Doc, prompt: string) => {
        const imageField = await DocumentView.GetDocImage(drawing);
        if (!imageField) return;
        const image = new Image();
        image.src = imageField.url?.href;
        await new Promise<void>((resolve, reject) => {
            image.onload = () => resolve();
            image.onerror = () => reject(new Error('Error loading image'));
        });

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