import { Component, OnInit, ViewChild,ElementRef, HostListener } from '@angular/core';
import * as moment from 'moment';
import { HyperService } from '../../core/services/http.service';
import { Router } from "@angular/router";
import { ConfirmpopComponent } from '../../trainersite/confirmpop/confirmpop.component';
import { ConfirmPopupComponent } from '../../sales_executive/confirm-popup/confirm-popup.component';
declare var $: any;
@Component({
    selector: 'app-dashboard-popup',
    templateUrl: './dashboard-popup.component.html',
    styleUrls: ['./dashboard-popup.component.scss'],
    host: {
        '(document:click)': 'onClick($event)',
      }
})

export class DashboardPopupComponent implements OnInit {

    is_modal_visible: boolean = false;
    screen_callback: any;
    assessment_id: number;
    content_data: any;
    sales: any;
    learnpath: any;
    type: any;
    rewardpoints_data: any;
    rewardpoints_pts:any={};
    redeempoints_data:any;
    reward_type:number=1;
    data_as:any;
    show_info:boolean=false;
    points_level:any;
    select_tab:number;
    @ViewChild(ConfirmPopupComponent) confirm_modal: ConfirmPopupComponent;
    new_redemption_details: any;
    constructor(private server: HyperService, private router: Router,private _eref: ElementRef) {
        this.getPointslevel();
        
    }

    ngOnInit() {
        $(document).on("click", function () {
            this.show_info=false;
        });
        
    }
    // public onContainerClicked(event: MouseEvent): void {
    //     if ((<HTMLElement>event.target).classList.contains('info')) {
    //         this.show_info=false;
    //     }
    //   }
    onClick(event) {
         if (event.target.className=='earned_points' || event.target.className=='earn_head' || event.target.className=='reward_point_right' || event.target.className=='reward_point_left' || event.target.className=='tab-content'){
            this.show_info=false;
            
        } // or some similar check
          
       }
    public showcontentrModal(url: string = "", data: any = {}, callBack: any = null) {
        this.is_modal_visible = true;
        this.content_data = data.sendData;
        this.type =this.content_data.type;
        console.log(this.content_data,this.type)
        if (this.content_data.type == 1) { 
            let m = moment(this.content_data.date, "MMM YYYY").format("MM");
            let y = moment(this.content_data.date, "MMM YYYY").format("YYYY");
            this.getTargetSalesList(y, m);
        } else if (this.content_data.type == 2) {
            this.getLearingPath();
        } else if (this.content_data.type == 3) {
            this.rewardpoints(this.reward_type);
        }
        this.screen_callback = callBack;

    }

    @HostListener('document:click', ['$event'])
    clickout(event) {
        console.log(event)
      if(this._eref.nativeElement.contains(event.target)) {
        if(this.show_info){
            console.log('if')
            this.show_info = false;
        }  
      } 
    }
    // @HostListener('window:scroll', ['$event'])
    // windowout(event) {
    //     console.log(event)
    //   if(this._eref.nativeElement.contains(event.target)) {
    //     if(this.show_info){
    //         console.log('if')
    //         this.show_info = false;
    //     }  
    //   } 
    // }

    showInfo() {
        console.log('show')
        this.show_info = !this.show_info;
        this.new_redemption_details = [
            {
                name : "No Training Attended",
                name1: "No Redemption"
            },
            {
                name :"Base Certified",
                name1 :"50% Reward Points"
            },
            {
                name :"Bronze Certified",
                name1 :"75% Reward Points"
            },
            {
                name :"Silver certified (both 2 levels)",
                name1 :"100% Reward Points"
            },
            {
                name :"Gold certified (both 2 levels)",
                name1 :"125% Reward Points"
            }
        ]

        console.log(this.new_redemption_details)
    }
    close(e){
        console.log(e,"e")
        this.show_info=false;
    }

    getTargetSalesList(year, month) {
        this.server.get("dashboard/sales/" + year + "/" + month + "")
            .then((data) => {
                if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
                    this.sales = data.result.data;
                } else if (data.result.status == 401 && data.result.response == 'failed') {
                    this.router.navigateByUrl('');
                }
            });
    }
    

    getLearingPath() {
        this.server.get("dashboard/learnpath")
            .then((data) => {
                if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
                    this.learnpath = data.result.data;
                } else if (data.result.status == 401 && data.result.response == 'failed') {
                    this.router.navigateByUrl('');
                }
            });
    }
    getPointslevel() {
        this.server.get("common/learning")
            .then((data) => {
                if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
                    this.points_level = data.result.data;
                } else if (data.result.status == 401 && data.result.response == 'failed') {
                    this.router.navigateByUrl('');
                }
            });
    }

    rewardpoints(type) {
        this.select_tab = type;
        console.log(type)
        let _url;
        if(type==1){
            _url="dashboard/rewardpoints?page=0&limit=100000"
        }   
        else{
            _url="dashboard/redeemhistory?page=0&limit=100000"
        } 
        this.server.get(_url)
            .then((data) => {
                if (data.status == 200 && data.result.response != 'failed' && data.result.data != null) {
                    if(type==1){
                        this.rewardpoints_data = data.result.data;
                        
                    }else{
                        this.redeempoints_data= data.result.data;
                    }
                    
                    this.rewardpoints_pts= data.result;
                   
                    console.log( this.rewardpoints_pts,"rewardpoints_pts")
                } else if (data.result.status == 401 && data.result.response == 'failed') {
                    this.router.navigateByUrl('');
                }
            });
    }

    onCloseModal() {
        this.is_modal_visible = false;
        this.screen_callback(true);

    }

    onClickRedeem(){
        this.is_modal_visible = false;
        // this.router.navigateByUrl('wallet');
        this.confirm_modal.showconfirmModal('confirm', {}, (data) => {
            this.is_modal_visible = true;
        })
        
    }
}