import { Observable } from "./observable";
// import counters from '../../public/assets/images/counters.svg';
// console.log('counters', counters);

// import svg from '../../public/assets/images/counters.svg';

// const doc = new DOMParser().parseFromString(svg, 'image/svg+xml');
// const rifle = document.importNode(doc.querySelector('#rifle'), true);
// const smg = document.importNode(doc.querySelector('#smg'), true);

// console.log('svg', counters);
// console.log('doc', doc);
// console.log('imported svg', rifle);
// console.log('imported svg', smg);

const weapons = {
  rifle: {
    name: 'Rifle',
    damage: '4L',
    shortRange: '1-27',
    longRange: '28-75'
  },
  smg: {
    name: 'SMG',
    damage: '3L',
    shortRange: '1-15',
    longRange: '16-25'
  },
  blazer: {
    name: 'Blazer',
    damage: '4L',
    shortRange: '1-17',
    longRange: '18-105'
  }
}

const cacheBuster = Array(20).fill(null).map(() => getRandomIntInclusive(0, 9)).join('');

function createIcon(number) {
  const [icon, use, text] = ['svg', 'use', 'text'].map(t => document.createElementNS(svgns, t));

  icon.setAttributeNS(null, 'viewBox', '-6 -6 12 12');
  icon.setAttribute('xmlns', svgns);

  // use.setAttributeNS(null, 'href', `assets/images/counters.svg?v=${cacheBuster}#counter-base`);
  use.setAttributeNS(null, 'href', `assets/images/counters.svg#counter-base`);
  // use.setAttributeNS(null, 'href', `${counters}#counter-base`);

  text.textContent = number;

  icon.appendChild(use);
  icon.appendChild(text);

  return icon;
}

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random#getting_a_random_integer_between_two_values_inclusive
function getRandomIntInclusive(min, max) {
  const minCeiled = Math.ceil(min);
  const maxFloored = Math.floor(max);
  return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled); // The maximum is inclusive and the minimum is inclusive
}

function createWeaponIcon(type) {
  const [icon, use] = ['svg', 'use'].map(t => document.createElementNS(svgns, t));

  icon.setAttributeNS(null, 'viewBox', '-6 -6 12 12');
  icon.setAttribute('xmlns', svgns);
  icon.classList.add('weapon-icon');

  // use.setAttributeNS(null, 'href', `assets/images/counters.svg?v=${cacheBuster}#${type}`);
  // use.setAttributeNS(null, 'href', `${counters}#${type}`);
  use.setAttributeNS(null, 'href', `assets/images/counters.svg#${type}`);

  icon.appendChild(use);
  // icon.appendChild(document.importNode(doc.querySelector(`#${type}`), true));

  return icon;
}

function createRecord(unit) {
  const { dataset: { allegiance, number, squad }} = unit,
    primaryWeapon = unit.querySelector('.primary-weapon'),
    pw = primaryWeapon.getAttributeNS(null, 'href').split('#').pop() || 'rifle',
    div = document.createElement('soldier-record-block'),
    spans = Array(6).fill('span').map(t => document.createElement(t)),
    [tn, sn, pwt, pwd, pwrs, pwrl] = spans;

  div.classList.add('soldier-record');
  if (unit.classList.contains('selected')) div.classList.add('selected');
  div.dataset.number = number;
  div.dataset.allegiance = allegiance;

  tn.setAttribute('slot', 'troop-number');
  tn.appendChild(createIcon(number));

  sn.setAttribute('slot', 'squad-number');
  sn.appendChild(createIcon(squad || 1));

  pwt.setAttribute('slot', 'primary-weapon-type');
  pwt.textContent = ' ' + weapons[pw].name;
  pwt.prepend(createWeaponIcon(pw));

  pwd.setAttribute('slot', 'primary-weapon-damage');
  pwd.textContent = weapons[pw].damage;

  pwrs.setAttribute('slot', 'primary-weapon-range-short');
  pwrs.textContent = weapons[pw].shortRange;

  pwrl.setAttribute('slot', 'primary-weapon-range-long');
  pwrl.textContent = weapons[pw].longRange;

  spans.forEach(el => div.appendChild(el));

  return div;
}

function createRecords(units) {
  const grouped = Array.from(units).reduce((acc, unit) => {
    acc[unit.dataset.allegiance]?.push(unit) || (acc[unit.dataset.allegiance] = [unit]);
    return acc;
  }, {});

  for (const al in grouped) {
    grouped[al] = grouped[al].map(createRecord);
  }

  return grouped;
}

function getRecord({ dataset: { allegiance: al, number: n }}) {
  const selector = `.soldier-record[data-number="${n}"][data-allegiance="${al}"]`;

  return document.querySelector(selector);
}

function deselect() {
  const selected = getSelected();

  if (selected) {
    selected.classList.remove('selected');
  }
}

function clear() {
  document.querySelectorAll('#record-sheet .soldier-record').forEach(el => el.remove());
  document.querySelector('#attacker-record .name').textContent = 'attacker';
  document.querySelector('#defender-record .name').textContent = 'defender';
}

function select(data) {
  const record = data && getRecord(data);
  const isSelected = record?.classList.contains('selected');

  deselect();

  if (isSelected || !data) return;

  record.classList.add('selected');
}

function endMove() {
  const selected = getSelected();

  if (selected) {
    selected.classList.toggle('movement-ended');
  }

  deselect();
}

export function getSelected() {
  return document.querySelector('.soldier-record.selected');
}

export function start(startLoc, units) {
  clear();
  const forces = createRecords(units);

  for (const affiliation in forces) {
    const container = document.querySelector(`#${affiliation}-record`);
    const records = container.querySelector('.records');
    const name = startLoc?.dataset[`${affiliation}Name`];

    if (name) {
      container.querySelector('.name').textContent = name;
    }
    forces[affiliation].forEach(r => records.appendChild(r));
  }

  document.querySelectorAll('.soldier-record').forEach(el =>
    el.addEventListener('click', () => Observable.notify('select', el))
  );

  Observable.subscribe('select', select);
  Observable.subscribe('endmove', endMove);

  console.log('records created');
}

export function stop() {
  Observable.unsubscribe('select', select);
  Observable.unsubscribe('endmove', endMove);
}
