(function () {
  'use strict';
	
	const rows = 4;
	const cols = 7;
	
	const room = document.getElementById('main');
  const plan = document.getElementById('plan');
	const settings = document.getElementById('settings');
	
	function createDetails(prop, x, y) {
		const label = prop.toLowerCase().replace(' ', '-');
    const template = `
			<details class="no-margin p-relative">
          <summary class="button no-margin">${prop}</summary>
					<form class="button no-margin">
						<fieldset class="grid-2 no-margin">
							<legend>${prop}</legend>
							<p class="no-margin">
								<label for="${label}-y">Ligne</label>
								<input type="number" class="no-margin" step="1" min="1" value="${y}" max="${rows}" id="${label}-y"/>
							</p>
							<p class="no-margin">
								<label for="${label}-x">Colonne</label>
								<input type="number" class="no-margin" step="1" min="1" value="${x}" max="${cols}" id="${label}-x"/>
							</p>
						</fieldset>
					</form>
				</details>`;

    return document.createRange().createContextualFragment(template);
	}
	
	function createForm() {
    const template = `
			<button type="button" class="no-margin">
          <span aria-hidden="true">&#9881;</span>&nbsp;Réglages
        </button>
        <form>
          <div class="grid-2">
						<a download="plaan.json" class="no-margin">Exporter</a>
						<p class="no-margin">
              <label for="import">Importer</label>
              <input id="import" name="import" type="file" accept="json" class="sr-only"/>
            </p>
          </div>
          <input id="reset" name="reset" type="reset" value="Annuler les modifications"/>
        </form>`;
		
		return document.createRange().createContextualFragment(template);
	}
	
	document.addEventListener('DOMContentLoaded', () => {
		main.style.setProperty('--rows', rows);
		main.style.setProperty('--cols', cols);
		
		const form = createForm();
		settings.append(form);
		
		const link = document.querySelector('[download]');
		const file = document.querySelector('[type="file"]');
		const zero = document.querySelector('[type="reset"]');
		
		if (localStorage.length) {
      link.href = 'data:text/json,' + JSON.stringify(localStorage);
    }
		
		plan.querySelectorAll('[style]').forEach(
			item => {
				const name = item.textContent;
				const x = item.style.getPropertyValue('--x');
				const y = item.style.getPropertyValue('--y');
				const details = createDetails(name, x, y);
				item.innerHTML = '';
				item.append(details);
				
				item.addEventListener('click', event => {
					const target = event.target;
					const opened = document.querySelectorAll('details[open]');
					
					opened.forEach( detail => {
						if (! detail.contains(target) ) {
							detail.removeAttribute('open');
						}
					})
				}, false);
				
				item.querySelectorAll('[type="number"]').forEach( input => {
					const max   = Number(input.getAttribute('max'));
          const axis  = (max === rows) ? 'y' : 'x';
					const label = input.id.split('-');
					const value = localStorage.getItem(label[0]);
          let result  = {
            name: name
          };

          if (value !== null) {
            result = JSON.parse(value);

            if (result[axis] !== undefined) {
              item.style.setProperty(`--${axis}`, result[axis]);
              input.value = result[axis];
            }
          }
					
					input.addEventListener('input', event => {
						const position = event.target.value;
						const stored = localStorage.getItem(label[0]);
            if (stored !== null) {
              result = JSON.parse(stored);
            }
						result[axis] = position;
          	item.style.setProperty(`--${axis}`, position);
						localStorage.setItem(label[0], JSON.stringify(result));
						link.href = 'data:text/json,' + JSON.stringify(localStorage);
					}, false);
				});
			}
		);
		
		file.addEventListener('change', event => {
      const upload = event.target.files[0];
      const reader = new FileReader();

      reader.onload = (event => {
        JSON.parse(event.target.result, (label, value) => {
          localStorage.removeItem(label);

          const result     = JSON.parse(value);
          const vertical   = document.getElementById(`${label}-y`);
          const horizontal = document.getElementById(`${label}-x`);
          const parent     = vertical.closest('li');
					
					console.log(result);

          if (result.y !== undefined) {
            parent.style.setProperty('--y', result.y);
            vertical.value = result.y;
          }

          if (result.x !== undefined) {
            parent.style.setProperty('--x', result.x);
            horizontal.value = result.x;
          }

          localStorage.setItem(label, value);
        });
      });
			
			reader.readAsText(upload);
		});
		
		zero.addEventListener('click', () => {
      localStorage.clear();
			document.location.reload();
    });
	});
})();