evidencija-rezija/web-app/app/ui/Pdf417BarcodeWasm.tsx

'use client';

import { useState, useEffect, FC } from 'react';
import { writeBarcode, prepareZXingModule, type WriterOptions } from 'zxing-wasm/writer';

// Configure WASM file location for writer
prepareZXingModule({
    overrides: {
        locateFile: (path, prefix) => {
            if (path.endsWith('.wasm')) {
                return window.location.origin + '/zxing_writer.wasm';
            }
            return prefix + path;
        }
    }
});

export const Pdf417BarcodeWasm: FC<{ hub3aText: string, className?: string }> = ({ hub3aText, className }) => {
    const [barcodeDataUrl, setBarcodeDataUrl] = useState<string | undefined>(undefined);
    const [error, setError] = useState<string | undefined>(undefined);

    useEffect(() => {
        const generateBarcode = async () => {
            try {
                setError(undefined);
                setBarcodeDataUrl(undefined);

                const writerOptions: WriterOptions = {
                    format: 'PDF417',
                    ecLevel: "5",
                    scale: 2,
                };

                const result = await writeBarcode(hub3aText, writerOptions);

                // Convert PNG blob to data URL
                const reader = new FileReader();
                reader.onloadend = () => {
                    setBarcodeDataUrl(reader.result as string);
                };
                reader.readAsDataURL(result.image as Blob);

            } catch (err) {
                console.error('Failed to generate PDF417 barcode:', err);
                setError('Failed to generate barcode');
            }
        };

        if (hub3aText) {
            generateBarcode();
        }
    }, [hub3aText]);

    // Show error state
    if (error) {
        return (
            <div style={{ width: "350px", height: "92px" }} className="flex items-center justify-center">
                <span className="text-error text-sm">{error}</span>
            </div>
        );
    }

    // Don't render until barcode is generated (prevents hydration mismatch)
    if (!barcodeDataUrl) {
        return (
            <div style={{ width: "350px", height: "92px" }} className="flex items-center justify-center">
                <span className="loading loading-spinner loading-lg"></span>
            </div>
        );
    }

    return (
        // eslint-disable-next-line @next/next/no-img-element
        <img src={barcodeDataUrl} alt="PDF417 Barcode" className={className} />
    );
}