chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) {
    createStickyNote(request['color'])
})

function setupPage(){
    var stickyMap = getStickyMap()

    if (stickyMap === "") {
        stickyMap = {}
    }

    for (const [currentId, mapData] of Object.entries(stickyMap)) {
        createStickyNote(mapData['color'], currentId, mapData)
    }

    setCookie(JSON.stringify(stickyMap))
}

function createStickyNote(backgroundColor, currentId=null, mapData=null) {
    var stickyMap = getStickyMap()

    if (!currentId) {
        var currentId = Object.keys(stickyMap).length + 1
    }

    var stickyContainerId = 'sticky-container-' + currentId
    var stickyBodyId = 'sticky-body-' + currentId
    var stickyHeaderTextId = 'sticky-header-text-' + currentId

    if (!mapData) {
        mapData = {
            'text': null,
            'color': backgroundColor,
            'top': '50%',
            'left': '50%',
            'open': true
        }
    }

    stickyMap[currentId] = mapData
    setCookie(JSON.stringify(stickyMap))

    var container = document.createElement("div");
    container.id = stickyContainerId
    container.classList.add('sticky-note-container')
    container.style.backgroundColor = backgroundColor;
    container.style.color = 'black';
    container.style.top = mapData['top'];
    container.style.left = mapData['left'];

    var headerContainer = document.createElement("div");
    headerContainer.classList.add('sticky-note-header-container')
    headerContainer.ondblclick = function() { toggleStickyNoteVisibility(stickyBodyId, stickyHeaderTextId, currentId) };

    var headerText = document.createElement("div");
    headerText.classList.add('sticky-note-header-text')
    headerText.id = stickyHeaderTextId

    var headerButtons = document.createElement("div");
    headerButtons.classList.add('sticky-note-header-buttons')

    var delButton = document.createElement("button")
    delButton.classList.add('buttonastext')
    delButton.innerHTML = "❌"
    delButton.onclick = function() { deleteStickyNote(currentId) };

    var stickyBody = document.createElement("textarea")
    stickyBody.classList.add('sticky-note-body')
    stickyBody.id = stickyBodyId
    stickyBody.style.visibility = 'visible'
    stickyBody.contentEditable = "true";
    stickyBody.onchange = function () { storeTextChange(currentId) }
    stickyBody.value = mapData['text']

    headerButtons.appendChild(delButton)

    headerContainer.appendChild(headerText)
    headerContainer.appendChild(headerButtons)

    container.appendChild(headerContainer)
    container.appendChild(stickyBody)

    document.body.appendChild(container)

    if (!mapData['open']) {
        toggleStickyNoteVisibility('sticky-body-' + currentId, 'sticky-header-text-' + currentId, currentId)
    }

    dragElement(headerContainer, container, currentId)
}

function deleteStickyNote(stickyNoteId) {
    var elem = document.getElementById('sticky-container-' + stickyNoteId)
    elem.remove()
    var stickyMap = getStickyMap()
    delete stickyMap[stickyNoteId]
    setCookie(JSON.stringify(stickyMap))
}

function toggleStickyNoteVisibility(stickyBodyId, stickyHeaderId, stickyId) {
    var stickyBody = document.getElementById(stickyBodyId)
    var stickyHeader = document.getElementById(stickyHeaderId)
    var stickyMap = getStickyMap()
    if (stickyBody.style.display === "none") {
        stickyMap[stickyId]['open'] = true;
        stickyBody.style.display = "block";
        stickyHeader.innerHTML = ""
    } else {
        stickyMap[stickyId]['open'] = false;
        stickyBody.style.display = "none";
        stickyHeader.innerHTML = stickyBody.value
    }
    setCookie(JSON.stringify(stickyMap))
}

function dragElement(stickyNoteHeaderElem, stickyNoteContainerElem, stickyId) {
  var elmnt = stickyNoteContainerElem
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  stickyNoteHeaderElem.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event;
    e.preventDefault();
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;

    var top = (elmnt.offsetTop - pos2) + "px";
    var left = (elmnt.offsetLeft - pos1) + "px";

    elmnt.style.top = top
    elmnt.style.left = left

    var stickyMap = getStickyMap()
    stickyMap[stickyId]['top'] = top
    stickyMap[stickyId]['left'] = left
    setCookie(JSON.stringify(stickyMap))
  }

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

function storeTextChange(stickyId) {
    var stickyMap = getStickyMap()
    var text = document.getElementById('sticky-body-' + stickyId).value
    stickyMap[stickyId]['text'] = text
    setCookie(JSON.stringify(stickyMap))
}

function setCookie(stickyObject) {
  document.cookie = 'stickyMap' + "=" + stickyObject;
}

function getStickyMap() {
  let name = 'stickyMap' + "=";
  let ca = document.cookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return JSON.parse(c.substring(name.length, c.length));
    }
  }
  return "";
}

setupPage()