import { Vector2 } from "./engine/visual.js"
import { board } from "./board.js"

const ASSETS_BLACK = "assets/black.png"
const ASSETS_WHITE = "assets/white.png"

const HEAD_TOP_VW = 20
const HEAD_TOP_VH = 20

// Create a MediaQueryList object
const MEDIA_LISTENER = window.matchMedia("(max-width: 600px)")

// Attach listener function on state changes
MEDIA_LISTENER.addEventListener("change", function() {
    Array.from(board.stones).forEach(x => {
        Array.from(x).map(y => {
            if (y != null) {
                y.update(MEDIA_LISTENER)
            }
        })
    })
}); 

export class Stone {
    constructor({
        team = "black",
        position = new Vector2(0, 0),
    }) {
        this.team = team
        this.position = position

        this.create_span()
        board.stones[position.y][position.x] = this

        this.update(MEDIA_LISTENER)
    }

    create_span() {
        this.span = document.createElement("span")
        this.span.className = `stone ${this.team}`

        let img = document.createElement("img")
        img.src = this.team == "black" ? ASSETS_BLACK : ASSETS_WHITE
        this.span.appendChild(img)

        document.body.appendChild(this.span)
    }

    update(media) {
        if (media.matches) {
            let size = 72 / board.size
            this.span.style.left = `calc(50% + ${this.position.x * (80 / (board.size - 1)) - size / 2 - 40}vw)`
            this.span.style.top = `calc(${30 + 5 + this.position.y * (80 / (board.size - 1)) - size / 2 - HEAD_TOP_VW}vw + ${HEAD_TOP_VH}vh)`
            this.span.style.width = `${size}vw`
        } else {
            let size = 54 / board.size
            this.span.style.left = `calc(50% - 30vh + ${this.position.x * (60 / (board.size - 1)) - 54 / board.size / 2}vh)`
            this.span.style.top = `${14 + 5 + this.position.y * (60 / (board.size - 1)) - size / 2}vh`
            this.span.style.width = `${size}vh`
        }
    }
}