import { Component, NgZone, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import {
  AdviceRepository, DiseaseRepository, DrugTypeRepository, ExaminationRepository, PrescriptionRepository,
  SymptomRepository
} from '../../providers/offline/Repositories';
import {
  Prescription, PrescriptionAdvice, PrescriptionDiseases, PrescriptionExamination,
  PrescriptionSymptom
} from '../../models/Prescription';
import Advice from '../../models/Advice';
import Examination from '../../models/Examination';
import Disease from '../../models/Disease';
import Symptom from '../../models/Symptom';

@Component({
  selector: 'app-prescription-template',
  templateUrl: './prescription-template.component.html',
  styleUrls: ['./prescription-template.component.css']
})
export class PrescriptionTemplateComponent implements OnInit {
  prescription: Prescription;
  prescriptionForm: FormGroup;
  symptomOptions = [];
  symptomOptionsConfig: any;
  diseaseOptions = [];
  diseaseOptionsConfig: any;
  examinationOptions = [];
  examinationOptionsConfig: any;
  adviceOptions = [];
  adviceOptionsConfig: any;

  currentlySelectedAdvice = null;

  form: FormGroup = new FormGroup({});

  constructor(private zone: NgZone,
              private symptomRepo: SymptomRepository,
              private diseaseRepo: DiseaseRepository,
              private examinationRepo: ExaminationRepository,
              private adviceRepo: AdviceRepository,
              private drugTypeRepo: DrugTypeRepository,
              private prescriptionRepository: PrescriptionRepository) {

    // TODO: take it as input. for simplicity it's created here.
    this.prescription = new Prescription();
  }

  onSymptomSelected(value, $element) {
    this.symptomRepo.findBy({id: Number(value)}, 0, 1).then((results: any) => {
      console.log(results, value);

      const selectize = $element.parent().parent().siblings('select')[0].selectize;
      selectize.clear();

      if (results.length > 0) {
        // TODO: create a prescriptionSymptom
        const ps = new PrescriptionSymptom();
        ps.symptom = results[0];

        this.zone.run(() => {
          this.prescription.symptoms.push(ps);
        });
      }
    });
  }

  onDiseaseSelected(value, $element) {
    this.diseaseRepo.findBy({id: Number(value)}, 0, 1).then((results: any) => {
      console.log(results, value);

      const selectize = $element.parent().parent().siblings('select')[0].selectize;
      selectize.clear();

      if (results.length > 0) {
        // TODO: create a prescriptionSymptom
        const ps = new PrescriptionDiseases();
        ps.disease = results[0];

        this.zone.run(() => {
          this.prescription.diseases.push(ps);
        });
      }
    });
  }

  onExaminationSelected(value, $element) {
    this.examinationRepo.findBy({id: Number(value)}, 0, 1).then((results: any) => {
      console.log(results, value);

      const selectize = $element.parent().parent().siblings('select')[0].selectize;
      selectize.clear();

      if (results.length > 0) {
        // TODO: create a prescriptionSymptom
        const ps = new PrescriptionExamination();
        ps.examination = results[0];

        this.zone.run(() => {
          this.prescription.examinations.push(ps);
        });
      }
    });
  }

  onAdviceSelected(value, $element) {
    this.adviceRepo.findBy({id: Number(value)}, 0, 1).then((results: any) => {
      console.log(results, value);

      const selectize = $element.parent().parent().siblings('select')[0].selectize;
      selectize.clear();

      if (results.length > 0) {
        // TODO: create a prescriptionSymptom
        const ps = new PrescriptionAdvice();
        ps.advice = results[0];

        this.zone.run(() => {
          this.prescription.advices.push(ps);
        });
      }
    });
  }

  ngOnInit() {
    this.prescriptionForm = new FormGroup({
      'templateName': new FormControl(),
      'otherAdvice': new FormControl(),
      'remarks': new FormControl(),
      'advices': new FormControl(),
      'diseases': new FormControl(),
      'examinations': new FormControl(),
      'medicines': new FormControl(),
      'symptoms': new FormControl(),
    });

    this.symptomOptionsConfig = this.getSymptomSelectConfig();
    this.diseaseOptionsConfig = this.getDiseaseSelectConfig();
    this.examinationOptionsConfig = this.getExaminationSelectConfig();
    this.adviceOptionsConfig = this.getAdviceSelectConfig();
  }

  onSubmit() {
    const formModel = this.prescriptionForm.value;
    // console.log(formModel);
    console.log(this.prescription);
    delete this.prescription.doctorFee;
    delete this.prescription.visitType;
    console.log(formModel);
    // this.prescriptionRepository.insertOrUpdate(this.prescription);
  }

  getSymptomSelectConfig() {
    return {
      valueField: 'id',
      labelField: 'title',
      searchField: ['title'],
      placeholder: 'Select a symptom',
      hideSelected: true,
      highlight: false,
      preload: true,
      onItemAdd: this.onSymptomSelected.bind(this),
      load: (query, callback) => {
        this.symptomRepo.autoComplete('title', query, null, 0, 100).then((items) => {
          // this.symptomOptions = items;
          callback(items);
          // this.prescription.symptoms = items;
        })
      },
      create: (input, callback) => {
        const symptom = new Symptom();
        symptom.title = input;

        this.symptomRepo.insertOrUpdate(symptom).then((value) => {
          callback(symptom);
        });
      }
    }
  }

  getDiseaseSelectConfig() {
    return {
      valueField: 'id',
      labelField: 'title',
      searchField: ['title'],
      placeholder: 'Select a disease',
      hideSelected: true,
      highlight: false,
      preload: true,
      onItemAdd: this.onDiseaseSelected.bind(this),
      load: (query, callback) => {
        this.diseaseRepo.autoComplete('title', query, null, 0, 100).then((items) => {
          // this.symptomOptions = items;
          callback(items);
          // this.prescription.symptoms = items;
        })
      },
      create: (input, callback) => {
        const disease = new Disease();
        disease.title = input;

        this.diseaseRepo.insertOrUpdate(disease).then((value) => {
          callback(disease);
        });
      }
    }
  }

  getExaminationSelectConfig() {
    return {
      valueField: 'id',
      labelField: 'title',
      searchField: ['title'],
      placeholder: 'Select a diagnostic test',
      hideSelected: true,
      highlight: false,
      preload: true,
      onItemAdd: this.onExaminationSelected.bind(this),
      load: (query, callback) => {
        this.examinationRepo.autoComplete('title', query, null, 0, 100).then((items) => {
          // this.symptomOptions = items;
          callback(items);
          // this.prescription.symptoms = items;
        })
      },
      create: (input, callback) => {
        const examination = new Examination();
        examination.title = input;

        this.examinationRepo.insertOrUpdate(examination).then((value) => {
          callback(examination);
        });
      }
    }
  }

  private getAdviceSelectConfig() {
    return {
      persist: false,
      valueField: 'id',
      labelField: 'name',
      searchField: ['name'],
      placeholder: 'Select an advice',
      hideSelected: true,
      highlight: false,
      preload: true,
      onItemAdd: this.onAdviceSelected.bind(this),
      load: (query, callback) => {
        this.adviceRepo.autoComplete('title', query, null, 0, 100).then((items) => {
          // this.symptomOptions = items;
          callback(items);
          // this.prescription.symptoms = items;
        })
      },
      create: (input, callback) => {
        const advice = new Advice();
        advice.name = input;
        advice.alternateName = input;

        this.adviceRepo.insertOrUpdate(advice).then((value) => {
          callback(advice);
        });
      }
    }
  }

  onMedicineSelection = (med) => {
    this.prescription.medicines.push(med);
  };

  onMedicineRemove(med) {
    const index: number = this.prescription.medicines.indexOf(med);
    if (index !== -1) {
      this.prescription.medicines.splice(index, 1);
    }

    return false;
  }

  onSymptomRemove(symptom) {
    const index: number = this.prescription.symptoms.indexOf(symptom);
    if (index !== -1) {
      this.prescription.symptoms.splice(index, 1);
    }
  }

  onDiseaseRemove(disease) {
    const index: number = this.prescription.diseases.indexOf(disease);
    if (index !== -1) {
      this.prescription.diseases.splice(index, 1);
    }
  }

  onExaminationRemove(exam) {
    const index: number = this.prescription.examinations.indexOf(exam);
    if (index !== -1) {
      this.prescription.examinations.splice(index, 1);
    }
  }

  onAdviceRemove(advice) {
    const index: number = this.prescription.advices.indexOf(advice);
    if (index !== -1) {
      this.prescription.advices.splice(index, 1);
    }
  }

}