var dom = {};
var data = [
  { txt: '', example: '' },
  { txt: '', example: '' },
  { txt: '', example: '' },
  { txt: '', example: '' },
  { txt: '', example: '' },
  { txt: '', example: '' },
];

var optionLine = { path: 'straight', startPlug: 'behind', endPlug: 'arrow2' };
var hasTry = 0;
var inPlaced = 0;
var toPlaced = data.length;
var isGood = 0;
var _line1, _line2, _line3, _line4, _line5, _line6, _line7, _line8, _line9;
var answers = [
  {
    txt: 'groupe de pairs',
    example: '',
  },
  {
    txt: 'instances de socialisation',
    example: '',
  },
  {
    txt: 'socialisation',
    example: '',
  },
  {
    txt: 'milieu social,genre',
    example: '',
  },
  {
    txt: 'rôles sociaux',
    example: '',
  },
];

function createLines() {
  _line1 = new LeaderLine(
    LeaderLine.pointAnchor(dom.bloc_1_1, {
      x: '50%',
      y: '100%',
    }),

    LeaderLine.pointAnchor(dom.bloc_3, {
      x: '50%',
      y: '0%',
    }),
    optionLine
  );
  _line2 = new LeaderLine(
    LeaderLine.pointAnchor(dom.bloc_1_2, {
      x: '50%',
      y: '100%',
    }),

    LeaderLine.pointAnchor(dom.bloc_3, {
      x: '50%',
      y: '0%',
    }),
    optionLine
  );
  _line3 = new LeaderLine(
    LeaderLine.pointAnchor(dom.bloc_1_3, {
      x: '50%',
      y: '100%',
    }),

    LeaderLine.pointAnchor(dom.bloc_3, {
      x: '50%',
      y: '0%',
    }),
    optionLine
  );
  _line4 = new LeaderLine(
    LeaderLine.pointAnchor(dom.bloc_2, {
      x: '50%',
      y: '100%',
    }),

    LeaderLine.pointAnchor(dom.bloc_3, {
      x: '50%',
      y: '0%',
    }),
    optionLine
  );
  _line5 = new LeaderLine(
    LeaderLine.pointAnchor(dom.bloc_3, {
      x: '50%',
      y: '100%',
    }),

    LeaderLine.pointAnchor(dom.bloc_4, {
      x: '50%',
      y: '0%',
    }),
    {
      ...optionLine,
      startLabel: LeaderLine.captionLabel('Participent au processus de ...', { color: 'blue', offset: [80, 10] }),
    }
  );
  _line6 = new LeaderLine(
    LeaderLine.pointAnchor(dom.bloc_4, {
      x: '50%',
      y: '100%',
    }),

    LeaderLine.pointAnchor(dom.bloc_5, {
      x: '50%',
      y: '0%',
    }),
    {
      ...optionLine,
      startLabel: LeaderLine.captionLabel('... qui est différencié selon le ...', { color: 'blue', offset: [80, 10] }),
    }
  );

  _line7 = new LeaderLine(
    LeaderLine.pointAnchor(dom.bloc_4, {
      x: '50%',
      y: '100%',
    }),

    LeaderLine.pointAnchor(dom.bloc_6, {
      x: '50%',
      y: '0%',
    }),
    optionLine
  );
  _line8 = new LeaderLine(
    LeaderLine.pointAnchor(dom.bloc_5, {
      x: '50%',
      y: '100%',
    }),

    LeaderLine.pointAnchor(dom.bloc_7, {
      x: '50%',
      y: '0%',
    }),
    optionLine
  );
  _line9 = new LeaderLine(
    LeaderLine.pointAnchor(dom.bloc_6, {
      x: '50%',
      y: '100%',
    }),

    LeaderLine.pointAnchor(dom.bloc_7, {
      x: '50%',
      y: '0%',
    }),
    {
      ...optionLine,
      startLabel: LeaderLine.captionLabel("... aboutissant à l'adoption de...", { color: 'blue', offset: [80, 10] }),
    }
  );
}

function initDom() {
  dom.appContent = document.getElementById('app-content_content');
  dom.appHeader = document.getElementById('app-content_header');
  dom.info = document.getElementById('info');
  dom.valid = document.getElementById('valid');
  dom.answer = document.getElementById('answer');
  dom.try = document.getElementById('try');
  dom.answer_student = document.getElementById('answer_student');
  dom.content = $('.content');
  dom.bloc_1_1 = document.getElementById('bloc_1_1');
  dom.bloc_1_2 = document.getElementById('bloc_1_2');
  dom.bloc_1_3 = document.getElementById('bloc_1_3');
  dom.bloc_2 = document.getElementById('bloc_2');
  dom.bloc_3 = document.getElementById('bloc_3');
  dom.bloc_4 = document.getElementById('bloc_4');
  dom.bloc_5 = document.getElementById('bloc_5');
  dom.bloc_6 = document.getElementById('bloc_6');
  dom.bloc_7 = document.getElementById('bloc_7');
}

function toggleValid(isShow) {
  if (isShow) {
    dom.valid.classList.remove('isHide');
  } else {
    dom.valid.classList.add('isHide');
  }
}

function updateData(index, value, type) {
  _line1.position();
  _line2.position();
  _line3.position();
  _line4.position();
  _line5.position();
  _line6.position();
  _line7.position();
  _line8.position();
  _line9.position();

  if (inPlaced === toPlaced) {
    toggleValid(true);
  } else {
    toggleValid(false);
  }
}

function validate() {
  $($(dom.content).parent()).removeClass('bad');
  $($(dom.content).parent()).removeClass('good');
  if ($(dom.content[0]).text() === answers[0].txt) {
    $(dom.content[0]).parent().addClass('good');
    isGood += 1;
  } else {
    $(dom.content[0]).parent().addClass('bad');
  }

  if ($(dom.content[1]).text() === answers[1].txt) {
    $(dom.content[1]).parent().addClass('good');
    isGood += 1;
  } else {
    $(dom.content[1]).parent().addClass('bad');
  }

  if ($(dom.content[2]).text() === answers[2].txt) {
    $(dom.content[2]).parent().addClass('good');
    isGood += 1;
  } else {
    $(dom.content[2]).parent().addClass('bad');
  }

  if (answers[3].txt.includes($(dom.content[3]).text()) && $(dom.content[3]).text() !== '') {
    $($(dom.content[3]).parent()[0]).addClass('good');
    isGood += 1;
  } else {
    $($(dom.content[3]).parent()[0]).addClass('bad');
  }
  if (answers[3].txt.includes($(dom.content[4]).text()) && $(dom.content[4]).text() !== '') {
    $($(dom.content[4]).parent()[0]).addClass('good');
    isGood += 1;
  } else {
    $($(dom.content[4]).parent()[0]).addClass('bad');
  }

  if (answers[4].txt.includes($(dom.content[5]).text()) && $(dom.content[5]).text() !== '') {
    $($(dom.content[5]).parent()[0]).addClass('good');
    isGood += 1;
  } else {
    $($(dom.content[5]).parent()[0]).addClass('bad');
  }

  if (isGood < data.length && hasTry === 0) {
    dom.try.classList.remove('isHide');
    dom.answer.classList.add('isHide');
    dom.info.innerHTML = '<i class="oups">Vous avez fait des erreurs, réessayer.<i>';
  }
}

function tryAgain() {
  for (var i = 0; i < $('.word').length; i++) {
    enableItemDrag($(dom.content[i]));
  }
  dom.try.classList.add('isHide');
  hasTry = 1;
  dom.info.innerHTML =
    '<i class="">Pour conserver votre schéma-bilan, vous pouvez faire une capture de votre écran.<i>';
  toPlaced = $('.ui-droppable').not('.good').length;
  inPlaced = 0;
}

function enableItemDrag(item) {
  if (item.parent().hasClass('bad')) {
    item.parent().removeClass('bad');
    for (var i = 0; i < $('.word').length; i++) {
      if (
        item.parent().find('.delete').data('drag') &&
        $($('.word')[i])[0] === item.parent().find('.delete').data('drag')[0]
      ) {
        $($('.word')[i]).draggable('enable');
        $($('.word')[i]).animate({ top: 0, left: 0 }, 'fast');
        $($('.word')[i]).css({ pointerEvents: 'inherit' });
        $($('.word')[i]).draggable('option', 'revert', true);
      }
    }
    item.parent().find('.delete').data('drag', '');
    item.parent().find('.delete').data('drop', '');
    item.parent().droppable('enable');
    item.text('');
  }
}

function showAnswer(isStudent = false) {
  if (isStudent) {
    dom.answer.classList.remove('isHide');
    dom.answer_student.classList.add('isHide');
    showAnswerStudent();
  } else {
    dom.answer.classList.add('isHide');
    dom.answer_student.classList.remove('isHide');
    $(dom.content[0]).text(answers[0].txt);
    $(dom.content[1]).text(answers[1].txt);
    $(dom.content[2]).text(answers[2].txt);
    $(dom.content[7]).text(answers[4].txt);
    $(dom.content[3]).text(answers[3].txt.split(',')[0].trim());
    $(dom.content[4]).text(answers[3].txt.split(',')[1].trim());
    $(dom.content[5]).text(answers[3].txt.split(',')[2].trim());
    $(dom.content[6]).text(answers[3].txt.split(',')[3].trim());
  }
  validate();
}

function handleCardDrop(event, ui) {
  var txt = ui.draggable.text();
  ui.draggable.draggable('disable');
  ui.draggable.position({ of: $(this), my: 'center top', at: 'center top' });
  $(this).find('.content').text(txt);
  $(this).find('.delete').css({ display: 'flex' });
  $(this).find('.delete').data('drag', ui.draggable);
  $(this).find('.delete').data('drop', $(this));
  $(this).droppable('disable');

  inPlaced += 1;
  updateData();
}

function initDragItem(item) {
  item.draggable('enable');
  item.animate({ top: 0, left: 0 }, 'fast');
}

function disableDragItem() {
  $('.word').css({ pointerEvents: 'none' });
  $('.delete').css({ display: 'none' });
}

function showAnswerStudent() {
  for (var i = 0; i < data.length; i++) {
    $(dom.content[i]).text(data[i].txt);
  }
}

function saveAnswerStudent() {
  for (var i = 0; i < data.length; i++) {
    data[i].txt = $(dom.content[i]).text();
  }
}
function init() {
  $('.word').draggable({
    cursor: 'move',
    revert: true,
    revertDuration: 100,
  });

  $('.drop').droppable({
    accept: '.word',
    hoverClass: 'hovered',
    drop: handleCardDrop,
  });
}
function initEvent() {
  $('.delete').on('click', function (evt) {
    var drag_in_place = $(evt.currentTarget).data('drag');
    var drop_in_place = $(evt.currentTarget).data('drop');
    drop_in_place.find('.delete').data('drag', '');
    drop_in_place.find('.delete').data('drop', '');
    drop_in_place.find('.content').text('');
    drop_in_place.find('.delete').css({ display: 'none' });
    drop_in_place.droppable('enable');
    initDragItem(drag_in_place);
    inPlaced -= 1;
    updateData();
  });
  dom.answer.addEventListener('click', function () {
    showAnswer(false);
  });
  dom.answer_student.addEventListener('click', function () {
    showAnswer(true);
  });
  dom.try.addEventListener('click', function () {
    tryAgain();
  });

  dom.valid.addEventListener('click', function () {
    dom.answer.classList.remove('isHide');
    dom.valid.classList.add('isHide');
    disableDragItem();
    saveAnswerStudent();
    validate();
  });
}

function initApp() {
  initDom();
  init();
  initEvent();
  createLines();

  dom.info.classList.remove('isHide');
}

window.addEventListener('load', initApp);
