let white = document.getElementById("white_button");
let black = document.getElementById("black_button");
let white_time = document.getElementById("TimeWhite")
let black_time = document.getElementById("TimeBlack")
let black_move_left = document.getElementById("MoveLeftBlack")
let white_move_left = document.getElementById("MoveLeftWhite")
let BlockType = document.getElementById("BlockType")
let BlockTime = document.getElementById("BlockTime")
let start_clock_button = document.getElementById("StartClockButton")
let clock_white_win_button = document.getElementById("ClockWhiteWinButton")
let clock_black_win_button = document.getElementById("ClockBlackWinButton")
let clock_draw_button = document.getElementById("ClockDrawButton")
let trais = true


function msToMinSec(ms) {
    const totalSeconds = Math.floor(ms / 1000);
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;

    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}

function toggle_trais(){
    trais = !trais
    if (trais){
        showGlowRight()
    }else{
        showGlowLeft()
    }
}

function change_move_left_white(number){
    white_move_left.innerText = get_app_translation("clock.movesWhite", { number })
}

function change_move_left_black(number){
    black_move_left.innerText = get_app_translation("clock.movesBlack", { number })
}

function change_time_block(Time){
    BlockTime.innerText = get_app_translation("clock.blockTime", { time: msToMinSec(Time) })
}

function set_block_type(type){
    // true = +
    // false = -
    if (type){
        BlockType.innerText = "Block +"
    }else{
        BlockType.innerText = "Block -"
    }
}

function change_time_white(Time){
    white_time.innerText = msToMinSec(Time)
}

function change_time_black(Time){
    black_time.innerText = msToMinSec(Time)
}

function refresh_clock_scene_translations(){
    change_move_left_white(White.moveLeft)
    change_move_left_black(Black.moveLeft)
    change_time_block(Block.Time)
}

function show_start_clock_button(){
    start_clock_button.classList.remove("is-hidden")
}

function hide_start_clock_button(){
    start_clock_button.classList.add("is-hidden")
}

function on_clock_white_win_button_press(){
    change_winner(true)
    load_endgame_scene()
}

function on_clock_black_win_button_press(){
    change_winner(false)
    load_endgame_scene()
}

function on_clock_draw_button_press(){
    Draw()
    load_endgame_scene()
}

start_clock_button.addEventListener("click", () => {
    on_start_clock_button_press()
});

clock_white_win_button.addEventListener("click", () => {
    on_clock_white_win_button_press()
});

clock_black_win_button.addEventListener("click", () => {
    on_clock_black_win_button_press()
});

clock_draw_button.addEventListener("click", () => {
    on_clock_draw_button_press()
});

white.addEventListener("pointerdown", () => {
    if (!trais) white.classList.add("click");
    white_touch()
});
white.addEventListener("pointerup", () => {
    white.classList.remove("click");
});

black.addEventListener("pointerdown", () => {
    if (trais )black.classList.add("click");
    black_touch()
});
black.addEventListener("pointerup", () => {
    black.classList.remove("click");
});

function showGlowLeft() {
    document.body.classList.remove("glow-right");
    document.body.classList.add("glow-left");
}

function showGlowRight() {
    document.body.classList.remove("glow-left");
    document.body.classList.add("glow-right");
}

function hideGlow() {
    document.body.classList.remove("glow-left", "glow-right");
}