'use strict';

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

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;
declare const player: Player;

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

  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');
  action_button('add_glory', 'Add Glory');
}

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