import { DashboardService } from './../dashboard/dashboard.service';
import { FooterService } from './footer.service';
import { Component, OnInit, ViewChild } from '@angular/core';
import { IndexService } from '../index/index.service';
import { CategoryService } from '../category/category.service';
import { NgForm } from '@angular/forms';
import { api } from '../../../config';

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

  @ViewChild('indexForm', { static: true }) form: NgForm;
  @ViewChild('socialForm', { static: true }) form1: NgForm;

  backuriupload = api.ADMIN_URL_UPLOAD;
  contactotext = '';
  phonetext = '';
  emailtext = '';
  righttext = '';

  logourl = '';
  categories: any;

  facebook: any;
  twitter: any;
  google: any;
  linkedin: any;

  urlfacebook = '';
  urltwitter = '';
  urlgoogle = '';
  urllinkedin = '';

  constructor(
    private indexService: IndexService,
    private categoryService: CategoryService,
    private footerService: FooterService,
    private dashboardService: DashboardService,
  ) { }

  ngOnInit() {
    this.dashboardService.updateMenuPosition(5);
    this.fetchMainData();
    this.fetchMainData();
    this.fetchSocial();
    this.fetchSocial();
    this.fetchLogo();
    this.fetchCategories();
  }

  fetchLogo() {
    this.indexService.getPicture('mainlogo')
    .subscribe(data => {
      const aux: any = data;
      if (aux.resp) {
        this.logourl = aux.logo.url;
      }
    });
  }

  fetchCategories() {
    this.categoryService.getCategories()
    .subscribe(data => {
      const aux: any = data;
      if (aux.resp) {
          this.categories = aux.categories;
      }
    });
  }

 fetchMainData() {
   this.indexService.getIndexData('contactotext')
   .subscribe(data => {
     const aux: any = data;
     if (aux.resp) {
       this.contactotext = aux.indexText;
       this.indexService.getIndexData('phonetext')
       .subscribe(data1 => {
         const aux1: any = data1;
         if (aux1.resp) {
           this.phonetext = aux1.indexText;
           this.indexService.getIndexData('emailtext')
           .subscribe(data2 => {
             const aux2: any = data2;
             if (aux2.resp) {
               this.emailtext = aux2.indexText;
               this.indexService.getIndexData('righttext')
               .subscribe(data3 => {
                 const aux3: any = data3;
                 if (aux3.resp) {
                   this.righttext = aux3.indexText;
                 }
               });
             }
           });
         }
       });
    }
  });
 }

  fetchSocial() {
    this.footerService.getSocialByName('facebook')
    .subscribe(data => {
      const aux: any = data;
      if (aux.resp) {
        this.facebook = aux.social;
        this.form1.controls.facebookinput.setValue(aux.social.url);
      }
    });
    this.footerService.getSocialByName('twitter')
    .subscribe(data => {
      const aux: any = data;
      if (aux.resp) {
        this.twitter = aux.social;
        this.form1.controls.twitterinput.setValue(aux.social.url);
      }
    });
    this.footerService.getSocialByName('google')
    .subscribe(data => {
      const aux: any = data;
      if (aux.resp) {
        this.google = aux.social;
        this.form1.controls.googleinput.setValue(aux.social.url);
      }
    });
    this.footerService.getSocialByName('linkedin')
    .subscribe(data => {
      const aux: any = data;
      if (aux.resp) {
        this.linkedin = aux.social;
        this.form1.controls.linkedininput.setValue(aux.social.url);
      }
    });
  }
  onKeyUp(event: any) {
    this.contactotext = event.target.value;
    this.indexService.setIndexData('contactotext', this.contactotext)
    .subscribe();
  }

  onKeyUp1(event: any) {
    this.phonetext = event.target.value;
    this.indexService.setIndexData('phonetext', this.phonetext)
    .subscribe();
  }

  onKeyUp2(event: any) {
    this.emailtext = event.target.value;
    this.indexService.setIndexData('emailtext', this.emailtext)
    .subscribe();
  }

  onKeyUp3(event: any) {
    this.righttext = event.target.value;
    this.indexService.setIndexData('righttext', this.righttext)
    .subscribe();
  }

  FieldsChange(values:any) {
    this.footerService.updateCheckedSocial(this.facebook._id, values.currentTarget.checked)
    .subscribe(data => {
      const aux: any = data;
      if (aux.resp) {
        this.fetchSocial();
      }
    });
    }

  FieldsChange1(values:any) {
    this.footerService.updateCheckedSocial(this.twitter._id, values.currentTarget.checked)
    .subscribe(data => {
      const aux: any = data;
      if (aux.resp) {
        this.fetchSocial();
      }
    });
    }

  FieldsChange2(values:any) {
    this.footerService.updateCheckedSocial(this.google._id, values.currentTarget.checked)
    .subscribe(data => {
      const aux: any = data;
      if (aux.resp) {
        this.fetchSocial();
      }
    });
    }
  FieldsChange3(values:any) {
    this.footerService.updateCheckedSocial(this.linkedin._id, values.currentTarget.checked)
    .subscribe(data => {
      const aux: any = data;
      if (aux.resp) {
        this.fetchSocial();
      }
    });
    }

    onKeyUp4(event: any) {
      this.urlfacebook = event.target.value;
      this.footerService.updateUrlSocial(this.facebook._id, this.urlfacebook)
      .subscribe();
    }

    onKeyUp5(event: any) {
      this.urltwitter= event.target.value;
      this.footerService.updateUrlSocial(this.twitter._id, this.urltwitter)
      .subscribe();
    }

    onKeyUp6(event: any) {
      this.urlgoogle = event.target.value;
      this.footerService.updateUrlSocial(this.google._id, this.urlgoogle)
      .subscribe();
    }

    onKeyUp7(event: any) {
      this.urllinkedin = event.target.value;
      this.footerService.updateUrlSocial(this.linkedin._id, this.urllinkedin)
      .subscribe();
    }

}