class AjouterFacture extends Component {
  constructor(props) {
    super(props);
    this.state = {
      rowData: [],
      Produits: [],
      Quantite: "",
      Prix: ""
    };

    this.handleRowChange = this.handleRowChange.bind(this);
    this.handleRowDelete = this.handleRowDelete.bind(this);
    this.handleRowAdd = this.handleRowAdd.bind(this);
    this.getTotal = this.getTotal.bind(this);
    this.pushToCaller = this.pushToCaller.bind(this);
  }

  pushToCaller() {
    this.handleRowChange(this.state.id, {
      Quantite: parseInt(this.state.Quantite, 10),
      selectprdt: this.state.selectprdt,
      Prix: parseFloat(this.state.Prix),
    });
  }

  render() {

    return (<div className="animated fadeIn">



 <h6> Veuillez ajouter au moins un produit : </h6>
        <Table  >
        <thead >
                  <tr>
                    <th>PRODUIT</th>
                    <th>QUANTITE</th>
                    <th>PRIX UNITAIRE</th>
                    <th>TOTAL</th>
                    <th></th>
                  </tr>
                  </thead>
                  <tbody>
                {this.state.rowData.map((index) =>

                <tr key={index} id={index}
                onChange={this.handleRowChange}>


         <td> <Input type="select" name="selectedcl" id="selectcl"
                          placeholder="Veuillez sélectionner un produit"  value={this.state.rowData.selectprdt}
          onChange={this.handleselectprdtChange} >
           <option  key={-1} hidden>Choisisr un produit</option>


                     {  this.state.Produits.map((pdt, i) =>
                     <option key={i} >{pdt.Nomp}</option>
                     )}


                      </Input>
                    </td>
                    <td><Input type="number"
                          placeholder="0" value={this.state.rowData.Quantite} onChange={this.handleQuantiteChange}/></td>
                    <td>
                         <InputGroup ><Input type="text"
                          value={this.state.rowData.Prix} onChange={this.handlePrixChange} />
                          <InputGroupAddon addonType="prepend">
                              <InputGroupText><i ></i></InputGroupText>
                            </InputGroupAddon>
                                 </InputGroup >
                          </td>

                    <td >
                     <p >{this.state.Quantite * this.state.Prix}  </p>

                    </td>
                    <td>
                     <Button onClick={this.handleRowDelete} active style={center} >Effacer</Button>
      </td> </tr> )}



                  <tr>

            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td><Button onClick={this.handleRowAdd} >Ajouter une ligne</Button></td>
          </tr>
        </tbody>

        <tfoot>
          <tr>

            <th></th>
            <th >Grand total :</th>
            <th>{this.getTotal()} </th>
            <th></th>
          </tr>
</tfoot>

        </Table>


        </div>);
  }
  getTotal() {
    let grandTotal = 0;
    const rowTotals = this.state.rowData.map(row => this.state.Quantite *  this.state.Prix);
    if (rowTotals.length > 0) {
      grandTotal = rowTotals.reduce((acc, val) => acc + val);
    }
    return grandTotal;
  }
 handleRowChange(row, data) {
    const rowDataCopy = this.state.rowData.slice(0);
    rowDataCopy[row] = data;
    this.setState({
      rowData: rowDataCopy

    });
  }
  handleRowDelete(row) {
    const rowDataCopy = this.state.rowData.slice(0);
    rowDataCopy.splice(row, 1);
    this.setState({
      rowData: rowDataCopy
    });
  }
 handleRowAdd() {
    const rowDataCopy = this.state.rowData.slice(0);
    rowDataCopy.push({selectprdt:'', Quantite : "", Prix :"" });
    this.setState({
      rowData: rowDataCopy
    });
  }

}
export default AjouterFacture;