"use strict";

let Person = function(name, sexe) {
  this.name = name;
  this.sexe = sexe;
}

let Patient = function(name, sexe, age, symptom) {
  Person.call(this, name, sexe);
  this.age = age;
  this.symptom = symptom;
};

Patient.prototype = Object.create(Person.prototype);
Patient.prototype.constructor = Patient;

let Doctor = function(name, sexe, specialty) {
  Person.call(this, name, sexe);
  this.specialty = specialty;
};

Doctor.prototype = Object.create(Person.prototype);
Doctor.prototype.constructor = Doctor;

let hospitalGUI = (function() {

  let that = this;

  function findConditionObject(symptomOrSpeciality){
    return conditionKeys.find(i => i.name == symptomOrSpeciality);
  }

  function generateAppeal(sexe){
    return ( sexe == "male" ) ? "Mr. " : "Ms. ";
  }

  function generateDoctorAppeal(sexe){
    return ( sexe === "male" ) ? "Dr. " : "Drs. ";
  }

  function getAgeCategory(age){
    return (age < 3) ? "baby" :

      (age >= 3 && age < 16) ? "child" :
      (age >= 16 && age < 75) ? "adult" :
      (age >= 75) ? "elderly" : false;
  }

  function getDoctorIcon(sexe, conditionObject){

        return (sexe == "male") ? personIconMap.create(conditionObject.maleIcon)[0].outerHTML :
        personIconMap.create(conditionObject.femaleIcon)[0].outerHTML;
  }

  function getPatientIcon(sexe, age){
    return personIconMap.create(patientIconKeys[sexe][age])[0].outerHTML;
  }

  function getOrganIcon(conditionObject){
    return organIconMap.create(conditionObject.icon)[0].outerHTML;

  }


  function renderArticle(personobject) {

    let symptomOrSpeciality = (personobject instanceof Doctor) ? personobject.specialty : personobject.symptom;

    let ageCategory = getAgeCategory(personobject.age);

    let conditionObject = findConditionObject(symptomOrSpeciality);

    let doctorOrPatient = (personobject instanceof Doctor) ? "doctor" : "patient";

    let data = '<article draggable="true" id="' +
      personobject.name.split(" ").join("-") +
      '" data-type="' +
      doctorOrPatient + '">';

    data += "<h3>";
    data += (personobject instanceof Patient) ? generateAppeal(personobject.sexe) :
      generateDoctorAppeal(personobject.sexe);

    data += personobject.name;
    data += "</h3><figure>";

    //find the organ icon that belongs to the symptom/specialty of the patient/doctor
    data += getOrganIcon(conditionObject);

    //find the person icon that belongs the person which depends on the age of the patient or the specialty of the doctor
    //if the person is a doctor, check if it is a male or female.
    data += (personobject instanceof Doctor) ?  getDoctorIcon(personobject.sexe, conditionObject) :
      getPatientIcon(personobject.sexe, ageCategory);

    data += "<figcaption>";
    //a doctor has a doctordisplayname and to a patient belongs a displayname
    data += (personobject instanceof Doctor) ? conditionObject.doctorDisplayName : conditionObject.displayName;
    data += "</figcaption></article>";

    let object = {
      isDoctor: (personobject instanceof Doctor),
      obj: data
    };

    return object;
  }

  let displayPeople = function() {
    let myData = [];

    let myPeople = personData.map(a => (a["symptom"] != undefined) ? new Patient(a.name, (a.male) ? "male" : "female", a.age, a.symptom) : new Doctor(a.name, (a.male) ? "male" : "female", a.specialty));

    myPeople.forEach((person) => {
      myData.push(renderArticle(person));
    });

    console.log(myData);

    myData.forEach((data) => {
      (data.isDoctor) ? $('footer').append(data.obj):
        $('header').append(data.obj);
    })
  }

  let init = function() {
    displayPeople();
  }

  // Code voor drag and drop event handling
  let listen = function(e) {
    e.dataTransfer = e.originalEvent.dataTransfer;
    e.dataTransfer.setData("person", e.target.id); // Geef gegevens door op deze manier wanneer je de drag released

    // Neat little trick to preserve dragged element's style in Chrome even when it is a link
    if (e.dataTransfer.setDragImage)
      e.dataTransfer.setDragImage(e.target, 0, 0);
  };

  let releaseDrag = function(e) {
    console.log('releaseDrag');
    //alert('released');
  };

  let showFeedback = function() {
    console.log('showFeedback');
  };

  let allowDrop = function(e) {
    e.preventDefault();
  };

  // Eigenlijke verwerking van gedropte element
  let checkDropzone = function(e) {
    e.dataTransfer = e.originalEvent.dataTransfer;

    var draggedPersonId = e.dataTransfer.getData('person'); // gegevens ophalen
    // Hier verdere logica implementeren
    console.log(draggedPersonId);
    //alert(draggedPersonId);

    return false; // Niet verwijderen!
  };

  let initDragAndDrop = function() {
    init();
    $('header,footer') // all articles in either header or footer are draggable ...
      .on('dragstart', 'article', listen)
      .on('dragend', 'article', releaseDrag);

    $('main figure') // the image (of the hospital) in main allows for persons to be dropped ...
      .on('dragenter', 'img', showFeedback)
      .on('dragleave', 'img', showFeedback)
      .on('dragover', 'img', allowDrop)
      .on('drop', 'img', checkDropzone);

    //$('main figure img').on('drop', checkDropzone); // the image (of the hospital) in main allows for persons to be dropped ... -> kan hier ook , want img binnen main figure is statisch end wordt niet dynamisch geladen

  }

  return {
    init: initDragAndDrop
  }

})()

//shorthand for document.ready
$(() => {
  hospitalGUI.init();
});