const BarcodeScanner = (props) => {
    const { handleAction, handleClose, title } = props;
    const cameraRef = useRef(null);
    const [using, setUsing] = useState(false);

    useEffect(() => {
        const quaggaConf = {
            inputStream: {
                target: cameraRef.current,
                type: "LiveStream",
                constraints: {
                    width: { min: 640 },
                    height: { min: 480 },
                    facingMode: "environment", // Sử dụng camera phía sau
                    aspectRatio: { min: 1, max: 2 }
                }
            },
            decoder: {
                readers: ['code_128_reader']
            },
        };

        Quagga.init(quaggaConf, (err) => {
            if (err && using) {
                alert('Camera not found!');
                console.error(err);
                return;
            }
            setUsing(true);
            Quagga.start();
        });

        Quagga.onDetected((result) => {
            handleAction(result);
            setUsing(false);
            Quagga.stop();
            handleClose();
        });

        // Cleanup function to stop Quagga on component unmount
        return () => {
            Quagga.stop();
            Quagga.offDetected();
            setUsing(false);
        };
    }, []);

    return (
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <div 
                ref={cameraRef} 
                style={{ 
                    width: '100%', // Đặt chiều rộng tự động cho mobile
                    maxWidth: '300px', // Thiết lập chiều rộng tối đa
                    height: '200px', // Đặt chiều cao cố định
                    overflow: 'hidden', // Ẩn phần video tràn ra ngoài
                    position: 'relative' // Để gọi thuộc tính tuyệt đối bên trong
                }}
            >
                {/* Video sẽ tự động căn chỉnh sau này */}
                <video 
                    style={{ 
                        width: '100%', 
                        height: '100%', 
                        objectFit: 'cover', // Giữ tỷ lệ khung hình vừa đủ cho video
                        position: 'absolute', // Để căn chỉnh video
                        top: 0,
                        left: 0
                    }}
                />
            </div>

            {/* Nút Close nằm ngay bên dưới camera */}
            <ButtonCtl
                label={
                    <>
                        <i className="fa fa-window-close-o" style={{ paddingRight: 4 }} aria-hidden="true"></i>
                        Close
                    </>
                }
                onClick={handleClose}
                variant='info'
                type='button'
                tabIndex="-1"
                style={{ marginTop: 10, padding: 10, width: '100%', maxWidth: '300px' }} // Đặt chiều rộng ở đây cho button
            />      
        </div>
    );
};