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

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

//Importing the service classes
import { TasksService } from '../../../shared/service/tasks.service';



@Component({
  selector: 'app-contact-create-task',
  templateUrl: './contact-create-task.component.html',
  styleUrls: ['./contact-create-task.component.scss']
})
export class ContactCreateTaskComponent implements OnInit {

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

  // Tasks types
  ITaskTypes: ITaskTypes[];
  // note content text
  taskContentTxt: string = ""
  // drop down vlaue
  taskTypesId: number;
  // Calender 
  dueDate: Date;
  reminderDate: Date;
  taskTime: Date;
  // task subject 
  subject: string;

  // Associate records
  IAssociateRecords: IAssociateRecords[];

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

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

  constructor(private tasksService: TasksService, private router: Router, private cookieService: CookieService) { }

  ngOnInit() {
    // get notes types
    this.tasksService.GetAllTasksTypes().subscribe(
      result => {
        if (result != null) {
          this.ITaskTypes = result;
          // console.log(this.ITaskTypes);
        }
        else {
          //console.log(" Error: GetAllNotesTypes ");
        }
      }
    );

    // Get Associata Records
    this.tasksService.GetAssociateRecords(this.contactId).subscribe(
      result => {
        if (result != null) {
          this.IAssociateRecords = result;
          // console.log('Associate Records');
          // console.log(this.IAssociateRecords);
        }
        else {
          //console.log(" Error: GetAllNotesTypes ");
        }
      }
    );
  }
  closeNotePopUp(){
    this.closePopup.emit();

  }
  onChangeType(event) {
    // console.log(event.value['TaskTypeId']);
    this.taskTypesId = event.value['TaskTypeId'];
    // console.log(this.taskTypesId);
  }

  // Save Task
  Save() {

    // console.log('taskContentTxt  ' + this.taskContentTxt);
    // console.log('dueDate  ' + this.dueDate);
    // console.log('reminderDate  ' + this.reminderDate);
    // console.log('taskTime  ' + this.taskTime);
    // console.log(this.taskTypesId);
    // debugger
    if (this.taskContentTxt != null && this.taskContentTxt != undefined) {
      if (this.dueDate != null && this.dueDate != undefined) {
        if (this.reminderDate != null && this.reminderDate != undefined) {
          if (this.taskTime != null && this.taskTime != undefined) {
            // console.log(this.taskTypesId);
            const tasksObject = {} as ITaskDetails;
            // Assign Values
            // console.log(this.taskTypesId);
            tasksObject.TaskDetailsId = 0;
            tasksObject.TaskTypes = [{
              TaskTypeId: this.taskTypesId,
              Description: ""
            }];
            tasksObject.CompanyContactsId = 0;
            tasksObject.ProjectsId = 0;
            tasksObject.TaskTypes = [{
              TaskTypeId: this.taskTypesId,
              Description: ""
            }];
            // Assing values form enum
            // ***********************************
            tasksObject.ProjectsId = Default.ProjectsId;
            tasksObject.LoginStaffId = +this.cookieService.get('LoggedUserId');
            // ***********************************
            tasksObject.NotesId = 0;
            tasksObject.EmailId = 0;
            tasksObject.Subject = this.subject;
            tasksObject.Description = this.taskContentTxt;
            tasksObject.DueDate = this.dueDate;
            tasksObject.ReminderDate = this.reminderDate;
            tasksObject.ReminderTime = this.taskTime;
            tasksObject.CompletedDate = new Date();
            tasksObject.CreatedDate = new Date();
            tasksObject.IsDisable = false;
            tasksObject.Staffs = {
              StaffId: 0,
              FirstName: "",
              LastName: ""
            };
            tasksObject.TasksRanks = {
              TaskId: 0,
              LoginStaffId: +this.cookieService.get('LoggedUserId'),
              TaskRanksId: 0,
              Rank: 0,
              CreatedDate: new Date()
            };
            tasksObject.CompanyDetails = [{
              CompanyId: this.companyId,
              Address: "",
              CityName: "",
              CompanyName: "",
              ContactPositionsList: null,
              Country: null,
              Description: "",
              Industry: "",
              Logo: "",
              NoOfEmployee: 0,
              Owner: "",
              Phone: "",
              PostalCode: "",
              State: null,
              TimeZone: "",
              Type: "",
              Website: ""
            }];
            tasksObject.ContactDetails = [{
              ContactDetailsId: this.contactId,
              LastName: "",
              Avatar: "",
              FirstName: "",
              IsDisable: false
            }];
            // tasksObject.CompanyContacts = [{
            //   Address: "",
            //   CompanyContactsId: 0,
            //   CompanyDetails: null,
            //   CompanyDetailsId: 0,
            //   ContactDetails: null,
            //   ContactDetailsId: 0,
            //   ContactPositionsId: 0,
            //   ContactStatus: null,
            //   ContactStatusId: 0,
            //   CreatedDate: new Date(),
            //   Email: "",
            //   IsDefaultCompany: false,
            //   IsDisable: false,
            //   IsMainContact: false,
            //   LastActivity: "",
            //   Lastcontacted: "",
            //   LeadStatus: false,
            //   Owner: "",
            //   Phone: "",
            //   StatusName: ""
            // }];
            tasksObject.IsComplete = false;

            //appenidng both the contactid and the company ids of the associate
            let associateRecords = this.ContactSelectedValues + "$" + this.CompanySelectedValues;

            // console.log(tasksObject);

            // Save Tasks
            this.tasksService.SaveTasksDetails(tasksObject,associateRecords).subscribe(
              result => {
                if (result != null) {
                  this.taskContentTxt = "";
                  this.closePopup.emit();
                  //this.router.navigate(['contact', { contactId: this.contactId }]);
                }
                else {
                  //console.log('Error Saving');
                }
              }
            );

          }
          else {
            //console.log(" Error: taskTime ");
          }
        }
        else {
          //console.log(" Error: Reminder Date ");
        }
      }
      else {
        //console.log(" Error: Due Date ");
      }
    }
    else {
      //console.log(" Error: Task Content ");
    }
  }


  //---------------------------------------------------- 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 ----------------------------------------------------//

}