'use client';

import { useState, useEffect } from 'react';
import { generateBarcode } from '../lib/pdf/pdf417';
import { renderBarcode } from '../lib/pdf/renderBarcode';
import { EncodePayment } from 'hub-3a-payment-encoder';

export const Pdf417Barcode = () => {
    const [bitmapData, setBitmapData] = useState<string | undefined>(undefined);

    useEffect(() => {

        const paymentParams = {
            Iznos:"123,66",  // NOTE: use comma, not period!
            ImePlatitelja:"Ivan Horvat",
            AdresaPlatitelja:"Ilica 23",
            SjedistePlatitelja:"10000 Zagreb",
            Primatelj:"VODOOPSKRBA I ODV. D.O.O.",
            AdresaPrimatelja:"FOLNEGOVIĆEVA 1",
            SjedistePrimatelja:"ZAGREB",
            IBAN:"HR8924020061100679445",
            ModelPlacanja: "HR00",  // MUST contain "HR" prefix!
            PozivNaBroj:"2025-05",
            SifraNamjene:"",
            OpisPlacanja:"Budakova Režije",
        };

        
        const hub3a_text = EncodePayment(paymentParams);

        const barcodeMatrix = generateBarcode(hub3a_text);
        const bitmap = renderBarcode(barcodeMatrix, 2, 2);
        setBitmapData(bitmap);
    }, []);

    // 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 (
        <div>
            <img src={bitmapData} style={{ width: "350px", height: "92px" }} />
        </div>
    );
}