import React, { Component } from 'react';

export default class SudokuBoardView extends Component {
    constructor(props) {
        super(props);

        this.renderSudokuBoard = this.renderSudokuBoard.bind(this);
        this.renderSolveClearButton = this.renderSolveClearButton.bind(this);
        this.renderResetButton = this.renderResetButton.bind(this);
        this.renderGenerateButton = this.renderGenerateButton.bind(this);
        this.renderGitHubLink = this.renderGitHubLink.bind(this);
        this.getCellValue = this.getCellValue.bind(this);
        this.handleCellInput = this.handleCellInput.bind(this);
        this.getCellStyling = this.getCellStyling.bind(this);
    }

    render() {
        return (
            <div>
                <h1 className={'heading'}>Sudoku AI</h1>
                {this.renderSudokuBoard()}
                {this.renderSolveClearButton()}
                {this.renderResetButton()}
                {this.renderGenerateButton()}
                <br />
                {this.renderGitHubLink()}
            </div>
        );
    }

    renderSudokuBoard() {
        const board = this.props.sudokuBoard.board;
        let cellCount = 0;
        return (
            <table id="grid">
                <tbody>
                    {board.map((row, rowIndex) => (
                        <tr key={`row-${cellCount}`}>
                            {row.map((cell, colIndex) => (
                                <td key={`data-${cellCount}`}>
                                    <input
                                        id={`cell-${cellCount++}`}
                                        type="text"
                                        value={this.getCellValue(rowIndex, colIndex)}
                                        onChange={event => this.handleCellInput(event, rowIndex, colIndex)}
                                        className={this.getCellStyling(rowIndex, colIndex)}
                                        disabled={this.props.sudokuBoard.isSolved}
                                    />
                                </td>
                            ))}
                        </tr>
                    ))}
                </tbody>
            </table>
        );
    }

    renderSolveClearButton() {
        return this.props.sudokuBoard.isSolved ? (
            <button className={'button'} onClick={this.props.resetSolution}>
                <span>Clear</span>
            </button>
        ) : (
            <button className={'button'} onClick={this.props.solveBoard} disabled={!this.props.sudokuBoard.isValid}>
                <span>Solve</span>
            </button>
        );
    }

    renderResetButton() {
        return (
            <button className={'button'} onClick={this.props.resetBoard} disabled={this.props.sudokuBoard.isEmpty}>
                <span>Reset</span>
            </button>
        );
    }

    renderGenerateButton() {
        return (
            <button className={'button'} onClick={this.props.generateBoard} disabled={!this.props.sudokuBoard.isEmpty}>
                <span>Generate</span>
            </button>
        );
    }

    renderGitHubLink() {
        return (
            <a className={'github-link'} href="https://github.com/JPStrydom/Sudoku-AI.git">
                Project GitHub Repository
            </a>
        );
    }

    getCellValue(row, col) {
        const board = this.props.sudokuBoard.board;
        const value = board[row][col];
        return value >= 1 && value <= 9 ? value : '';
    }

    getCellStyling(row, col) {
        const board = this.props.sudokuBoard.board;
        if (this.props.sudokuBoard.solvedCells[row][col] && this.props.sudokuBoard.isSolved) {
            return 'solved-cell';
        }
        if (this.props.sudokuBoard.errorCells[row][col]) {
            return 'invalid-cell';
        }
        if (board[row][col] === 0) {
            return null;
        }
        return 'valid-cell';
    }

    handleCellInput(event, row, col) {
        let value = event.target.value[event.target.value.length - 1];
        this.props.updateCell(row, col, value);
        if (!value) {
            return this.props.clearBoardErrors();
        }
        setTimeout(() => this.props.clearBoardErrors(), 500);
    }
}

@@ -310,33 +310,16 @@
 nder
-ResetButton = this.r
+G
 en
-d
 er
+ate
 Rese
@@ -329,54 +329,8 @@
 tton
-.bind(this);%0A        this.renderGenerateButton
  = t
@@ -343,24 +343,29 @@
 nderGenerate
+Reset
 Button.bind(
@@ -830,51 +830,8 @@
 ()%7D%0A
-                %7Bthis.renderResetButton()%7D%0A
     
@@ -854,32 +854,37 @@
 s.renderGenerate
+Reset
 Button()%7D%0A      
@@ -2382,32 +2382,53 @@
          %3Cbutton
+ title=%22Hello World!%22
  className=%7B'but
@@ -2594,16 +2594,24 @@
   render
+Generate
 ResetBut
@@ -2624,32 +2624,65 @@
 %7B%0A        return
+ this.props.sudokuBoard.isEmpty ?
  (%0A            %3C
@@ -2733,60 +2733,21 @@
 ops.
-resetBoard%7D disabled=%7Bthis.props.sudokuBoard.isEmpty
+generateBoard
 %7D%3E%0A 
@@ -2767,21 +2767,24 @@
   %3Cspan%3E
-Reset
+Generate
 %3C/span%3E%0A
@@ -2818,63 +2818,14 @@
    )
-;%0A    %7D%0A%0A    renderGenerateButton() %7B%0A        return (%0A
+ : (%0A 
     
@@ -2823,33 +2823,32 @@
 : (%0A            
- 
 %3Cbutton classNam
@@ -2884,64 +2884,18 @@
 ops.
-generateBoard%7D disabled=%7B!this.props.sudokuBoard.isEmpty
+resetBoard
 %7D%3E%0A 
@@ -2911,32 +2911,29 @@
       %3Cspan%3E
-Generate
+Reset
 %3C/span%3E%0A    

Add alternate button layout