const preact = require('preact');
const { Component } = require('preact');

class SpawnButton extends Component {
    constructor(props) {
        super(props);

        this.state = { value: null, enabled: false };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.enable = this.enable.bind(this);
    }

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

    handleSubmit(event) {
        event.preventDefault();
        this.props.spawn(this.state.value);
        this.setState({ value: null, enabled: false });
    }

    enable() {
        this.setState({ enabled: true });
    }

    render() {
        return (
            <div
                key={this.props.i}
                className="menu-cryp-ctr spawn-btn">
                <div
                    className="menu-cryp"
                    onClick={() => this.enable()} >
                    <h2>+</h2>
                    <input
                        className="login-input"
                        type="text"
                        disabled={!this.state.enabled}
                        value={this.state.value}
                        placeholder="name"
                        onChange={this.handleChange}
                    />
                    <button
                        className="login-btn"
                        disabled={!this.state.enabled}
                        onClick={this.handleSubmit}
                        type="submit">
                        spawn
                    </button>
                </div>
            </div>
        );
    }
}

module.exports = SpawnButton;