'use client';

import { useState, useEffect, FC } from 'react';
import { generateBarcode } from '../lib/pdf/pdf417';
import { renderBarcode } from '../lib/pdf/renderBarcode';

export const Pdf417Barcode:FC<{hub3aText:string, className?: string }> = ({  hub3aText: hub3a_text, className }) => {
    const [bitmapData, setBitmapData] = useState<string | undefined>(undefined);

    console.log("Rendering Pdf417Barcode with hub3a_text:", hub3a_text);

    useEffect(() => {
        const aspectRatio = 3;
        const errorCorrectionLevel = 4; // error correction 4 is common for HUB3A PDF417 barcodes
        
        const barcodeMatrix = generateBarcode(hub3a_text, errorCorrectionLevel ?? 4 , aspectRatio);
        const bitmap = renderBarcode(barcodeMatrix, 4, 3); // 4:3 block size is common for HUB3A PDF417 barcodes
        setBitmapData(bitmap);
    }, [hub3a_text]);

    // Don't render until bitmap is generated (prevents hydration mismatch)
    if (!bitmapData) {
        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={bitmapData} alt="PDF417 Barcode" className={className}  />
    );
}