//Importing the libraries
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Router } from '@angular/router';
import { CookieService } from 'ngx-cookie-service';

//Importing the core classes
import { INotesTypes } from '../../../shared/core/INotesTypes';
import { INotes } from '../../../shared/core/INotes';
import { Default } from '../../../shared/core/Default.enum';
import { IAssociateRecords } from '../../../shared/core/IAssociateRecords ';

//Importing the service classes
import { NotesService } from '../../../shared/service/notes.service';


@Component({
  selector: 'app-contact-create-note',
  templateUrl: './contact-create-note.component.html',
  styleUrls: ['./contact-create-note.component.scss']
})
export class ContactCreateNoteComponent implements OnInit {
  // notes types
  INotesTypes: INotesTypes[];

  // notes
  INotes: INotes;

  // attributes
  description: string;

  // note content text
  noteContentTxt: string = ""

  // contact company Id
  @Input('contactId') contactId: number;
  @Input('companyId') companyId: number;

  @Output() closePopup: EventEmitter<null> = new EventEmitter();

  // drop down vlaue
  notesTypesId: number = 3;
  // Bussiness Dates
  bussinessDates: number;
  // TaskCreate
  TaskCreate : boolean;

  // Associate records
  IAssociateRecords : IAssociateRecords[];

  // Associate Variables
  ContactSelectedValues:string;
  CompanySelectedValues:string;

  displayInputNumber: boolean = false;
  userEnteredValue: number = 0;
  /** For validation */
  isText: boolean = true;

  constructor(private notesService: NotesService, private router: Router, private cookieService: CookieService) { }

  ngOnInit() {   
    this.TaskCreate = false;
    // get notes types
    this.notesService.GetAllNotesTypes().subscribe(
      result => {
        if (result != null) {
          this.INotesTypes = result;
         // console.log(this.INotesTypes);
        }
        else {
          //console.log(" Error: GetAllNotesTypes ");
        }
      }
    );
    // Get Associata Records
    this.notesService.GetAssociateRecords(this.contactId).subscribe(
      result => {    
        if (result != null) {
          this.IAssociateRecords = result;
          
          // console.log('Associate Records');
          // console.log(this.IAssociateRecords);
        }
        else {
          //console.log(" Error: GetAllNotesTypes ");
        }
      }
    );

  }

  // Save notes
  SaveNotes() {

    const notesObject = {} as INotes;

    if (this.noteContentTxt == "") {
      this.isText = false;
    }else{
      // Assign values
      this.isText = true;
      notesObject.NoteId = 0;
      if(this.notesTypesId == undefined)
      {
        this.notesTypesId = 1;
      }
      notesObject.NotesTypesId = this.notesTypesId;
      notesObject.CompanyContactsId = this.contactId; 
      // Assing values form enum
      // ***********************************
      notesObject.ProjectsId = Default.ProjectsId;
      notesObject.LoginStaffId = +this.cookieService.get('LoggedUserId');
      // ***********************************
      notesObject.Description = this.noteContentTxt;
      // notesObject.Staff = null;  
      notesObject.Staff = {
        FirstName :'',
        LastName :'',
        StaffId : +this.cookieService.get('LoggedUserId')
      }
      notesObject.NotesRanks = {
        CreatedDate : new Date(),
        Notes : null,
        NotesRanksId:0,
        Rank:0,
        Staffs:null
      }
      notesObject.ContactDetails = [{
        Avatar:'',
        FirstName:'',
        ContactDetailsId:0,
        IsDisable:false,
        LastName:''
      }]        
      notesObject.CompanyDetails = [{
        CompanyId : this.companyId,
        Address:'',
        CityName:'',
        CompanyName:'',
        ContactPositionsList:null,
        Country:null,
        Description:'',
        Industry:'',
        Logo:'',
        NoOfEmployee:0,
        Owner:'',
        Phone:'',
        PostalCode:'',
        State:null,
        TimeZone:'',
        Type:'',
        Website:''
      }];
      notesObject.CreatedDate = new Date();
      
      if(this.bussinessDates == undefined)
      {
        this.bussinessDates = 0;
      }

      //appenidng both the contactid and the company ids of the associate
      let associateRecords=this.ContactSelectedValues+"$"+this.CompanySelectedValues;
      
      
      // Save Notes
      this.notesService.SaveNotesDetails(notesObject,this.TaskCreate,this.bussinessDates,associateRecords).subscribe(
        result => {
          if (result != null) {          
              this.noteContentTxt = "";
              this.closePopup.emit();
            //this.router.navigate(['contact',{contactId:this.contactId}]);
          }
          else {
            //console.log('Error Saving');
          }
        }
      );
    }

    
    // if (this.noteContentTxt != "") {

    // }
  }

  // Note type
  onChangeNoteType(event) {
    this.notesTypesId = event.target.value;
  }

  // Business Days
  onChangeBusinessDays(event) {
    this.bussinessDates = event.target.value;
    // console.log(this.bussinessDates);
    if (event.target.value == -1) {
      // Enable input box
      this.displayInputNumber = true;
    } else {
      // Hide input box
      this.displayInputNumber = false;
    }
  }

  inputCustomValues() {
    if (this.displayInputNumber == true) {
      this.bussinessDates = this.userEnteredValue;
    }
  }
  // Check Box check value
  checkValue(event) {   
    this.TaskCreate = event;
  }

  // close create note popup
  closeNotePopUp(){
    this.closePopup.emit();

  }

  //---------------------------------------------------- RTE Configs ----------------------------------------------------//

  editor;
  txtArea = document.createElement('textarea');
  myEditor = document.querySelector('#editor')

  //Setting the options of the RTE editor
  public editorOptions = {
    theme: 'snow',
    modules: {
      toolbar: {
        container:
          [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ 'header': 1 }, { 'header': 2 }],

            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            [{ 'direction': 'rtl' }],

            [{ 'size': ['small', false, 'large', 'huge'] }],
            [{ 'header': [1, 2, 3, 4, 5, 6] }],

            [{ 'color': [] }, { 'background': [] }],
            [{ 'font': [] }],
            [{ 'align': [] }],

            ['clean'],

            [{ 'link': 'link' }],
            ['image'],
            ['showHtml']
            // ['video']

          ],
        handlers: {
          "showHtml": () => {
            //alert("You have not selected a text");

            var htmlEditor = this.editor.addContainer('ql-custom')
            htmlEditor.appendChild(this.txtArea)

            if (this.txtArea.style.display === '') {
              var html = this.txtArea.value

              // console.log("After cahging");
              //console.log(html);

              this.editor.pasteHTML(html)
            }
            this.txtArea.style.display = this.txtArea.style.display === 'none' ? '' : 'none'
          }
        }
      }//End of the toolbar
    }//End of the modules
  };



  //htmlEditor = this.editor.addContainer('ql-custom')


  onEditorBlured(quill) {
  }


  onEditorFocused(quill) {
    this.editor = quill;
  }

  onEditorCreated(quill) {
    this.editor = quill;
    // var icons = this.editor.import('ui/icons');
    // icons['bold'] = '<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="100"/></svg>';
    this.txtArea.style.cssText = "width: 100%;margin: 0px;background: rgb(29, 29, 29);box-sizing: border-box;color: rgb(204, 204, 204);font-size: 15px;outline: none;padding: 20px;line-height: 24px;font-family: Consolas, Menlo, Monaco, &quot;Courier New&quot;, monospace;position: absolute;top: 0;bottom: 0;border: none;display:none";
    //this.htmlEditor.appendChild(this.txtArea)
  }






  onContentChanged({ quill, text }) {
  }


  //---------------------------------------------------- End of the RTE Configs ----------------------------------------------------//

}



export class Company
{
  companyId:number;
}