import './Board.css';
import React from 'react';

import { WhiteStone, BlackStone } from '../Stone' 

export default function Board() {

  return <div className='board'>
    <div className='row'>
      <BlackTile/> <WhiteTile id={0} stone={WhiteStone()} /> 
      <BlackTile/> <WhiteTile id={1} stone={WhiteStone()} />
      <BlackTile/> <WhiteTile id={2} stone={WhiteStone()} />
      <BlackTile/> <WhiteTile id={4} stone={WhiteStone()} />
    </div>
    <div className='row'>
      <WhiteTile id={5} stone={WhiteStone()} /> <BlackTile/>
      <WhiteTile id={6} stone={WhiteStone()} /> <BlackTile/>
      <WhiteTile id={7} stone={WhiteStone()} /> <BlackTile/>
      <WhiteTile id={8} stone={WhiteStone()} /> <BlackTile/>
    </div>
    <div className='row'>
      <BlackTile/> <WhiteTile id={ 9} stone={WhiteStone()} /> 
      <BlackTile/> <WhiteTile id={10} stone={WhiteStone()} />
      <BlackTile/> <WhiteTile id={11} stone={WhiteStone()} />
      <BlackTile/> <WhiteTile id={12} stone={WhiteStone()} />
    </div>
    <div className='row'>
      <WhiteTile id={13} stone={null} /> <BlackTile/>
      <WhiteTile id={14} stone={null} /> <BlackTile/>
      <WhiteTile id={15} stone={null} /> <BlackTile/>
      <WhiteTile id={16} stone={null} /> <BlackTile/>
    </div>

    <div className='row'>
      <BlackTile/> <WhiteTile id={17} stone={null} /> 
      <BlackTile/> <WhiteTile id={18} stone={null} />
      <BlackTile/> <WhiteTile id={19} stone={null} />
      <BlackTile/> <WhiteTile id={20} stone={null} />
    </div>
    <div className='row'>
      <WhiteTile id={21} stone={BlackStone()} /> <BlackTile/>
      <WhiteTile id={22} stone={BlackStone()} /> <BlackTile/>
      <WhiteTile id={23} stone={BlackStone()} /> <BlackTile/>
      <WhiteTile id={24} stone={BlackStone()} /> <BlackTile/>
    </div>
    <div className='row'>
      <BlackTile/> <WhiteTile id={25} stone={BlackStone()} /> 
      <BlackTile/> <WhiteTile id={26} stone={BlackStone()} />
      <BlackTile/> <WhiteTile id={27} stone={BlackStone()} />
      <BlackTile/> <WhiteTile id={28} stone={BlackStone()} />
    </div>
    <div className='row'>
      <WhiteTile id={29} stone={BlackStone()} /> <BlackTile/>
      <WhiteTile id={30} stone={BlackStone()} /> <BlackTile/>
      <WhiteTile id={31} stone={BlackStone()} /> <BlackTile/>
      <WhiteTile id={32} stone={BlackStone()} /> <BlackTile/>
    </div>
  </div>
}

function WhiteTile({ id, stone }) {

  return (
    <div 
      className='tile white'
      onClick={() => handleClick(id)}
    >
      {stone}
    </div>
  );
}

function BlackTile() {
  return <div className='tile black'/>
}

function handleClick(i) {
  console.log("click", i)
}