const ScanBarcodeOrQRCode=(props)=>{
    const { barcode,  setBarcode,  handleClose, isMobile=false, config} = props
    const {Row, Col} = ReactBootstrap
    const [loading, setLoading] = useState(false)
    const handleChangeBarcodeCode=(value)=>{
        if (value== null || value.trim()==''){    
            return
        }    
        const cleanValue = value.replace(/[\n\r]+/g, '');

        // 3. (Tùy chọn) Trim để loại bỏ khoảng trắng ở 2 đầu nếu còn sót lại
        setBarcode(cleanValue.trim());
    }

    const handleCompleteScanQR=()=>{
        handleChangeBarcodeCode(barcode)
        handleClose()
    }
 
    return (
        <div>
            <LoadingComponent loading={loading} message="Wait" />
            <Row>
                <Col xs={4}>               
                    <TextInputCtl
                        label=""
                        placeholder=""
                        value={barcode}
                        onChange={(e) => setBarcode(e.target.value)}
                        type='text'
                        required={false}
                        feedback={null}
                        onEnter={(e)=>handleChangeBarcodeCode(e.target.value)}
                        size="sm"
                        autoFocus={true} // Tự động tập trung vào TextInput
                        onFocus={(e) => e.target.select()}
                        tabIndex={1} // Thiết lập tabIndex cho TextInput
                    />
                </Col>
                <Col xs={8}>    
                    <ButtonCtl
                        label={<i className="fa fa-window-close" style={{ paddingRight: 4 }} aria-hidden="true">{config?.lang === 'vi' ? "Đóng" : "Close"}</i>}
                        onClick={handleClose}
                        variant='secondary'
                        type='button'
                        style={{ float: 'right', marginLeft: '10px' }} // Thêm khoảng cách giữa các nút
                        visible={true}     
                        tabIndex={4} // Thay đổi tabIndex
                    />
                    <ButtonCtl
                            label={<i className="fa fa-plus-circle" style={{ paddingRight: 4 }} aria-hidden="true">{config?.lang === 'vi' ? "Nhập" : "Enter"}</i>}
                            onClick={handleChangeBarcodeCode(barcode)}
                            variant='primary'
                            type='button'
                            style={{ float: 'right' }}
                            visible={true}      
                            tabIndex={2} // Thay đổi tabIndex
                        />                  
                </Col>
            </Row>
            {isMobile &&
                <Row>
                    <Col>
                        <HTML5QRCodeScanner {...props} handleClose={null} 
                            userInfo={null} hostName={null} setValue={setBarcode} handleAction={handleCompleteScanQR}
                        />        
                    </Col>
                </Row>
            }
        </div>
    )
}