import { CSSProperties } from "react"
// import Bluetooth from './Bluetooth'
import BorderTiles from "./BorderTiles"
import EventBar from "./EventBar"
// import FogImages from './FogImages'
import HitElems from "./HitElems"
import Labeling from "./Labeling"
import Ships from "./Ships"
import useGameEvent from "../lib/hooks/useGameEvent"
import Targets from "./Targets"

function Gamefield() {
  const count = 12
  const { pointersProps, targetsProps, tilesProps, hits } = useGameEvent(count)

  return (
    <div id="gamefield">
      {/* <Bluetooth /> */}
      <div id="game-frame" style={{ "--i": count } as CSSProperties}>
        {/* Bordes */}
        <BorderTiles props={tilesProps} />

        {/* Collumn lettes and row numbers */}
        <Labeling count={count} />

        {/* Ships */}
        <Ships />

        <HitElems hits={hits} />

        {/* Fog images */}
        {/* <FogImages /> */}
        <Targets props={pointersProps} />
        {/* <span id='dev-debug' style={{gridArea: '1 / 12 / 1 / 15', backgroundColor: 'red', zIndex: 3} as CSSProperties}>Debug</span> */}
      </div>
      <EventBar props={targetsProps} />
    </div>
  )
}

export default Gamefield
