// Elements
const preparatoryTasksElm = document.getElementById('preparatory-tasks');
const folderNavElm = document.getElementById('folderNav');
const theHeadlineElm = document.getElementById('theheadline');
const theNameElm = document.getElementById('thename');
const bricksElm = document.getElementById('bricks');
const resultsElm = document.getElementById('results');

// "Global" variables
let selected = [];
let name = '';
let pages = null;
let storedJSON = {};
let url = '';

// Substitution cipher methods
let chars = [ 'L', 'e', 'K', 'g', 'Q', 'M', 't', 'F', 'W', 'c', 'p', '1', 'Ç', 'J', 'ä', 'ø', 'N', ' ', 'ç', 'Z', 'P', '2', '"', 'q', 'Å', 'Æ', 'j', 'B', 'D', 'm', 'd', 'h', 'Y', '“', 'Ø', '3', '”', 'X', 'å', 'n', '.', 'o', 'H', '-', 'a', 'E', 'R', 'Ä', '4', 's', 'Ö', 'f', 'y', ')', 'i', '5', 'æ', 'v', 'C', '6', 'A', '—', 'T', '+', 'V', '(', '/', ';', '7', 'G', 'u', 'Œ', '8', 'ß', 'r', '9', '–', 'I', 'k', '&', '0', 'ö', 'l', 'U', 'z', 'œ', 'S', 'b', ',', 'x', 'w', 'O' ];
const encodeOffset = (i) => (i + 3) % chars.length;
const decodeOffset = (i) => (i - 3 + chars.length) % chars.length;
const transform = (txt, encode) => {
  let transformed = '';
  for (let i = 0; i < txt.length; i++) {
    let c = txt.charAt(i);
    let j = chars.indexOf(c);
    j = encode ? encodeOffset(j) : decodeOffset(j);
    transformed += chars[j];
  }
  return transformed;
}
const encode = (clear) => transform(clear, true);
const decode = (cipher) => transform(cipher, false);

// URL updater
const setUrl = () => {
  url = 'https://lenekobbernagel.com/custom2';
  if (name !== '' || selected.length !== 0) {
    url += '#' + encodeURIComponent(`${selected.join(',')}|${encode(name)}`);
  }
};

// URL parser
const parseHash = () => {
  let selectedAndName = decodeURIComponent(location.hash.substr(1)).split('|');
  selected = selectedAndName[0].split(',');
  name = decode(selectedAndName[1]);
}

const activateElements = (elm) => {
  window.requestAnimationFrame(() => {
    let v = elm.querySelectorAll('.sqs-video-wrapper');
    v = Array.from(v);
    v.forEach((e, i) => {
      if (e.hasAttribute('data-html')) {
        e.innerHTML = e.getAttribute('data-html');
      }
    });
    let g = elm.querySelectorAll('.image-block-outer-wrapper .thumb-image');
    g = Array.from(g);
    g.forEach((e, i) => {
      if (e.hasAttribute('data-src')) {
        e.src = e.getAttribute('data-src');
      }
    });
    let o = elm.querySelectorAll('.overlay');
    o = Array.from(o);
    o.forEach((e, i) => {
      e.addEventListener('click', brickClickHandler.bind(this, e.getAttribute('data-id')));
    });
  });
};

// Build source and insert in the resultsElm
const buildSource = () => {
  console.log('buildSource', selected);
  let html = [];
  let promises = [];
  selected.forEach((id, i) => {
    let p = pages.byId[id];
    if (storedJSON.hasOwnProperty(p.href)) {
      html.push(Promise.resolve(storedJSON[p.href]));
    } else {
      html.push(getJson(p.href).then((result) => {
        result = {'page': p, 'html': result.mainContent};
        storedJSON[p.href] = result;
        return result;
      }));
    }
  });
  return Promise.all(html).then((values) => {
    let source = name ? `<h1>${ name }</h1>` : '';
    source += values.map(e => `<div class="rendered-brick"><div class="overlay" data-index="${e.page.index}"></div>${e.html}</div>`).join('');
    resultsElm.innerHTML = source;
    activateElements(resultsElm);
  });
};

// Brick click handler
const brickClickHandler = (id) => {
  console.log('brickClickHandler', id);
  if (selected.indexOf(id) !== -1) {
    selected.splice(selected.indexOf(id), 1);
  } else {
    selected.push(id);
  }
  let tasks = Array.from(bricks.getElementsByTagName('div'));
  tasks.forEach(e => {
    if (selected.indexOf(e.getAttribute('data-id')) !== -1) {
      e.classList.add('picked');
    } else {
      e.classList.remove('picked');
    }
  });
  setUrl();
  buildSource().then(addButton);
};

// Name form change handler
const nameInputHandler = (event) => {
  name = event.srcElement.value;
  setUrl();
  buildSource().then(addButton);
};

// Add the button to open the generated page
const addButton = () => {
  resultsElm.appendChild(document.createRange().createContextualFragment(`<div class="open-page"><a href="${url}">Open Page</a></div>`));
};

// XHR get the JSON content of a squarespace page
const getJson = (path) => {
  console.log('getJson path', path);
  let url = 'https://lenekobbernagel.com';
  url += path;
  url += '?format=json';
  return fetch(url, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    }
  })
  .then(response => response.json())
  .catch((error) => {
    console.error('Error:', error);
  });
};

// Extract data about the subpages
const extractPageData = () => {
  let data = folderNavElm.getElementsByTagName('a');
  data = Array.from(data);
  data = data.filter((a, i) => !a.innerHTML.startsWith('⌦'));
  data = data.map((a, i) => {
    let typeAndText = a.innerHTML.split('@').map(s => s.trim());
    return {
      'index': i,
      'type': typeAndText[0].toLowerCase(),
      'text': typeAndText[1],
      'id':   typeAndText[2].toLowerCase(),
      'href': a.getAttribute('href')
    };
  });
  let byType = {};
  let order = [];
  let byId = {};
  data.forEach(e => {
    if (order.indexOf(e.type) === -1) {
      byType[e.type] = [];
      order.push(e.type);
    }
    byId[e.id] = e;
    byType[e.type].push(e);
  });
  folderNavElm.remove();
  console.log(data, byId);
  return {
    data,
    order,
    byType,
    byId
  };
};

const titleCase = (str) => {
  let sentence = str.toLowerCase().split(' ');
  for (let i = 0; i < sentence.length; i++) {
    sentence[i] = sentence[i][0].toUpperCase() + sentence[i].slice(1);
  }
  return sentence;
};

// MAIN
window.addEventListener('DOMContentLoaded', (event) => {

  pages = extractPageData();
  console.log(pages);

  // EDIT
  if (window.location.pathname === ('/custom2/edit')) {
    preparatoryTasksElm.classList.add('preparatory-edit');
    theHeadlineElm.innerHTML = 'Select elements to Combine';
    theNameElm.style.display = 'block';
    theNameElm.addEventListener('input', nameInputHandler);
    pages.order.forEach((type) => {
      let h = document.createElement('h3');
      h.innerHTML = titleCase(type);
      bricksElm.appendChild(h);
      pages.byType[type].forEach((p, i) => {
        let b = document.createElement('div');
        b.setAttribute('data-id', p.id);
        b.setAttribute('data-type', p.type);
        b.setAttribute('data-href', p.href);
        b.innerHTML = `${p.text}`;
        b.addEventListener('click', brickClickHandler.bind(this, p.id));
        bricksElm.appendChild(b);
      });
    });

  // DISPLAY
  } else {
    preparatoryTasksElm.classList.add('preparatory-display');
    parseHash();
    buildSource();
  }
});