'use strict';

import {
 
  StaticData,
} from './data';
import { View } from './types';

declare function action_button(action: string, text: string): void;
// declare function register_action(element: HTMLElement, type: string, s: number): void;
declare function send_action(action: string, text: string): boolean;
declare const data: StaticData;
declare const view: View;

/* global view, player, send_action, action_button */

const BONUSES_COUNT = 2;
// const PIECE_COUNT = 32;
const CARD_COUNT = 62;
const MEDAILLONS_COUNT = 5;
const STANDEES_COUNT = 5;

let ui = {
  map: document.getElementById('map'),
  hand: document.getElementById('hand'),
  current_events: document.getElementById('current_events'),
  tracks: document.getElementById('tracks'),
  bonuses: [],
  fronts: {},
  frontValues: {},
  medaillons: [],
  spaces: [],
  standees: [],
  pieces: [],
  cards: [],
};

let action_register = [];

const LAYOUT_BONUSES = [
  [435, 481],
  [493, 481],
];

const LAYOUT_CURRENT_EVENTS = [
  [172, 648],
  [309, 648],
  [445, 648],
  [584, 648],
];

const LAYOUT_MEDAILLONS = [
  [364, 556],
  [415, 556],
  [466, 556],
  [517, 556],
  [568, 556],
];

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() {
  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}`);
    ui.map.appendChild(element);
    const frontValueElement = (ui.frontValues[front.id] =
      document.createElement('span'));
    frontValueElement.classList.add('value');
    register_action(element, 'front', id);
    element.appendChild(frontValueElement);
  });
})();

console.log('ui', ui);

function register_action(
  e: HTMLElement & { my_action?: string; my_id?: string | number },
  action: string,
  id: string | number
) {
  e.my_action = action;
  e.my_id = id;
  e.onmousedown = on_click_action;
  action_register.push(e);
}

function on_click_action(evt) {
  console.log('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 bonus markers
  for (let b = 0; b < BONUSES_COUNT; ++b) {
    let e = (ui.bonuses[b] = document.createElement('div'));
    e.className = 'bonus';
    e.setAttribute('data-bonus-id', '' + b);
    e.style.left = LAYOUT_BONUSES[b][0] + 'px';
    e.style.top = LAYOUT_BONUSES[b][1] + 'px';
    LAYOUT_BONUSES;
    register_action(e, 'bonus', b);
    ui.map.appendChild(ui.bonuses[b]);
  }

  // create track medaillons
  for (let m = 0; m < MEDAILLONS_COUNT; ++m) {
    let e = (ui.medaillons[m] = document.createElement('div'));
    e.className = 'medaillon';
    e.setAttribute('data-medaillon-id', '' + m);
    register_action(e, 'medaillon', m);
    ui.map.appendChild(ui.medaillons[m]);
  }

  // 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);
    ui.tracks.appendChild(ui.standees[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);
  }

  console.log('action_register', action_register[0]);
}

// @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';
  }

  for (let bonus_id of Object.keys(view.bonuses)) {
    ui.bonuses[bonus_id].setAttribute(
      'data-bonus-on',
      view.bonuses[bonus_id] + 0
    );
  }

  ui.hand.replaceChildren();
  for (let c of view.hand) {
    ui.cards[c].classList.remove('selected');
    ui.hand.appendChild(ui.cards[c]);
    if (c === view.selected_card) {
      ui.cards[c].classList.add('selected');
    }
  };

  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 i = 0; i < view.medaillons.length; ++i) {
    if (view.medaillons[i] !== null) {
      ui.medaillons[i].style.left = LAYOUT_MEDAILLONS[i][0] + 'px';
      ui.medaillons[i].style.top = LAYOUT_MEDAILLONS[i][1] + 'px';
    }
  }

  for (let e of action_register)
    e.classList.toggle('action', is_action(e.my_action, e.my_id));

  action_button('Anarchist', 'Anarchist');
  action_button('Communist', 'Communist');
  action_button('Moderate', 'Moderate');
  action_button('draw_card', 'Draw card');
  action_button('play_for_ap', 'Play card for Action Points');
  action_button('play_for_event', 'Play card for Event');
  action_button('spend_hp', 'Spend Hero Points');
  action_button('add_glory', 'Add Glory');
  action_button('next', 'Next');
  action_button('done', 'Done');
  action_button('undo', 'Undo');
}

// @ts-ignore
function on_log(text) {
  let p = document.createElement('div');

  if (text.match(/^>/)) {
    text = text.substring(1);
    p.className = 'i';
  }

  text = text.replace(/&/g, '&amp;');
  text = text.replace(/</g, '&lt;');
  text = text.replace(/>/g, '&gt;');
  // text = text.replace(/C(\d+)/g, sub_card_name)
  // text = text.replace(/S(\d+)/g, sub_space_name)
  // text = text.replace(/U(\d+)/g, sub_unit_name)

  // TODO dice icons
  // text = text.replace(/\bD\d\b/g, sub_icon)

  if (text.match(/^\.h1/)) {
    text = text.substring(4);
    p.className = 'h1';
  } else if (text.match(/^\.h2/)) {
    text = text.substring(4);
    p.className = 'h2';
  } else if (text.match(/^\.h3\.allies/)) {
    text = text.substring(10);
    p.className = 'h3 allies';
  } else if (text.match(/^\.h3\.germans/)) {
    text = text.substring(11);
    p.className = 'h3 germans';
  } else if (text.match(/^\.h3/)) {
    text = text.substring(4);
    p.className = 'h3';
  }

  p.innerHTML = text;
  return p;
}