import Adventure from '../../../main/js/Adventure'
import Scene from '../../../main/js/Scene'
import Inventory from '../../../main/js/Inventory'
import Dialog from '../../../main/js/Dialog'
import { default as Item, setItemInUse, getItemInUse, unsetItemInUse } from '../../../main/js/Item'
import UsableItem from './UsableItem'

let adventure = new Adventure('My buying adventure');
let inventory = new Inventory();
let $inventory = document.getElementById('inventory');
let showDialog = showDialogFactory();

adventure.on('change-scene', (data) => {
  console.log(data);
  if (data.oldScene) {
    let $oldScene = document.getElementById(data.oldScene.background);
    $oldScene.style.display = 'none';
  }
  let $newScene = document.getElementById(data.scene.background);
  $newScene.style.display = 'block';
});

inventory.on('add', (item) => {
  item.$element.parentNode.removeChild(item.$element);
  item.$element.removeEventListener('click');
  $inventory.appendChild(item.$element);

  item.$element.addEventListener('click', useItem(item));

  function useItem(item) {
    return (e) => {
      e.preventDefault();
      e.stopPropagation();
      let itemInUse = getItemInUse();
      if (itemInUse !== null) {
        console.log('using ' + itemInUse.id + ' on inventory item ' + item.id);
        itemInUse.use(item);
        unsetItemInUse();
      } else {
        console.log('using ' + item.id + ' from inventory...');
        setItemInUse(item);
      }
    };
  }
});

inventory.on('remove', (item) => {
  $inventory.removeChild(item.$element);
});

document.addEventListener('click', removeUsing);

let outsideShop = new Scene('outside-shop');
let insideShop = new Scene('inside-shop');

let $money = document.getElementById('money');
let moneyItem = new Item('money', $money);
let $lessMoney = document.getElementById('lessMoney');
let lessMoney = new Item('lessMoney', $lessMoney);
$money.addEventListener('click', pickUpOrUse(moneyItem));

let $pen = document.getElementById('pen');
let pen = new UsableItem('pen', $pen);

pen.on('click', () => {
  console.log('clicked on pen, open dialog');
  new Dialog({text : 'I need money to buy this'}).listen(showDialog);
});

moneyItem.on('use', {
  pen : () => {
    inventory.add(pen);
    inventory.remove(moneyItem);
    inventory.add(lessMoney);
    return {
      once : true
    };
  }
});

let $door = document.getElementById('shop');
$door.addEventListener('click', () => {
  adventure.setScene(insideShop);
});

let $doorOut = document.getElementById('table');
$doorOut.addEventListener('click', () => {
  adventure.setScene(outsideShop);
});

adventure.setScene(outsideShop);

function pickUpOrUse(item) {
  var clickFn = (e) => {
    e.stopPropagation();
    e.preventDefault();
    console.log('clicked on ' + item.id);
    let itemInUse = getItemInUse();
    if (itemInUse !== null) {
      console.log('using ' + itemInUse.id + ' on ' + item.id);
      itemInUse.use(item);
    } else {
      console.log('picking up ' + item.id);
      inventory.add(item);
      item.$element.removeEventListener('click', clickFn);
    }
  };

  return clickFn;
}

function removeUsing(e) {
  e.preventDefault();
  e.stopPropagation();
  let itemInUse = getItemInUse();
  if (itemInUse !== null) {
    console.log('stop using ' + itemInUse.id);
    unsetItemInUse();
  }
}

function showDialogFactory() {
  let $dialog = document.getElementById('dialog');
  let dialogQueue = [];
  let displayingText = false;

  return (dialog) => {
    if (!displayingText) {
      displayDialog(dialog.text);
    } else {
      dialogQueue.push(dialog.text);
    }
  };

  function nextDialog() {
    if (dialogQueue.length > 0) {
      let next = dialogQueue.shift();
      displayDialog(next);
    } else {
      $dialog.innerHTML = '';
      displayingText = false;
    }
  }

  function displayDialog(text) {
    $dialog.innerHTML = text;
    displayingText = true;
    setTimeout(nextDialog, 2000);
  }
}

@@ -3416,349 +3416,100 @@
 ');%0A
-  let dialogQueue = %5B%5D;%0A  let displayingText = false;%0A%0A  return (dialog) =%3E %7B%0A    if (!displayingText) %7B%0A      displayDialog(dialog.text);%0A    %7D else %7B%0A      dialogQueue.push(dialog.text);%0A    %7D%0A  %7D;%0A%0A  function nextDialog() %7B%0A    if (dialogQueue.length %3E 0) %7B%0A      let next = dialogQueue.shift();%0A      displayDialog(next);%0A    %7D else
+%0A  return (dialog) =%3E %7B%0A    displayDialog(dialog);%0A  %7D;%0A%0A  function displayDialog(dialog)
  %7B%0A
-  
     
@@ -3532,86 +3532,46 @@
 L = 
-'';%0A      displayingText = false;%0A    %7D%0A  %7D%0A%0A  function displayDialog(text) %7B%0A
+dialog.text;%0A    setTimeout(() =%3E %7B%0A  
     
@@ -3594,66 +3594,17 @@
 L = 
-text
+''
 ;%0A    
-displayingText = true;%0A    setTimeout(nextDialog
+%7D
 , 20

Remove unused dialog functions