import { Component, OnInit } from '@angular/core';
import { BaseComponent } from '../../base/base.component';
import { takeUntil } from 'rxjs/operators';
import { PersonalDetailsService } from '../../services/personal-details.service';
import { CareerProfileModel } from '../../models/career-profile.model';
import { UtilsService } from '../../../oneit/services/utils.service';

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent extends BaseComponent implements OnInit {

    selectedMobileTab = 'dashboard';
    careerProfile = new CareerProfileModel();
    assocs = ['Candidate.User', 'Candidate.OccupationPreference'];
    sections = [
        {link: '/my-career-web/dashboard/personal-details', key: 'CompletedPercentage'},
        {link: '/my-career-web/assessments/work-style', key: 'CompletedPercentageWS'},
        {link: '/my-career-web/assessments/work-preference', key: 'CompletedPercentageWP'},
        {link: '/my-career-web/career-history/personal-data', key: 'CompletedPercentageCH'},
        {link: '/my-career-web/assessments/diversity-profile', key: 'CompletedPercentageDiv'}
    ];
    activeSection;
    contentSection: {text: string, button: string, link: string, firstTime?: string, firstTimeBtn?: string};

    constructor(
        private personalDetailsService: PersonalDetailsService,
        private utilsService: UtilsService
    ) {
        super();
    }

    ngOnInit() {
        this.getCareerProfile();
        this.personalDetailsService.careerProfileUpdated$
            .pipe(takeUntil(this.componentInView))
            .subscribe(profile => {
                this.careerProfile = this.utilsService.cloneObject(profile);

                console.log(this.careerProfile);
            });
        this.personalDetailsService.currentTab$
            .pipe(takeUntil(this.componentInView))
            .subscribe(tab => {
                if (tab) {
                    this.contentSection = tab;
                } else {
                    this.contentSection = {
                        text: 'Your Career Profile is complete. You can use your Career Profile to show employers your natural strengths.',
                        button: 'Show my profile',
                        link: ''
                    }
                }
            });
    }

    getCareerProfile(): void {
        this.isLoading = true;
        this.personalDetailsService.getCareerProfile(this.assocs)
            .pipe(takeUntil(this.componentInView))
            .subscribe(response => {
                this.careerProfile = response;
                this.personalDetailsService.careerProfileUpdated = this.careerProfile;
                this.isLoading = false;
                this.setActiveSection();
            }, err => {
                this.utilsService.handleError(err);
                this.isLoading = false;
            })
    }

    setActiveSection(): void {
        this.activeSection  = this.sections.find(s => this.careerProfile[s.key] !== 100);
    }

}
