import { Component } from "react";
import '../styles/styles.css'

class Cell extends Component {

    constructor(props) {
        super(props);
        this.state = {
            h: props.h,
            v: props.v,
            color: "white",
        }
    }

    changeColor() {
        if (this.state.color === "white")
            this.setState({color: "green"});
        else
            this.setState({color: "white"});
        this.props.parent.props.parent.update();
    }

    shoot() {
        
    }

    click() {
        if (!this.props.changeable) return;
        if (this.props.parent.props.ready)
            this.shoot();
        else
            this.changeColor();
    }

    render() {
        this.props.parent.cells.push(this);
        this.props.parent.cells.sort((a, b) => a.key < b.key);
        console.log(this.props.parent.cells.length);
        return (
            <button style={{backgroundColor: this.state.color}} onClick={() => this.click()} className="cell"></button>
        )
    }
}

class Field extends Component {

    constructor(props) {
        super(props);

        props.parent.field = this;

        this.getLine = () => {
            let line = "";
            for (let i = 0; i < 100; i++) {
                line += this.cells.at(i).state.color === "white" ? " " : "o";
            }
            return line;
        }

    }

    render() {
        this.cells = [];
        let cells = [];
        for (let i = 0; i < 10; i++) {
            let line = []
            for (let j = 0; j < 10; j++) {
                const cell = <Cell parent={this} changeable={this.props.changeable} key={(i * 10 + j)} h={i} v={j} />;
                line.push(<td key={(i * 10 + j) * 100}>{cell}</td>);
            }
            cells.push(<tr key={(i * 100000)}>{line}</tr>);
        }
        return (
            <table>
                <tbody>
                    {cells}
                </tbody>
            </table>
        )
    }
}

export default Field;