import { board } from "../board.js"

const HEAD_TOP_VW = 20
const HEAD_TOP_VH = 20

const MEDIA_LISTENER = window.matchMedia("(max-width: 600px)")

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

const PLACE_VALUES = {
    size: 54,
    size_mob: 72,
}


export function placeOnBoard({
    position = new Vector2(0, 0),
    board_size = 9,
}) {
    let response = {}
    if (MEDIA_LISTENER.matches) {
        let size = PLACE_VALUES.size_mob / board_size
        response["left"] = `calc(50% + ${position.x * (80 / (board_size - 1)) - size / 2 - 40}vw)`
        response["top"] = `calc(${30 + 5 + position.y * (80 / (board_size - 1)) - size / 2 - HEAD_TOP_VW}vw + ${HEAD_TOP_VH}vh)`
        response["width"] = `${size}vw`
    } else {
        let size = PLACE_VALUES.size / board_size
        response["left"] = `calc(50% - 30vh + ${position.x * (60 / (board_size - 1)) - 54 / board_size / 2}vh)`
        response["top"] = `${14 + 5 + position.y * (60 / (board_size - 1)) - size / 2}vh`
        response["width"] = `${size}vh`
    }

    return response
}


export class Vector2 {
    constructor(x, y) {
        this.x = x
        this.y = y
    }
}