import { Component, OnInit, Input, Output, EventEmitter, OnChanges} from '@angular/core';
import { IPersonSocialMedia } from '../shared/core/IPersonSocialMedia';
import { CommonService } from '../shared/service/common.service';
import { FormGroup, FormArray, FormBuilder, Validators} from '@angular/forms';
import { IPersonCustomSocialMedia } from '../shared/core/IPersonCustomSocialMedia';
import { StaffService } from '../shared/service/staff.service';

@Component({
  selector: 'app-social-media',
  templateUrl: './social-media.component.html',
  styleUrls: ['./social-media.component.css']
})
export class SocialMediaComponent implements OnInit, OnChanges {

  @Input() StaffId : number;
  //input to get social media data
  @Input() SocialMediaObject: IPersonSocialMedia;

  //input to get custom social media data
  @Input() CustomSocialMediaObject: IPersonCustomSocialMedia[];

  //output defualt social media data
  @Output() bindSocialMediaObject: EventEmitter<IPersonSocialMedia> = new EventEmitter();
  //output new social media data
  @Output() bindNewSocialMediaObejct : EventEmitter<IPersonCustomSocialMedia[]> = new EventEmitter();
  //bind messenger types
  messengerTypes : any[];
  //use as a default value for messenger types
  defaultMessengerType ="0";

  selectedMessengerType :string = "0";

  // use to get newly added social account fields
  newSocialAccountForm: FormGroup;

  constructor(private common: CommonService, private fb: FormBuilder, private staffService: StaffService) { }

  ngOnInit() {
    
    //calling method to get messenger types
    this.getMessengerTypes();
    
    //creating form for new social media rows
    if(!this.newSocialAccountForm){
      this.newSocialAccountForm = this.fb.group({
        newAccountsList: this.fb.array([])
      })
    }
  }

  ngOnChanges(){
    
    if(!this.newSocialAccountForm){
      this.newSocialAccountForm = this.fb.group({
        newAccountsList: this.fb.array([])
      })
    }

    //bind custom social media data to the form group when CustomSocialMediaObject is not empty
    if(this.CustomSocialMediaObject){
      this.fillCustomSocialMediaAccountRows(this.CustomSocialMediaObject);
    }    
    //console.log(this.CustomSocialMediaObject);
  }

  onChanges(){
    this.SocialMediaObject.MessengerType = parseInt(this.selectedMessengerType);
    //output defalut social media object
    this.bindSocialMediaObject.emit(this.SocialMediaObject);
    //output new/custom social media object 
    this.bindNewSocialMediaObejct.emit(this.accountList.value);
    //console.log(this.newSocialAccountForm.value);
  }


  //call service to get messenger tpyes
  getMessengerTypes(){
    this.common.getMessengerTypes(this.defaultMessengerType).subscribe(types =>{
      
      this.messengerTypes = types;
      this.messengerTypes.unshift({ label :"Select services", value:"0"});
      this.selectedMessengerType = this.SocialMediaObject.MessengerType.toString();
    })
  }

  // get method to access new social medial elements as a form array
  get accountList() {
    return this.newSocialAccountForm.get('newAccountsList') as FormArray;
  }

  //thios method new row for new social media list, parameter 'data' contains the data to be fill when adding a row
  addNewAccountRow(data : IPersonCustomSocialMedia) { 
    var row = this.createNewAccountRow();
    //if data available, it will patch to the formarray list
    if(data){
      row.patchValue({ Id: data.Id, Name: data.Name, Details:data.Details,ForAll:data.ForAll, Staff: {Id:this.StaffId}, StaffId: this.StaffId, IsDisabled: false});
    }    
    this.accountList.push(row);
  }

  //this method remove clicked row from social media list
  deleteNewAccountRow(index) {
    //getting row to be deleted
    var currentDeleteRow = this.accountList.value[index];

    var deleteCollection: IPersonCustomSocialMedia[] = [{
      Id: currentDeleteRow["Id"],
      Name: currentDeleteRow["Name"],
      Details: currentDeleteRow["Details"],
      IsDisabled: currentDeleteRow['IsDisabled'],
      ForAll: currentDeleteRow['ForAll'],
      StaffId: currentDeleteRow['StaffId']
    }]
    //removing row from list
    this.accountList.removeAt(index);

    //calling service to remove row from db
    this.staffService.deleteStaffCustomSocialMedia(deleteCollection).subscribe(res =>{
      //response comes
    });
    this.onChanges();
  }

  //this method create new row to be added
  createNewAccountRow(): FormGroup {
    return this.fb.group({ Id:0, Name: '', Details: '', ForAll:false, Staff: {Id:this.StaffId}, StaffId: this.StaffId, IsDisabled: false });
  }

  //when staff already has custome social media accounts, this method will create fields with data
  fillCustomSocialMediaAccountRows(dataObject : IPersonCustomSocialMedia[]){
    //loop the object and run add new row method
    dataObject.forEach(val =>{

      if(val.Name != "" && val.Details != ""){
        this.addNewAccountRow(val);
      }
      
    })
  }

}