// import React, { useState, useEffect, useRef } from 'react';
// import QRCode from 'qrcode.react';
// import Barcode from 'react-barcode';
// import { QrReader } from 'react-qr-reader';
// import Quagga from 'quagga';
// import { QRCodeCanvas } from 'qrcode.react'; // Updated import

// import 'bootstrap/dist/css/bootstrap.min.css';
// import '../Dashboard/CSS/CSS/DataType2.css';

// const DataType2 = () => {
//   const [qrInput, setQrInput] = useState('');
//   const [barcodeInput, setBarcodeInput] = useState('');
//   const [image, setImage] = useState(null);
//   const [file, setFile] = useState(null);
//   const [video, setVideo] = useState(null);
//   const [audio, setAudio] = useState(null);
//   const [scanResult, setScanResult] = useState('');
//   const [barcodeResult, setBarcodeResult] = useState('');
//   const barcodeScannerRef = useRef(null);

//   const handleQrInputChange = (e) => {
//     setQrInput(e.target.value);
//   };

//   const handleBarcodeInputChange = (e) => {
//     setBarcodeInput(e.target.value);
//   };

//   const handleImageChange = (e) => {
//     if (e.target.files[0]) {
//       setImage(URL.createObjectURL(e.target.files[0]));
//     }
//   };

//   const handleFileChange = (e) => {
//     if (e.target.files[0]) {
//       setFile(e.target.files[0].name);
//     }
//   };

//   const handleVideoChange = (e) => {
//     if (e.target.files[0]) {
//       setVideo(URL.createObjectURL(e.target.files[0]));
//     }
//   };

//   const handleAudioChange = (e) => {
//     if (e.target.files[0]) {
//       setAudio(URL.createObjectURL(e.target.files[0]));
//     }
//   };

//   const handleScan = (data) => {
//     if (data) {
//       setScanResult(data);
//     }
//   };

//   const handleError = (err) => {
//     console.error(err);
//   };

//   useEffect(() => {
//     if (barcodeScannerRef.current) {
//       Quagga.init(
//         {
//           inputStream: {
//             name: 'Live',
//             type: 'LiveStream',
//             target: barcodeScannerRef.current,
//             constraints: {
//               facingMode: 'environment',
//             },
//           },
//           decoder: {
//             readers: ['code_128_reader'],
//           },
//         },
//         function (err) {
//           if (err) {
//             console.error(err);
//             return;
//           }
//           Quagga.start();
//         }
//       );

//       Quagga.onDetected((data) => {
//         setBarcodeResult(data.codeResult.code);
//       });

//       return () => {
//         Quagga.offDetected();
//         Quagga.stop();
//       };
//     }
//   }, []);

//   return (
//     <div className="container mt-5">
//       <h1 className="text-center mb-4">QR Code Generator</h1>
//       <div className="row justify-content-center mb-5">
//         <div className="col-md-6">
//           <input
//             type="text"
//             className="form-control mb-4"
//             placeholder="Enter text for QR code..."
//             value={qrInput}
//             onChange={handleQrInputChange}
//           />
//           <div className="d-flex justify-content-center">
//             <QRCode value={qrInput ? qrInput : 'https://example.com'} />
//           </div>
//         </div>
//       </div>

//       <h1 className="text-center mb-4">Barcode Generator</h1>
//       <div className="row justify-content-center mb-5">
//         <div className="col-md-6">
//           <input
//             type="text"
//             className="form-control mb-4"
//             placeholder="Enter text for barcode..."
//             value={barcodeInput}
//             onChange={handleBarcodeInputChange}
//           />
//           <div className="d-flex justify-content-center">
//             <Barcode
//               value={barcodeInput ? barcodeInput : '1234567890'}
//               format="CODE128"
//               displayValue={true}
//               width={1}
//               height={50}
//               margin={10}
//             />
//           </div>
//         </div>
//       </div>

//       <h1 className="text-center mb-4">Image Upload</h1>
//       <div className="row justify-content-center mb-5">
//         <div className="col-md-6">
//           <input
//             type="file"
//             className="form-control mb-4"
//             onChange={handleImageChange}
//             accept="image/*"
//           />
//           {image && <img src={image} alt="Uploaded" className="img-fluid rounded shadow" />}
//         </div>
//       </div>

//       <h1 className="text-center mb-4">File Upload</h1>
//       <div className="row justify-content-center mb-5">
//         <div className="col-md-6">
//           <input
//             type="file"
//             className="form-control mb-4"
//             onChange={handleFileChange}
//           />
//           {file && <p className="uploaded-file">Uploaded File: {file}</p>}
//         </div>
//       </div>

//       <h1 className="text-center mb-4">Video Upload</h1>
//       <div className="row justify-content-center mb-5">
//         <div className="col-md-6">
//           <input
//             type="file"
//             className="form-control mb-4"
//             onChange={handleVideoChange}
//             accept="video/*"
//           />
//           {video && <video src={video} controls className="img-fluid rounded shadow" />}
//         </div>
//       </div>

//       <h1 className="text-center mb-4">Audio Upload</h1>
//       <div className="row justify-content-center mb-5">
//         <div className="col-md-6">
//           <input
//             type="file"
//             className="form-control mb-4"
//             onChange={handleAudioChange}
//             accept="audio/*"
//           />
//           {audio && <audio src={audio} controls className="w-100" />}
//         </div>
//       </div>

//       <h1 className="text-center mb-4">QR Code Scanner</h1>
//       <div className="row justify-content-center mb-5">
//         <div className="col-md-6">
//           <QrReader
//             delay={300}
//             onError={handleError}
//             onScan={handleScan}
//             style={{ width: '100%' }}
//           />
//           {scanResult && <p className="scanned-result">Scanned Result: {scanResult}</p>}
//         </div>
//       </div>

//       <h1 className="text-center mb-4">Barcode Scanner</h1>
//       <div className="row justify-content-center mb-5">
//         <div className="col-md-6">
//           <div ref={barcodeScannerRef} className="barcode-scanner"></div>
//           {barcodeResult && <p className="scanned-result">Last Scanned Barcode: {barcodeResult}</p>}
//         </div>
//       </div>
//     </div>
//   );
// };

// export default DataType2;


import React, { useState, useEffect, useRef } from 'react';
import { QRCodeCanvas } from 'qrcode.react'; // Use QRCodeCanvas instead of default import
import Barcode from 'react-barcode';
import { QrReader } from 'react-qr-reader';
import Quagga from 'quagga';
import 'bootstrap/dist/css/bootstrap.min.css';
import '../Dashboard/CSS/CSS/DataType2.css';
import { toast } from "react-toastify";
import Spinner from '../../UIComponants/Spinner';


const DataType2 = () => {
  const [qrInput, setQrInput] = useState('');
  const [barcodeInput, setBarcodeInput] = useState('');
  const [image, setImage] = useState(null);
  const [file, setFile] = useState(null);
  const [video, setVideo] = useState(null);
  const [audio, setAudio] = useState(null);
  const [loading, setLoading] = useState(true);
  const [scanResult, setScanResult] = useState('');
  const [barcodeResult, setBarcodeResult] = useState('');
  const barcodeScannerRef = useRef(null);

  const handleQrInputChange = (e) => setQrInput(e.target.value);
  const handleBarcodeInputChange = (e) => setBarcodeInput(e.target.value);
  
  const handleScan = (data) => data && setScanResult(data);
  const handleError = (err) => console.error(err);


  const handleImageChange = (e) => {
    if (e.target.files[0]) {
      setImage(URL.createObjectURL(e.target.files[0]));
      toast.success("Image uploaded successfully!");
    }
  };
  
  const handleFileChange = (e) => {
    if (e.target.files[0]) {
      setFile(e.target.files[0].name);
      toast.success("File uploaded successfully!");
    }
  };
  
  const handleVideoChange = (e) => {
    if (e.target.files[0]) {
      setVideo(URL.createObjectURL(e.target.files[0]));
      toast.success("Video uploaded successfully!");
    }
  };
  
  const handleAudioChange = (e) => {
    if (e.target.files[0]) {
      setAudio(URL.createObjectURL(e.target.files[0]));
      toast.success("Audio uploaded successfully!");
    }
  };
  useEffect(() => {
    // Simulate loading data
    setTimeout(() => {
      setLoading(false);
    }, 3000); // Simulated 3 seconds loading
  }, []);

  useEffect(() => {
    if (barcodeScannerRef.current) {
      Quagga.init(
        {
          inputStream: {
            name: 'Live',
            type: 'LiveStream',
            target: barcodeScannerRef.current,
            constraints: {
              facingMode: 'environment',
            },
          },
          decoder: {
            readers: ['code_128_reader'],
          },
        },
        (err) => {
          if (err) {
            console.error(err);
            return;
          }
          Quagga.start();
        }
      );

      Quagga.onDetected((data) => {
        setBarcodeResult(data.codeResult.code);
      });

      return () => {
        Quagga.offDetected();
        Quagga.stop();
      };
    }
  }, []);

  return (
    <div style={{marginTop:"11rem"}}>
      {loading ? (
        <Spinner/>
      ):(
        <div className="container mt-5">
      <h1 className="text-center mb-4">QR Code Generator</h1>
      <div className="row justify-content-center mb-5">
        <div className="col-md-6">
          <input
            type="text"
            className="form-control mb-4 custom-hover-border"
            placeholder="Enter text for QR code..."
            value={qrInput}
            onChange={handleQrInputChange}
          />
          <div className="d-flex justify-content-center">
            <QRCodeCanvas value={qrInput || 'https://example.com'} />
          </div>
        </div>
      </div>

      <h1 className="text-center mb-4">Barcode Generator</h1>
      <div className="row justify-content-center mb-5">
        <div className="col-md-6">
          <input
            type="text"
            className="form-control mb-4 custom-hover-border"
            placeholder="Enter text for barcode..."
            value={barcodeInput}
            onChange={handleBarcodeInputChange}
          />
          <div className="d-flex justify-content-center">
            <Barcode
              value={barcodeInput || '1234567890'}
              format="CODE128"
              displayValue
              width={1}
              height={50}
              margin={10}
            />
          </div>
        </div>
      </div>

      
      <h1 className="text-center mb-4">Image Upload</h1>
      <div className="row justify-content-center mb-5">
        <div className="col-md-6">
          <input
            type="file"
            className="custom-file-input"
            id="customFileImage"
            onChange={handleImageChange}
            accept="image/*"
          />
          <label htmlFor="customFileImage" className="custom-file-label">
            Choose File
          </label>
          {image && <img src={image} alt="Uploaded" className="img-fluid rounded shadow mt-3" />}
        </div>
      </div>

      <h1 className="text-center mb-4">Video Upload</h1>
      <div className="row justify-content-center mb-5">
        <div className="col-md-6">
          <input
            type="file"
            className="custom-file-input "
            id="customFileVideo"
            onChange={handleVideoChange}
            accept="video/*"
          />
          <label htmlFor="customFileVideo" className="custom-file-label ">
            Choose File
          </label>
          {video && <video src={video} controls className="img-fluid rounded shadow mt-3" />}
        </div>
      </div>

      <h1 className="text-center mb-4">Audio Upload</h1>
      <div className="row justify-content-center mb-5">
        <div className="col-md-6">
          <input
            type="file"
            className="custom-file-input custom-hover-border"
            id="customFileAudio"
            onChange={handleAudioChange}
            accept="audio/*"
          />
          <label htmlFor="customFileAudio" className="custom-file-label">
            Choose File
          </label>
          {audio && <audio src={audio} controls className="w-100 mt-3" />}
        </div>
      </div>

      <h1 className="text-center mb-4">QR Code Scanner</h1>
      <div className="row justify-content-center mb-5">
        <div className="col-md-6">
          <QrReader
            delay={300}
            onError={handleError}
            onScan={handleScan}
            style={{ width: '100%' }}
          />
          {scanResult && <p className="scanned-result">Scanned Result: {scanResult}</p>}
        </div>
      </div>

      <h1 className="text-center mb-4">Barcode Scanner</h1>
      <div className="row justify-content-center mb-5">
        <div className="col-md-6">
          <div ref={barcodeScannerRef} className="barcode-scanner"></div>
          {barcodeResult && <p className="scanned-result">Last Scanned Barcode: {barcodeResult}</p>}
        </div>
      </div>
    </div>
      )}
    </div>
    
  );
};

export default DataType2;
