const ManageMember=(props, config)=>{
    const {custCode, setCustCode,handleChangeCustCode, handleClose, setBaskets, setMember, member,isMobile=false} = props
    const {Row, Col} = ReactBootstrap
    const [loading, setLoading] = useState(false)
    const handleCancelMember=()=>{
        setCustCode(null)
        setBaskets(prev => ({
            ...prev, 
            basket: {
                ...prev.basket,
                cust_code: null
            }
        }));
        
        setMember(null)
        handleClose()
    }   
    const handleCompleteScanQR=()=>{
        handleChangeCustCode()
        handleClose()
    }
    return (
        <div>
    <LoadingComponent loading={loading} message="Wait" />
    <Row>
        <Col xs={4}>               
            <TextInputCtl
                label=""
                placeholder=""
                value={custCode}
                onChange={(e) => setCustCode(e.target.value)}
                type='text'
                required={false}
                feedback={null}
                onEnter={handleChangeCustCode}
                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
            />
            {member && 
                <ButtonCtl
                    label={<i className="fa fa-arrow-circle-left" style={{ paddingRight: 4 }} aria-hidden="true">{config?.lang === 'vi' ? "Hủy Thành Viên" : "Cancel Member"}</i>}
                    onClick={handleCancelMember}
                    variant='danger'
                    type='button'
                    style={{ float: 'right', marginLeft: '10px' }} // Thêm khoảng cách giữa các nút
                    visible={true}
                    tabIndex={3} // Thay đổi tabIndex
                />
            }       
            {member == null && 
                <ButtonCtl
                    label={<i className="fa fa-plus-circle" style={{ paddingRight: 4 }} aria-hidden="true">{config?.lang === 'vi' ? "Nhập" : "Enter"}</i>}
                    onClick={handleChangeCustCode}
                    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={setCustCode} handleAction={handleCompleteScanQR}
                />        
            </Col>
        </Row>
    }
</div>
    )
}