import { createWorker } from 'tesseract.js';

const recognizeText = async () => {
    console.log(2);
    if (selectedImage && cropAreaPixel) {
        setTextLoad(true);
        const image = new Image();
        image.src = selectedImage;
        image.onload = async () => {
            const canvas = document.createElement('canvas');
            const scaleX = image.naturalWidth / image.width;
            const scaleY = image.naturalHeight / image.height;
            canvas.width = cropAreaPixel.width;
            canvas.height = cropAreaPixel.height;
            const ctx = canvas.getContext('2d');

            if (ctx) {
                console.log(4);
                ctx.drawImage(
                    image,
                    cropAreaPixel.x * scaleX,
                    cropAreaPixel.y * scaleY,
                    cropAreaPixel.width * scaleX,
                    cropAreaPixel.height * scaleY,
                    0,
                    0,
                    cropAreaPixel.width,
                    cropAreaPixel.height
                );
                console.log(5);

                const base64Image = canvas.toDataURL('image/jpeg');
                console.log(6);

                setRecognizedText('');
                console.log(7);

                createWorker('eng')
                    .then(worker => {
                        console.log(8);
                        return worker.recognize(base64Image)
                            .then(result => {
                                console.log(9);
                                setRecognizedText(result.data.text);
                                console.log('Recognized Text:', result.data.text);
                                return worker.terminate();
                            });
                    })
                    .catch(err => {
                        console.error('Error recognizing text:', err);
                    })
                    .finally(() => {
                        setTextLoad(false);
                    });
            }
        };
        image.onerror = (err) => {
            setTextLoad(false);
            console.error('Image loading error:', err);
        };
    } else {
        setTextLoad(false);
    }
};