Barcode Generator Component in React

import React, { useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';

const BarcodeGenerator = () => {
  const [zone, setZone] = useState('3');
  const [yard, setYard] = useState('1');
  const [row, setRow] = useState('A');
  const [spot, setSpot] = useState('001');

  // Générer le code complet
  const generateCode = () => {
    return `ZN${zone}-Y${yard}-${row}${spot.padStart(3, '0')}`;
  };

  // Générer le code-barres en Code 128
  const generateBarcodeSVG = (code) => {
    // Table de caractères Code 128
    const barWidths = {
      '0': '11011001100',
      '1': '11001101100',
      '2': '11001100110',
      '3': '10010011000',
      '4': '10010001100',
      '5': '10001001100',
      '6': '10011001000',
      '7': '10011000100',
      '8': '10001100100',
      '9': '11001001000',
      'A': '11001000100',
      'B': '11000100100',
      'C': '11000100010',
      'D': '11000010010',
      'E': '11001000010',
      'F': '11000010100',
      'G': '10110011100',
      'H': '10011011100',
      'I': '10011001110',
      'J': '10111001100',
      'K': '10011101100',
      'L': '10011100110',
      'M': '11001110010',
      'N': '11001011100',
      'O': '11001001110',
      'P': '11011100100',
      'Q': '11001110100',
      'R': '11101101110',
      'S': '11101001100',
      'T': '11100101100',
      'U': '11100100110',
      'V': '11101100100',
      'W': '11100110100',
      'X': '11100110010',
      'Y': '11011011000',
      'Z': '11011000110',
      '-': '10100011000',
    };

    let barcodePattern = '11010010000'; // Start Code 128B
    let x = 10;
    const bars = [];

    // Générer les barres pour chaque caractère
    for (let char of code) {
      const pattern = barWidths[char] || barWidths['0'];
      for (let i = 0; i < pattern.length; i++) {
        if (pattern[i] === '1') {
          bars.push(<rect key={`${x}-${i}`} x={x} y="10" width="2" height="80" fill="black" />);
        }
        x += 2;
      }
    }

    // Ajouter le code de fin
    barcodePattern = '1100011101011'; // Stop Code 128
    for (let i = 0; i < barcodePattern.length; i++) {
      if (barcodePattern[i] === '1') {
        bars.push(<rect key={`${x}-end-${i}`} x={x} y="10" width="2" height="80" fill="black" />);
      }
      x += 2;
    }

    return (
      <svg width={x + 20} height="120" viewBox={`0 0 ${x + 20} 120`}>
        {bars}
        <text x={(x + 20) / 2} y="110" textAnchor="middle" fontSize="12">{code}</text>
      </svg>
    );
  };

  return (
    <Card className="w-full max-w-2xl mx-auto p-6">
      <CardContent>
        <div className="space-y-6">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium mb-2">Zone</label>
              <input
                type="text"
                value={zone}
                onChange={(e) => setZone(e.target.value)}
                className="w-full p-2 border rounded"
                maxLength="2"
              />
            </div>
            <div>
              <label className="block text-sm font-medium mb-2">Yard/Cour</label>
              <input
                type="text"
                value={yard}
                onChange={(e) => setYard(e.target.value)}
                className="w-full p-2 border rounded"
                maxLength="2"
              />
            </div>
            <div>
              <label className="block text-sm font-medium mb-2">Rangée</label>
              <input
                type="text"
                value={row}
                onChange={(e) => setRow(e.target.value.toUpperCase())}
                className="w-full p-2 border rounded"
                maxLength="1"
              />
            </div>
            <div>
              <label className="block text-sm font-medium mb-2">Emplacement</label>
              <input
                type="text"
                value={spot}
                onChange={(e) => setSpot(e.target.value)}
                className="w-full p-2 border rounded"
                maxLength="3"
              />
            </div>
          </div>
          
          <div className="mt-6 space-y-4">
            <div className="text-lg font-bold text-center">{generateCode()}</div>
            <div className="flex justify-center">
              {generateBarcodeSVG(generateCode())}
            </div>
          </div>

          <div className="mt-4 p-4 bg-gray-50 rounded">
            <h3 className="font-medium mb-2">Légende:</h3>
            <ul className="text-sm space-y-1">
              <li>ZN = Zone</li>
              <li>Y = Yard/Cour</li>
              <li>Rangée = Lettre (A-Z)</li>
              <li>Emplacement = Numéro (001-999)</li>
            </ul>
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

export default BarcodeGenerator;