import React, { Component } from 'react'

class SellerProducts extends Component {


    onSellerCostChange = (sellerCost, productId) => {
        this.props.onSellerCostChange(sellerCost, productId)
    }

    render() {
         if (this.props.selectedProducts.length < 1) {
            return null
        }
        const data = this.sellerProcuredCost(this.props.selectedProducts)
        return (
            <div>
                <form>
                    {data}
                </form>
            </div>
        )
    }

    sellerProcuredCost = (products) => {
        let self = this
        return products.map((item) => {
            console.log('lllllll ', item)
            let inputValue = ''//need to work on this
            let index = -1
            index = self.props.sellersCost.findIndex(data => data.product_id === item.value)
            console.log('index is ', index)
            if (index > -1) {
                inputValue = this.props.sellersCost[index].procured_cost
            }
            console.log('final input value ', inputValue)
            return <div key={item.value}>
                <input value={inputValue} type='number' placeholder='Procured Cost' onChange={(e) => { this.onSellerCostChange(e.target.value, item.value) }} />
                <span style={{ paddingLeft: "10px"}}>
                {item.label} *
                </span>
            </div>
        })
    }
}

export default SellerProducts