function generate_form(inp) {
  x2 = document.createElement('p');
  x2.textContent = "Please select a file";
  x3 = document.createElement('input');
  x3.setAttribute('name', "the_file");
  x3.setAttribute('type', "file");
  x3.setAttribute('id', "file_input");
  x1 = document.createElement('span');
  x1.setAttribute('id', "file_select_spanid");
  x1.appendChild(x2);
  x1.appendChild(x3);
  x2 = document.createElement('p');
  x2.textContent = "Description";
  x3 = document.createElement('input');
  x3.setAttribute('id', "description");
  x3.setAttribute('name', "description");
  x3.setAttribute('type', "text");
  x4 = document.createElement('button');
  x4.textContent = "Upload";
  x4.setAttribute('id', "lets_go");
  x0 = document.createElement('form');
  x0.setAttribute('id', "upload_form");
  x0.appendChild(x1);
  x0.appendChild(x2);
  x0.appendChild(x3);
  x0.appendChild(x4);
  return x0;
}

function makeImgColumn(te) {
    c = document.createElement('div')
    c.setAttribute('class', 'col thumb');
    p = document.createElement('p');
    p.textContent = te.description;
    c.appendChild(p);
    i = document.createElement('img');
    i.setAttribute('width', '100%');
    i.setAttribute('src', '/img/' + te.uuid);
    c.appendChild(i);
    c.addEventListener('click', (e) => {
	window.location.assign('/create/tid/' + te.uuid);
    });
    return c;
}

function loadTemplates(max) {
    let req = {
	filter: document.getElementById('search_input').value,
    };
    if (max !== undefined) {
	req.maxTemplates = max;
    }
    fetch('/api/template/list/',
	  {
	      method: 'POST',
	      body: JSON.stringify(req),
	  }).then((r) => r.json()).then((r) => {
	      var inRow = 0;
	      var rowElem = null;
	      te = document.createElement('div');
	      te.setAttribute('class', 'container text-center');
	      te.setAttribute('id', 'templatecontainer');
	      for (const element of r.templates) {
		  if (inRow % 3 == 0) {
		      inRow = 0;
		      if (rowElem != null) {
			  te.appendChild(rowElem);
		      }
		      rowElem = document.createElement('div');
		      rowElem.setAttribute('class', 'row templaterow');
		  }
		  rowElem.appendChild(makeImgColumn(element));
		  inRow++;
	      }
	      if (inRow > 0) {
		  te.appendChild(rowElem);
	      }
	      document.getElementById('templatecontainer').replaceWith(te);
	  });
}

var hasPasted = false;
var pasteData = null;

function handleUploadImageButton(e) {
    e.preventDefault();
    const f = document.getElementById('upload_form');
    const fd = new FormData(f);
    console.log(Array.from(fd.keys()));
    console.log(fd.get('the_file'));
    if (hasPasted) {
	fd.set('the_file', pasteData);
    }
    fetch('/api/template/new/',
	  {
	      method: 'POST',
	      body: fd
	  }).then((r) => {
	      document.getElementById('upload_form').remove();
	      ub = document.getElementById('create_upload');
	      success = document.createElement('p');
	      success.textContent = 'Upload successful, reloading momentarily...';
	      ub.closest('div').appendChild(success);
	      ub.remove();
	      setTimeout(() => {
		  location.reload();
	      }, 1500);
	  });
}

var addImageButtonClicked = false;

function handleCreateUploadClicked(evt) {
    if (addImageButtonClicked) {
	return;
    }
    addImageButtonClicked = true;
    document.getElementById('upload_container').appendChild(generate_form());
    document.getElementById('lets_go').addEventListener('click', handleUploadImageButton);
    if (hasPasted) {
	document.getElementById('file_select_spanid').remove();
    }
}

function handlePaste(evt) {
    evt.preventDefault();
    let paste = (evt.clipboardData || window.clipboardData);
    let blob;
    Array.from(paste.items).forEach((i) => {
	if (i.kind == 'string' && evt.target.id == 'description') {
	    i.getAsString((s) => {
		evt.target.value = s;
	    });
	    return;
	}
	if (i.kind == 'file') {
	    blob = i.getAsFile();
	}
    });
    if (blob == null) {
	return;
    }
    var e = document.getElementById('file_select_spanid');
    if (e != null) {
	e.remove();
    }
    i = document.getElementById('paste_preview');
    i.setAttribute('src', URL.createObjectURL(blob));
    hasPasted = true;
    pasteData = blob;
    return;
}

function initAll() {
    var ce = document.getElementById('create_upload');
    if (ce != null) {
	ce.addEventListener('click', handleCreateUploadClicked);
    }
    let user = document.getElementById('login_banner').getAttribute('data-user');
    let maxTemplates = 9;
    if (user != null) {
	maxTemplates = 0;
    }
    loadTemplates(maxTemplates);

    Array.from(document.getElementsByTagName('body')).forEach((e) => {
	e.addEventListener('paste', handlePaste);
    });

    document.getElementById('search_input').addEventListener('input', (e) => { loadTemplates(maxTemplates); });
}

initAll();