'use strict';
Object.defineProperty(exports, "__esModule", { value: true });
/* global view, player, send_action, action_button */
// const SPACE_COUNT = 64;
// const PIECE_COUNT = 32;
const CARD_COUNT = 62;
const STANDEES_COUNT = 5;
let ui = {
    map: document.getElementById('map'),
    hand: document.getElementById('hand'),
    current_events: document.getElementById('current_events'),
    tracks: document.getElementById('tracks'),
    fronts: {},
    frontValues: {},
    spaces: [],
    standees: [],
    pieces: [],
    cards: [],
};
let action_register = [];
const LAYOUT_CURRENT_EVENTS = [
    [172, 648],
    [309, 648],
    [445, 648],
    [584, 648],
];
const LAYOUT_TRACKS = [
    [[581, 46], [618, 46], [655, 46], [691, 46], [728, 46], [765, 46], [801, 46], [838, 46], [874, 46], [911, 46], [948, 46]],
    [[581, 156], [618, 156], [655, 156], [691, 156], [728, 156], [765, 156], [801, 156], [838, 156], [874, 156], [911, 156], [948, 156]],
    [[581, 267], [618, 267], [655, 267], [691, 267], [728, 267], [765, 267], [801, 267], [838, 267], [874, 267], [911, 267], [948, 267]],
    [[581, 378], [618, 378], [655, 378], [691, 378], [728, 378], [765, 378], [801, 378], [838, 378], [874, 378], [911, 378], [948, 378]],
    [[581, 489], [618, 489], [655, 489], [691, 489], [728, 489], [765, 489], [801, 489], [838, 489], [874, 489], [911, 489], [948, 489]],
];
// @ts-ignore
(function build_map() {
    // @ts-ignore
    const spaces = document.getElementById('spaces');
    console.log('build_map', data);
    data.fronts.forEach((front, index) => {
        const { id, top, left } = front;
        const element = (ui.fronts[index] = document.createElement('div'));
        element.classList.add('front');
        element.style.left = `${left}px`;
        element.style.top = `${top}px`;
        element.setAttribute('data-front-id', `${id}`);
        spaces.appendChild(element);
        const frontValueElement = (ui.frontValues[front.id] = document.createElement('span'));
        frontValueElement.classList.add('value');
        element.appendChild(frontValueElement);
    });
})();
console.log('ui', ui);
// @ts-ignore
function register_action(e, _action, _id) {
    // e.my_action = action
    // e.my_id = id
    e.onmousedown = on_click_action;
    action_register.push(e);
}
function on_click_action(evt) {
    if (evt.button === 0)
        if (send_action(evt.target.my_action, evt.target.my_id))
            evt.stopPropagation();
}
// function is_action(action, arg) {
//   if (arg === undefined) return !!(view.actions && view.actions[action] === 1);
//   return !!(
//     view.actions &&
//     view.actions[action] &&
//     view.actions[action].includes(arg)
//   );
// }
let on_init_once = false;
function on_init() {
    console.log('on_init');
    if (on_init_once)
        return;
    on_init_once = true;
    console.log('ui', ui);
    console.log('document', document);
    // create space elements
    // for (let s = 0; s < SPACE_COUNT; ++s) {
    //   let e = ui.spaces[s].document.createElement('div');
    //   e.className = 'space';
    //   register_action(e, 'space', s);
    //   ui.map.appendChild(e);
    // }
    // // create piece elements
    // for (let p = 0; p < PIECE_COUNT; ++p) {
    //   let e = (ui.pieces[p] = document.createElement('div'));
    //   e.className = 'piece';
    //   register_action(e, 'piece', p);
    // }
    // create track standees
    for (let s = 0; s < STANDEES_COUNT; ++s) {
        let e = (ui.standees[s] = document.createElement('div'));
        e.className = 'standee';
        e.setAttribute('data-standee-id', '' + s);
        register_action(e, 'standee', s);
    }
    console.log('standees', ui.standees);
    // create card elements
    for (let c = 1; c < CARD_COUNT; ++c) {
        let e = (ui.cards[c] = document.createElement('div'));
        e.className = 'card';
        e.setAttribute('data-card-id', '' + data.cards[c].id);
        register_action(e, 'card', c);
    }
}
// @ts-ignore
function on_update() {
    console.log('on_update', view);
    on_init();
    // for (let s = 0; s < SPACE_COUNT; ++s) ui.spaces[s].replaceChildren();
    // for (let p = 0; p < PIECE_COUNT; ++p) {
    //   let s = view.location[p];
    //   ui.spaces[s].appendChild(ui.pieces[p]);
    // }
    ui.current_events.replaceChildren();
    for (let i = 0; i < view.current_events.length; i++) {
        const cardId = view.current_events[i];
        ui.current_events.appendChild(ui.cards[cardId]);
        ui.cards[cardId].classList.add('event');
        ui.cards[cardId].style.left = LAYOUT_CURRENT_EVENTS[i][0] + 'px';
        ui.cards[cardId].style.top = LAYOUT_CURRENT_EVENTS[i][1] + 'px';
    }
    ui.hand.replaceChildren();
    for (let c of view.hand)
        ui.hand.appendChild(ui.cards[c]);
    for (let i = 0; i < view.tracks.length; i++) {
        ui.tracks.appendChild(ui.standees[i]);
        ui.standees[i].style.left = LAYOUT_TRACKS[i][view.tracks[i]][0] + 'px';
        ui.standees[i].style.top = LAYOUT_TRACKS[i][view.tracks[i]][1] + 'px';
    }
    for (let frontId of Object.keys(view.fronts)) {
        ui.frontValues[frontId].replaceChildren(view.fronts[frontId]);
    }
    // for (let e of action_register)
    //   e.classList.toggle('action', is_action(e.my_action, e.my_id));
    action_button('next', 'Next');
    action_button('undo', 'Undo');
}