// resources/js/components/HelloReact.js

import React ,{Component}from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

export class VenteCode extends Component {
	
	constructor(props){
        super(props)
        
        this.state = {
			query : '',
            barcode : '',
            desi:'',
            categorieiId:'',
            tabInfo:[],
            trouver:false
        }
    }
	onChangeKey(e){
        this.setState({
            desi: e.target.value
        })

        if (this.state.desi.length>1) {
           axios.get(`info_compte/${this.state.desi}`)
           .then((response)=>{
               var data = response.data
               this.setState({
                   tabInfo: data,
                   trouver:true
               }) 
           })
        }
    }
	
	//Affichage des elements trouve
    renderLine(){
       return this.state.tabInfo.length>0 && this.state.trouver?  this.state.tabInfo.map((data,index)=>{
            return<li key={index} className="list-group-item" onClick={this.remplirLesChamp.bind(this,index)}> {data.designation} </li>           
        }) :''       
    }
	//Remplir les champs

    remplirLesChamp(index){
       var data = this.state.tabInfo[index]

       this.setState({
           desi: data.designation,
		   query: data,
           trouver:false
       })
    }
    render() {
        return (
            <>
        <div className="container mt-3">
			<div className="row">
				<div className="col-md4"></div>
					<div className="col-md-8">
						<input type="text" className="form-control" name="search" id="search" value={this.state.desi} onChange={this.onChangeKey.bind(this)}/>
						<ul className="list-group mt-1" id="list_produit" style={{ zIndex:'4' }}>
                            {this.renderLine()}                      
                        </ul>
					</div>
			</div>
		</div>
    </>
        )
    }
}
export default VenteCode

if (document.getElementById('searchfield')) {
    ReactDOM.render(<VenteCode />, document.getElementById('searchfield'));
}