import React, { Component } from 'react';
import '../styles/styles.css';
import '../styles/bootstrap.css';
import Field from '../components/Field.js';
import Ready from '../components/Ready.js';
import request, {host} from '../scripts/requests.js';

class NewGame extends Component {

    getToken() {
        return this.queryParams.get('playerToken');
    }

    getGameId() {
        return this.queryParams.get('gameId');
    }

    constructor(props) {
        super(props);
        this.state = {
            ok: false
        }
        this.queryParams = new URLSearchParams(window.location.search);
    }

    update() {
        const line = this.field.getLine();
        request("check_field_correct", {field: line}, (response) => {
            this.setState({ok: response.correct});
            if (response.correct) {
                this.ready.setState({
                    text: "Я готов",
                    disabled: false
                })
            } else {
                this.ready.setState({
                    text: "Расставь корабли чтобы активировать",
                    disabled: true
                })
            }
            this.ready.setState({ok: this.state.ok});
        });
    }

  render() {
    return (
        <div>
            <center><p className='logo'>Расставь корабли</p></center>
            {/* <div className='row'>
                <div className='col-1'>
                    <p>Player1</p>
                    <Field parent={this} changeable={true} />
                </div>
                <div className='col-5'></div>
                <div className='col-1'>
                    <p>Player2</p>
                    <Field parent={this} changeable={false} />
                </div>
            </div> */}
            <div className='row'>
                <div className='col-1'>
                    <p>Player1</p>
                    <Field ready={false} parent={this} changeable={true} />
                </div>
            </div>
            <center>
                <p>Ссылка для подключения</p>
                <input className='borders' value={host + "connect?token=" + this.getToken()} />
            </center>
            <Ready ok={this.state.ok} parent={this} />
        </div>
    );
  }
}

export default NewGame;