const preact = require('preact');
const { connect } = require('preact-redux');
const { Component } = require('preact');

const addState = connect(
    function receiveState(state) {
        const { ws, selectedCryps } = state;

        function sendInstanceNew(sCryps, name, players) {
            if (sCryps.length) {
                return ws.sendInstanceNew(sCryps, name, players);
            }
            return false;
        }

        return {
            sendInstanceNew,
            selectedCryps,
        };
    }
);

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

        this.state = { players: 2, name: '' };

        const { sendInstanceNew } = props;

        this.sendInstanceNew = sendInstanceNew.bind(this);

        this.nameChange = this.nameChange.bind(this);
        this.playersChange = this.playersChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    playersChange(event) {
        this.setState({ players: Number(event.target.value) });
    }

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

    handleSubmit(event) {
        event.preventDefault();
        this.sendInstanceNew(this.props.selectedCryps, this.state.name, this.state.players);
        this.setState({ name: '', players: 2 });
    }

    render() {
        return (
            <div
                className="">
                <div className="create-form">
                    <div>+</div>
                    <label>instance name</label>
                    <input
                        className="login-input"
                        type="text"
                        value={this.state.name}
                        placeholder="name"
                        onChange={this.nameChange}
                    />
                    <label htmlFor="playerSelect">players</label>
                    <select id="playerSelect"
                        onChange={this.playersChange}
                        >
                        <option value={1}>pve</option>
                        <option selected value={2}>2</option>
                        <option value={4}>4</option>
                        <option value={8}>8</option>
                        <option value={16}>16</option>
                    </select>
                    <button
                        onClick={this.handleSubmit}
                        type="submit">
                        create
                    </button>
                </div>
            </div>
        );
    }
}

module.exports = addState(InstanceCreateForm);