export class UpdateGame extends Component {
    state = {
        updateId: '',
        updateName: " ",
        updatePrice:  " " ,
        updateOnStock: " "

    }

handleChangeId = ( event ) => {
    let idITextbox = event.target.value;
    this.setState({ updateId: idITextbox });
}

handleChangeName = ( event ) => {
    let nameITextbox = event.target.value;

    this.setState( { updateName: nameITextbox});
}

componentDidMount() {
    if(this.props.match.params.id) {
        this.setState({updateId: this.props.match.params.id});
    }
}

handleChangePrice = ( event ) => {
    let priceITextbox = event.target.value;
    this.setState( { updatePrice: priceITextbox});
}

handleChangeOnStock = ( event ) => {
    let onStockITextbox = event.target.value;
    this.setState( { updateOnStock: onStockITextbox});
}

updateNewGame = ( event ) => {
    event.preventDefault();
    let updateGame = {
        name: this.state.updateName,
        price: this.state.updatePrice,
        onstock: this.state.updateOnStock,
        id: this.state.updateId - 0
    };

    axios.put(`https://localhost:5001/games/`, updateGame)
    .then(response => {
        console.log(response);
        console.log(response.data);
        this.props.history.push("/deletegame");
    })
}

render(){
    return (
        <section>
            <center><h3>Update Game</h3></center>
            <form onSubmit = { this.updateNewGame }>
                <ul class="sub-menu" type="none">
                <label>Update name of the game</label>
                    <li><input onChange={ this.handleChangeName } type="text" value={ this.state.updateName} /></li>
                <label>Update price</label>
                    <li><input onChange={ this.handleChangePrice } type="number" min="1" max="1000"  value={ this.state.updatePrice} /></li>
                    <p></p>
                <label>Update onstock by Available/Not Available</label>
                    <li> <input onChange={ this.handleChangeOnStock } type="text" value={ this.state.updateOnStock} /></li>
                    <p></p>
                    <li>   <button type="submit">Update</button></li>
                </ul>
            </form>
        </section>
    )

}
}