import React, {Component} from 'react';
import {Button} from 'react-bootstrap';
import Form from "react-bootstrap/Form";
import crtInterface from "../interface";
import {CONTRACT_ADDRESS, getAccounts} from "../App";
import Web3 from 'web3'

class Create extends Component {
    constructor(props) {
        super(props);
        this.state = {price: 0, dex_no: 0};
    }

    componentDidMount() {
        this._getAccounts = getAccounts().then(
            accounts => {
                this._getAccounts = null;
                this._web3 = new Web3(window.ethereum);
                this._account = accounts[0];
            }
        );
    }

    componentWillUnmount() {
        if (this._getAccounts) {
            this._getAccounts.cancel();
        }

        if (this._getCards) {
            this._getCards.cancel();
        }
    }

    handleChange(event) {
        this.setState({ [event.target.name] : event.target.value });
    }

    handleSubmit(event) {
        console.log('THIS HAS BEEN clicked' + this.state.price + " " + this.state.dex_no);
        alert('Pokemon will be created with pokedex_no: ' + this.state.dex_no + ' and price: '+ this.state.price);
        event.preventDefault();

        const crt = new this._web3.eth.Contract(crtInterface, CONTRACT_ADDRESS, {from: this._account})
        console.log(crt.options);
        crt.methods.createCard(parseInt(this.state.dex_no), parseInt(this.state.price)).send().on('confirmation', () => {
            this.refreshCards();
        })
    }

    render() {
        return (
            <div className="container">
                <div className="container">
                    <Form onSubmit={this.handleSubmit.bind(this)}>
                        <Form.Group controlId="formBasicEmail">
                            <Form.Label>Pokedex Number (between 1-151)</Form.Label>
                            <Form.Control type="number" name="dex_no" value={this.state.dex_no} onChange={this.handleChange.bind(this)} placeholder="Enter Pokedex Number"/>
                        </Form.Group>

                        <Form.Group controlId="formBasicPassword">
                            <Form.Label>Price of the Pokemon</Form.Label>
                            <Form.Control type="number" name="price" value={this.state.price} onChange={this.handleChange.bind(this)} placeholder="Price"/>
                        </Form.Group>
                        <Button variant="primary" type="submit">
                            Create
                        </Button>
                    </Form>
                </div>
                <div className="container" style={{'paddingTop':'40px'}}>
                    <Button variant="primary" size="lg">
                        Randomly Generate 100 Pokemon
                    </Button>
                </div>
            </div>
        )
    }
}

export default Create;