import { h, Component } from 'preact'

export default class ButtonGrid extends Component {
  state = {
    x: 0, y: 0,
  }

  render() {
    const {
      x: _x,
      y: _y,
    } = this.state
    const {
      x: X,
      y: Y,
      max = Infinity,
      onClick,
      onHover,
    } = this.props
    return (
      <table className='buttonGrid'>
        <tr className='row'>
          <th>{" "}</th>
          {X.map(x => (
            <th className={x === _x && 'bold'}>{x}</th>
          ))}
        </tr>          
        {Y.map(y => (
          <tr className='row'>
            <th className={y === _y && 'bold'}>{y}</th>
            {X.map(x => (
              <td>
                {x * y > max ? " " :
                  <button
                    onClick={() => onClick(x, y)}
                    onMouseEnter={() => {
                      this.setState({ x, y })
                      onHover(x, y)
                    }}
                  >
                    {" "}
                  </button>
                }
              </td>
            ))}
          </tr>
        ))}
      </table>
    )
  }
}