"use strict";
/*
    ## Prototype ##
*/
const Person = function (data) {
    const self = this;
    const objectKeys = Object.keys(data);
    const objectValues = Object.values(data);
    objectKeys.forEach((key, index) => {
        self[key] = objectValues[index];
    });
};

const Patient = function (name, male, age, symptom) {
    this.name = name;
    this.male = male;
    this.age = age;
    this.symptom = symptom;
};


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

Patient.prototype.getPatientAge = function(){
    if(this.age < 3){
        return "baby"
    }
    else if(this.age >= 3 && this.age <= 16){
        return "child"
    }
    else if(this.age >= 16 && this.age <= 75){
        return "adult"
    }
    else if(this.age > 75){
        return "elderly"
    }

};

Patient.prototype.getPatientGender = function () {
  if(this.male === true){
      return "male";
  }  else {
      return "female";
  }
};
//TODO: Fix the organicIcons

const Doctor = function (name, male, speciality) {
    this.name = name;
    this.male = male;
    this.specialty = speciality;
};

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

Doctor.prototype.getDoctorGender = function () {
  if(this.male === true){
      return true;
  }  else {
      return "female";
  }
};
//TODO: Fix the personIcons for Doctors

/*
    ##Code voor drag and drop event handling
*/
var 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);
};

var releaseDrag = function (e) {
    console.log('releaseDrag');
};

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

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

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


    var draggedPersonId = e.dataTransfer.getData('person'); // gegevens ophalen
    var dataType = $('#' + draggedPersonId).attr('data-type');
    var problem = $('#' + draggedPersonId + ' figcaption').text();

    // Hier verdere logica implementeren
    // Plaats de naam onder hospital
    var element = "<li><article>" +
        "<h3>" + draggedPersonId + "</h3>" +
        "<p>" + problem + "</p>" +
        "</article></li>";
    $(".draggedPersons").append(element);

    // Als de persoon al eens gedropt is kan hij niet nog eens gedropt worden
    $('#' + draggedPersonId)
        .addClass('dragged')
        .attr('draggable', false);


    return false; // Niet verwijderen!
};

var initDragAndDrop = function () {
    $('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);
};


/*
    ##Data functies
 */

const deepCopyObject = function (objectToCopy) {
    return JSON.parse(JSON.stringify(objectToCopy));
};

const getData = function () {
    const personsObject = deepCopyObject(personData);
    let persons = [];
    personsObject.forEach(person => {
        const p = new Person(person);
        persons.push(p);
    });
    return persons;
};

let patients = [];
let doctors = [];

const getPersonType = function () {
    const personData = getData();
    personData.forEach(person => {
        if (person.age !== undefined) {
            const patient = new Patient(person.name, person.male, person.age, person.symptom);
            patients.push(patient);
        } else {
            const doctor = new Doctor(person.name, person.male, person.specialty);
            doctors.push(doctor);
        }
    })
}();

const getCondition = function(conditionType) {
    let conditionObject = [];
    conditionKeys.forEach(condition => {
            if(conditionType === condition.name){
                conditionObject.push(condition);
            }
    });
    return conditionObject;
};
/*
    ##HTML Functies
 */

const addPersonArticle = function (person,personIcon,organicIcon,displayName) {
    //Renders the article element
    let element = '';
    const personName = person.name.replace(" ", "-");
    element += `<article id="${personName}" draggable="true">
                    <h3>${person.name}</h3>
                    <figure>
                        ${organIconMap.create(organicIcon)[0].outerHTML}
                        ${personIconMap.create(personIcon)[0].outerHTML}
                    </figure>
                    <figcaption>${displayName}</figcaption>
                </article>`;

    return element;
};

const renderPatients = function () {
    //console.log(patients);

    patients.forEach(patient => {
        const renderPersonIcon = patientIconKeys[patient.getPatientGender()][patient.getPatientAge()];
        const renderOrganicIcon = getCondition(patient.symptom)[0].icon;
        const renderDisplayName = getCondition(patient.symptom)[0].displayName;
        $('header').append(addPersonArticle(patient,renderPersonIcon,renderOrganicIcon,renderDisplayName));
    })
};

const renderDoctors = function () {
    doctors.forEach(doctor => {
        let renderPersonIcon = '';
        if(doctor.male){
            renderPersonIcon = getCondition(doctor.specialty)[0].maleIcon;
        } else {
            renderPersonIcon = getCondition(doctor.specialty)[0].femaleIcon;
        }
        const renderOrganicIcon = getCondition(doctor.specialty)[0].icon;
        const renderDisplayName = getCondition(doctor.specialty)[0].doctorDisplayName;
        $('footer').append(addPersonArticle(doctor,renderPersonIcon,renderOrganicIcon,renderDisplayName))
    })
};

$(() => {
    initDragAndDrop();
    renderPatients();
    renderDoctors();
});