//const { useState, useEffect, useRef } = React
function HTML5QRCodeScanner(props) {
    const {  setValue, fps = 10, qrbox = 250, height, width, handleClose,handleAction, title } = props;

    const qrRef = useRef();
    let html5QrcodeScanner = null;
  
    const openCamera = () => {
      html5QrcodeScanner = new Html5QrcodeScanner(
        "reader",
        {
          fps: fps,
          qrbox: qrbox,
          aspectRatio: 1.0,
          //facingMode: { exact: "environment" },
          facingMode: "environment", // Sử dụng camera sau

          decoderStopAtFirstResult: true,
          decoder: {
            //readers: ["qrcode_reader", "code_128_reader"]
            readers: ["qrcode_reader"]
          }
        }
      );
      html5QrcodeScanner.render(onScanSuccess, onScanError);
    };
  
    const onScanSuccess = (decodedText, decodedResult) => { 
      setValue(decodedText);
      setValue(prev => `${prev}\n`); // Thêm ký tự Enter
      if (handleAction){
        handleAction()
      }
      if (handleClose){
        handleClose();
      }      
    };
  
    const onScanError = (errorMessage) => {
      //setValue(errorMessage);
    };
  
    useEffect(() => {
      console.log('54365DFGDG89FF')
        openCamera();
  
      return () => {
        if (html5QrcodeScanner) {
          html5QrcodeScanner.clear(); // Cleanup on unmount
        }
      };
    }, []);
  
    return (
      <div>
        <h3>{title}</h3>
        <div ref={qrRef} id="reader" style={{ height: height, width: width, margin: '0 auto' }}></div>
      
      </div>
    );
  }