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)
                .filter((x) => x !== undefined)
                .map(y => {
                    y.update(MEDIA_LISTENER)
                })
        })

    Array.from(board.links)
        .forEach(x => {
            Array.from(x)
                .filter((x) => x !== undefined)
                .map(y => {
                    y.update(MEDIA_LISTENER)
            })
        })
});

const PLACE_VALUES = {
    stone: {
        size: 54,
        size_mob: 72,
    },
    link: {
        size: 69,
        size_mob: 92,
    }
}


export function placeOnBoard({
    position = new Vector2(0, 0),
    board_size = 9,
    use_link_size = false,
}) {
    let response = {}
    if (MEDIA_LISTENER.matches) {
        let totalSize = (
            use_link_size ?
                PLACE_VALUES.link.size_mob : PLACE_VALUES.stone.size_mob
        )
        let size = totalSize / 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["size"] = `${size}vw`
    } else {
        let totalSize = (
            use_link_size ?
                PLACE_VALUES.link.size : PLACE_VALUES.stone.size
        )
        let size = totalSize / board_size
        response["left"] = `calc(50% - 30vh + ${position.x * (60 / (board_size - 1)) - totalSize / board_size / 2}vh)`
        response["top"] = `${14 + 5 + position.y * (60 / (board_size - 1)) - size / 2}vh`
        response["size"] = `${size}vh`
    }

    return response
}