// call setup on DOM loaded
document.addEventListener('DOMContentLoaded', onDOMContentLoaded);

/**
 * Setup.
 */
function onDOMContentLoaded() {
  createAndPutHtml(_dataDicom, 'datadicom');
  createAndPutHtml(_dataImg, 'dataimg');

  // checkbox local data
  const localChk = document.getElementById('islocal');
  localChk.addEventListener('change', onLocalChkChange);

  // view button for github hosted
  const viewGithubHosted = document.getElementById('viewGithubHosted');
  viewGithubHosted.addEventListener('click', onViewGithubHosted);

  // fill gituhb hosted with example 0
  const example0 = document.getElementById('example0');
  example0.addEventListener('click', function () {
    fillGithubHostedWithExample(
      'https://github.com/ivmartel/dwv/blob/develop/tests/data/',
      'bbmri-53323131.dcm, bbmri-53323275.dcm, bbmri-53323419.dcm, ' +
      'bbmri-53323563.dcm, bbmri-53323707.dcm, bbmri-53323851.dcm'
    );
  });
}

const _githubRaw = 'https://raw.githubusercontent.com/ivmartel/dwv/master/tests/';
const _dataDicom = [
  {
    title: 'Baby MRI',
    uri: {
      type: 'dwvtest',
      file: '?file=bbmri-53323851.dcm&file=bbmri-53323707.dcm' +
        '&file=bbmri-53323563.dcm&file=bbmri-53323419.dcm' +
        '&file=bbmri-53323275.dcm&file=bbmri-53323131.dcm',
      args: '&dwvReplaceMode=void'
    },
    img: 'babymri.png',
    desc: 'Brain MR, 256*256*5, ' +
      'LittleEndianExplicit [1.2.840.10008.1.2.1], bits: 16-12-11'
  },
  {
    title: 'Baby MRI (DICOMDIR)',
    uri: {
      type: 'dwvtest',
      file: 'bbmri.dcmdir'
    },
    img: 'babymri-dcmdir.png',
    desc: 'Brain MR, 256*256*4, ' +
      'LittleEndianExplicit [1.2.840.10008.1.2.1], bits: 16-12-11'
  },
  {
    title: 'Baby MRI (zip)',
    uri: {
      type: 'dwvtest',
      file: 'bbmri.zip'
    },
    img: 'babymri-zip.png',
    desc: 'Brain MR, 256*256*2 ' +
      'LittleEndianExplicit [1.2.840.10008.1.2.1], bits: 16-12-11'
  },
  {
    title: 'Toutatix',
    uri: {
      type: 'dwvtest',
      file: '?file=osirix-toutatix-100.dcm&file=osirix-toutatix-101.dcm',
      args: '&dwvReplaceMode=void'
    },
    img: 'toutatix.png',
    desc: 'Chest CT(A), 512*512*1, LittleEndianExplicit' +
      ' [1.2.840.10008.1.2.1], bits: 16-12-11,' +
      ' from the Osirix examples, hosted on the dwv github.'
  },
  {
    title: 'Goudurix',
    uri: {
      type: 'dwvtest',
      file: 'osirix-goudurix.dcm'
    },
    img: 'goudurix.png',
    desc: 'Chest CT(A), 512*512*1, LittleEndianImplicit' +
      ' [1.2.840.10008.1.2], bits: 16-12-11,' +
      ' from the Osirix examples, hosted on the dwv github.',
  },
  {
    title: 'US',
    uri: {
      type: 'dwvtest',
      file: 'gdcm-US-RGB-8-epicard.dcm'
    },
    img: 'us.png',
    desc: 'US, 640*480*1, BigEndianExplicit' +
      ' [1.2.840.10008.1.2.2], bits: 8-8-7,' +
      ' from the GDCM examples, hosted on the dwv github.',
  },
  {
    title: 'Cerebrix',
    uri: {
      type: 'dwvtest',
      file: 'osirix-cerebrix.dcm'
    },
    img: 'cerebrix.png',
    desc: 'Brain SC (Secondary Capture), 176*224*1,' +
      ' JPEG2000 [1.2.840.10008.1.2.4.91], bits: 16-16-15,' +
      ' from the Osirix examples, hosted on the dwv github.',
  },
  {
    title: 'Multiframe',
    uri: {
      type: 'dwvtest',
      file: 'multiframe-test1.dcm'
    },
    img: 'multiframe-test1.png',
    desc: 'Heart MR, 256*256*1*16, LittleEndianExplicit' +
      ' [1.2.840.10008.1.2.1], bits: 8-8-7,' +
      ' contributed by @yulia-tue, hosted on the dwv github.',
  }
];

const _dataImg = [
  {
    title: 'JPEG',
    uri: 'https://upload.wikimedia.org/wikipedia/commons/c/c6/PET-image.jpg',
    img: 'brainpet-jpg.png',
    desc: 'Brain PET from wikipedia' +
      ' (https://en.wikipedia.org/wiki/File:PET-image.jpg), 531*600*1.'
  },
  {
    title: 'PNG',
    uri: 'https://upload.wikimedia.org/wikipedia/commons/7/7f/Brain_MRI_112010_rgbca.png',
    img: 'brainmri-png.png',
    desc: 'Brain MRI from wikipedia' +
      ' (https://en.wikipedia.org/wiki/File:Brain_MRI_112010_rgbca.png), 389*504*1.'
  },
  {
    title: 'JPG',
    uri: 'https://upload.wikimedia.org/wikipedia/commons/0/0e/Acute_leukemia-ALL.jpg',
    img: 'acute_leukemia.png',
    desc: 'Acute Leukimia from wikipedia' +
      ' (https://en.wikipedia.org/wiki/File:Acute_leukemia-ALL.jpg), 347*395*1.'
  }
];

/**
 * Get the dwv url from a data input uri.
 *
 * @param {*} uri The dwv input uri.
 * @returns {string} The full dwv url.
 */
function getDwvUrl(uri) {
  let uricomp = null;
  if (typeof uri.type !== 'undefined') {
    uricomp = uri.file;
    if (uri.type === 'dwvtest') {
      const localChk = document.getElementById('islocal');
      const islocal = localChk ? localChk.checked : true;
      let uriroot = '';
      if (islocal) {
        uriroot = '../';
      } else {
        uriroot = _githubRaw;
      }
      uricomp = uriroot + 'data/' + uri.file;
    }
  } else {
    uricomp = uri;
  }

  let uriargs = '';
  if (typeof uri.args !== 'undefined') {
    uriargs = uri.args;
  }

  let url = 'viewer.html';
  if (typeof uri !== 'undefined') {
    url += '?input=' + encodeURIComponent(uricomp) + uriargs;
  }
  return url;
}

/**
 * Create and append html.
 *
 * @param {object} data Data configuration object.
 * @param {string} id The html list element.
 */
function createAndPutHtml(data, id) {
  for (let i = 0; i < data.length; ++i) {
    // image
    const image = document.createElement('img');
    image.src = './images/' + data[i].img;
    // title
    const title = document.createElement('h2');
    title.appendChild(document.createTextNode(data[i].title));
    // description
    const desc = document.createElement('p');
    desc.appendChild(document.createTextNode(data[i].desc));
    if (data[i].comment) {
      const comment = document.createElement('b');
      comment.appendChild(document.createTextNode(' ' + data[i].comment));
      desc.appendChild(comment);
    }

    // link
    const link = document.createElement('a');
    link.href = getDwvUrl(data[i].uri);
    link.id = i;
    link.className = 'dwvlink ' + id;
    link.appendChild(image);

    // list item
    const li = document.createElement('li');
    li.appendChild(link);
    li.appendChild(title);
    li.appendChild(desc);
    const ul = document.getElementById('ul_' + id);
    ul.appendChild(li);
  }
}

/**
 * Update dicom links on checkbox change.
 */
function onLocalChkChange() {
  const links = document.getElementsByClassName('datadicom');
  for (let i = 0; i < links.length; ++i) {
    links[i].href = getDwvUrl(_dataDicom[links[i].id].uri);
  }
}

/**
 * Handle click on the view github hosted button.
 */
function onViewGithubHosted() {
  // root url: https://github.com/ivmartel/dwv/blob/develop/tests/data
  // -> https://raw.githubusercontent.com/ivmartel/dwv/develop/tests/data
  const baseUrlInput = document.getElementById('baseUrl');
  const url = new URL(baseUrlInput.value);
  url.host = 'raw.githubusercontent.com';
  url.pathname = url.pathname.replace('blob/', '');
  url.pathname = url.pathname.replace('tree/', '');

  // file list
  const fileList = document.getElementById('fileList');
  const value = fileList.value;
  const separator = ',';
  let files = value.split(separator);
  // trim spaces
  files = files.map(element => {
    return element.trim();
  });
  // remove empty elements
  files = files.filter(element => {
    return element !== '';
  });
  const filesStr = '?file=' + files.join('&file=');

  // dwv args
  const args = '&dwvReplaceMode=void';

  // final full uri
  const uriStr = url.href + filesStr;
  // add args since we pass an uri string and not object as
  // for dwvtest
  const fullUri = getDwvUrl(uriStr) + args;

  // open test viewer
  window.open(fullUri);
}

/**
 * Fill github hosted inputs with preset strings.
 *
 * @param {string} base The base url href.
 * @param {string} files The coma separated list of files.
 */
function fillGithubHostedWithExample(base, files) {
  // base
  const baseUrlInput = document.getElementById('baseUrl');
  baseUrlInput.value = base;
  // files
  const fileList = document.getElementById('fileList');
  fileList.value = files;
}