export type ImageInputToBase64FunctionReturn = {
    imageBase64?: string;
    imageBase64Full?: string;
    imageName?: string;
};

export type ImageInputToBase64FunctioParam = {
    imageInput: HTMLInputElement;
    maxWidth?: number;
    mimeType?: string;
};

export default async function imageInputToBase64({
    imageInput,
    maxWidth,
    mimeType,
}: ImageInputToBase64FunctioParam): Promise<ImageInputToBase64FunctionReturn> {
    try {
        if (!imageInput.files?.[0]) {
            throw new Error("No Files found in this image input");
        }
        let imagePreviewNode = document.querySelector(
            `[data-imagepreview='image']`
        );
        let imageName = imageInput.files[0].name.replace(/\..*/, "");

        let imageDataBase64: string | undefined;

        const MIME_TYPE = mimeType ? mimeType : "image/jpeg";
        const QUALITY = 0.95;
        const MAX_WIDTH = maxWidth ? maxWidth : null;

        const file = imageInput.files[0];
        const blobURL = URL.createObjectURL(file);
        const img = new Image();

        img.src = blobURL;

        imageDataBase64 = await new Promise((res, rej) => {
            img.onerror = function () {
                URL.revokeObjectURL(this.src);
                window.alert("Cannot load image!");
            };

            img.onload = function () {
                URL.revokeObjectURL(img.src);

                const canvas = document.createElement("canvas");

                if (MAX_WIDTH) {
                    const scaleSize = MAX_WIDTH / img.naturalWidth;

                    canvas.width =
                        img.naturalWidth < MAX_WIDTH
                            ? img.naturalWidth
                            : MAX_WIDTH;
                    canvas.height =
                        img.naturalWidth < MAX_WIDTH
                            ? img.naturalHeight
                            : img.naturalHeight * scaleSize;
                } else {
                    canvas.width = img.naturalWidth;
                    canvas.height = img.naturalHeight;
                }

                const ctx = canvas.getContext("2d");
                ctx?.drawImage(img, 0, 0, canvas.width, canvas.height);

                const srcEncoded = canvas.toDataURL(MIME_TYPE, QUALITY);

                res(srcEncoded);
            };
        });

        return {
            imageBase64: imageDataBase64?.replace(/.*?base64,/, ""),
            imageBase64Full: imageDataBase64,
            imageName: imageName,
        };
    } catch (error: any) {
        console.log("Image Processing Error! =>", error.message);

        return {
            imageBase64: undefined,
            imageBase64Full: undefined,
            imageName: undefined,
        };
    }
}

/** ********************************************** */
/** ********************************************** */
/** ********************************************** */