"use client";

import JsBarcode from "jsbarcode";
import QRCode from "qrcode";
import { useEffect, useRef } from "react";

interface EtiquetaCodigoProps {
  codigo: string;
  qrContenido: string;
}

export default function EtiquetaCodigo({
  codigo,
  qrContenido,
}: EtiquetaCodigoProps) {
  const barcodeRef =
    useRef<SVGSVGElement>(null);

  const qrRef =
    useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    if (!codigo) {
      return;
    }

    if (barcodeRef.current) {
      JsBarcode(
        barcodeRef.current,
        codigo,
        {
          format: "CODE128",
          width: 1.4,
          height: 48,
          displayValue: false,
          margin: 0,
        }
      );
    }

    if (
      qrRef.current &&
      qrContenido
    ) {
      QRCode.toCanvas(
        qrRef.current,
        qrContenido,
        {
          width: 105,
          margin: 0,
          errorCorrectionLevel: "M",
        }
      ).catch((error) => {
        console.error(
          "Error QR:",
          error
        );
      });
    }
  }, [
    codigo,
    qrContenido,
  ]);

  return (
    <div className="codigos">

      <div className="codigo-barras">
        <svg ref={barcodeRef} />
      </div>

      <canvas
        ref={qrRef}
        className="codigo-qr"
      />

      <div className="codigo-texto">
        {codigo}
      </div>

    </div>
  );
}