'use strict';

var React = require('react');
var ReactDom = require('react-dom');
var client = require('./client');

class ValuesDialog extends React.Component {
    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        // this.sendValuesArray = this.sendValuesArray.bind(this);
        //this.getValuesArray = this.getValuesArray.bind(this);
    };

    handleSubmit(event) {
        event.preventDefault();
        var values = [];
        var i = 0;
        for (var k = 0; k < (this.props.rows); k++, i++) {
            values[k] = [];
            for (var j = 0; j < this.props.cols + 1; j++, i++) {
                values[k][j] = this.refs["x" + i].value.trim();
            }
        }
        values = JSON.stringify(values);
        var sendValuesArray = function (values) {
            fetch('/result', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: values
            })
        }(values);
        window.location = "#";
    };

    render() {
        var inputs = [];
        var i = 0;
        for (var k = 0; k < (this.props.rows); k++, i++) {
            for (var j = 0; j < this.props.cols - 1; j++, i++) {
                inputs[i] = function () {
                    return (
                        <text>
                            <input type="text" ref={"x" + (i)} className="field" placeholder={"x" + (j + 1)}
                                   key={"x" + (i)}/>
                            +
                        </text>
                    )
                }();
            }
            inputs[i] = function () {
                return (
                    <input type="text" className="field" ref={"x" + (i)} placeholder={"x" + (j + 1)} key={"x" + (i)}/>
                )
            }();

            i++;
            var sign = "<";
            inputs[i] = function () {
                return (
                    <text>
                        {sign}
                        <input type="text" className="field" ref={"x" + (i)} placeholder={"srct" + (k + 1)}
                               key={"srct" + (k + 1)}/><br/>
                    </text>

                )
            }();
        }

        var dialogId = "setValues";

        return (
            <div>
                <a href={"#" + dialogId}>setValues</a>

                <div id={dialogId} className="modalDialog">
                    <div>
                        <a href="#" title="Close" className="close">X</a>

                        <h2>Задайте уравнения и ограничения</h2>
                        <h4>*(если переменной нет, задайте 0)</h4>
                        <br/>
                        <form action="result" method="get">
                            <div className="inputs-array">{inputs}</div>
                            <button onClick={this.handleSubmit.bind(this)}>NEXT</button>
                        </form>
                    </div>
                </div>
            </div>
        );
    };
}

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            cols: '2',
            rows: '3'
        };
        this.handleChangeCols = this.handleChangeCols.bind(this);
        this.handleChangeRows = this.handleChangeRows.bind(this);
        this.onButtonClick = this.onButtonClick.bind(this);
    }

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

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

    onButtonClick(event) {
        return (
            <ValuesDialog cols={this.state.cols} rows={this.state.rows}/>
        );
    }

    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <span className="instruction"> Количество переменных  </span>
                    <select name="cols" className="input" value={this.state.cols} onChange={this.handleChangeCols}>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                    </select>
                    <br/>
                    <br/>
                    <span className="instruction"> Количество ограничений  </span>
                    <select name="rows" className="input" value={this.state.rows} onChange={this.handleChangeRows}>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                    </select>
                </form>
                <br/>
                <imaginary><ValuesDialog cols={this.state.cols} rows={this.state.rows}/></imaginary>
                <br/>
                <a href="/index.html#setValues" className="button"> <b className="boldText">{this.state.cols}</b>
                    переменных и <b className="boldText">{this.state.rows}</b> ограничения</a>
                <br/>
            </div>
        );
    }
}

ReactDom.render(<App />, document.getElementById('react'));