import { Component, ViewChild, Injector, Output, EventEmitter, OnInit, AfterViewInit} from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap';
import { finalize } from 'rxjs/operators';
import { HolidaysServiceProxy, CreateOrEditHolidayDto, LocationServiceProxy, SelectionType } from '@shared/service-proxies/service-proxies';
import { AppComponentBase } from '@shared/common/app-component-base';
import * as moment from 'moment';

declare var $ : any


@Component({
    selector: 'createOrEditHolidayModal',
    templateUrl: './create-or-edit-holiday-modal.component.html'
})

export class CreateOrEditHolidayModalComponent extends AppComponentBase implements OnInit{

    @ViewChild('createOrEditModal', { static: true }) modal: ModalDirective;

    @Output() modalSave: EventEmitter<any> = new EventEmitter<any>();


    
    active = false;
    saving = false;

    selectionType : any = 0;
    locationIds : any;
    filteredLocation: any;
    from: any ;
    fromDate: any = moment();
    fromTime: any;
    toDate: any = moment();
    toTime: any;
    to: any;
    isActive: number = 1;
    today = new Date();




    holiday: CreateOrEditHolidayDto = new CreateOrEditHolidayDto();



    constructor(
        injector: Injector,
        private _holidaysServiceProxy: HolidaysServiceProxy,
        private _locationAppService: LocationServiceProxy,
    ) {
        super(injector);

    }



    ngOnInit(): void {
  
    }

    onShow(EventEmitter){
        $('.kt-select2').select2();
        $("#selectionType").select2({
            minimumResultsForSearch: Infinity
        });

        this.holiday.selectionType == undefined ?  $("#selectionType").val(SelectionType[0])
        :         $("#selectionType").val(SelectionType[this.holiday.selectionType]);
        $("#selectionType").trigger('change'); 
        $("#location").val(this.holiday.locationIds).trigger('change')
        
        this.hideShowLocation()

        $('#selectionType').on('select2:select', function (e) {
            if($('#selectionType').val() == 'ALL'){
                $("#location").next(".select2-container").hide();
            }
            else{
                $("#location").next(".select2-container").show();
            }        });

    }

    hideShowLocation(){
        if($('#selectionType').val() == 'ALL'){
            $("#location").next(".select2-container").hide();
        }
        else{
            $("#location").next(".select2-container").show();
        }
    }

    filterLocation(maxcount): void {
        this._locationAppService.getLocationTableOnly(
            undefined,
            undefined,
            undefined,
            undefined,
            undefined,
            undefined
        ).subscribe(result => {
            this.filteredLocation = result;
        });
    }

    show(holidayId?: number): void {

        let maxcount = 1000;
        this.filterLocation(maxcount);


        if (!holidayId) {
            this.holiday = new CreateOrEditHolidayDto();
            this.holiday.id = holidayId;
            
            this.holiday.from = moment().startOf('day');
            this.holiday.to = moment().startOf('day');
            this.holiday.color = '#ffffff'
            this.fromTime = new Date(Date.now());
            this.toTime = new Date(Date.now());

            $("#location").hide();
            

            this.active = true;
            this.modal.show();
        } else {
            this._holidaysServiceProxy.getHolidayForEdit(holidayId).subscribe(result => {
                this.holiday = result.holiday;

                this.fromDate= this.holiday.from.utc(false).format('ddd MMM DD YYYY')
                this.toDate= this.holiday.to.utc(false).format('ddd MMM DD YYYY')
                let from = this.holiday.from.utc(false);
                let to = this.holiday.to.utc(false);;
                                    
                this.fromTime = new Date(from.year(),from.month(),from.date(),from.hours(),from.minutes())
                this.toTime = new Date(to.year(),to.month(),to.date(),to.hour(),to.minutes())

                //this.toTime = new Date(new Date(this.holiday.to.format('H:mm a')).toISOString()); 
                this.isActive = this.holiday.isActive
                this.active = true;
                this.modal.show();
            });
    
        }
        this.modal


    }

    buildHolidayObject(){
        this.selectionType = $("#selectionType").val() == "" ? 
        undefined :
        $("#selectionType").val();

        let fromTime = new Date(this.fromTime).toLocaleTimeString('en-US', { hour12: true, 
            hour: "numeric", 
            minute: "numeric",
            second: "numeric"
            }) as any;
        let toTime = new Date(this.toTime).toLocaleTimeString('en-US', { hour12: true, 
            hour: "numeric", 
            minute: "numeric",
            second: "numeric"
            }) as any;

        

        this.from = moment.utc(this.fromDate.utc(false).toDate().toDateString() + ' ' + fromTime);
        this.to = moment.utc(this.toDate.utc(false).toDate().toDateString() + ' ' +toTime);

        this.locationIds = $("#location").val();

        this.holiday.selectionType = this.selectionType;
        this.holiday.isActive = this.isActive ? 1 : 0
        this.holiday.from = this.from;

        this.holiday.to = this.to;
        if(this.selectionType != SelectionType.ALL){
            this.holiday.locationIds = this.locationIds
        }



}

    save(): void {
            this.saving = true;


            this.buildHolidayObject();

            if(this.holiday.from.isBefore(this.holiday.to)){

                this._holidaysServiceProxy.createOrEdit(this.holiday)
                 .pipe(finalize(() => { this.saving = false;}))
                 .subscribe(() => {
                    this.notify.info(this.l('SavedSuccessfully'));
                    this.close();
                    this.modalSave.emit(null);
                 });
          }
            else{
                abp.message.warn('Date from cannot be set before or equal to Date to');
                this.saving = false
            }

    }


    close(): void {

        this.active = false;
        this.modal.hide();
    }
}