import {
   Component,
   EventEmitter,
   Injector,
   Output,
   ViewChild
} from '@angular/core';
import {
   AppComponentBase
} from '@shared/common/app-component-base';
import {
   TimeSheetServiceProxy,
   UserServiceProxy,
   CreateTimeSheetInput,
   UpdateTimeSheetInput,
   UserListDto,
   TimeSheetInput,
} from '@shared/service-proxies/service-proxies';
import * as _ from 'lodash';
import {
   finalize
} from 'rxjs/operators';
import * as moment from 'moment';
import { ModalDirective } from 'ngx-bootstrap';

@Component({
   selector: 'createOrEditTimeSheetModal',
   templateUrl: './create-or-edit-timesheet.component.html',
   styles: [`.user-edit-dialog-profile-image {
            margin-bottom: 20px;
       }`]
})
export class CreateOrEditTimeSheetModalComponent extends AppComponentBase {

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

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


   isCreate: boolean = false;
   active = false;
   saving = false;
   loginDate: any;
   logoutDate: any;
   timesheet: {
      id: number, 
      loginTime: any,
      logoutTime: any,
      creatorUserId: number
   } = <any>{};

   users: UserListDto[] = [];

   userInput:any;


   constructor(
      injector: Injector,
      private _timeSheetServiceProxy: TimeSheetServiceProxy,
      private _userServiceProxy: UserServiceProxy,
   ) {
      super(injector);
   }

   onShown(): void {
      $('.kt-select2').select2();
   }


   create(): void {

      this.saving = true;

      let input = new CreateTimeSheetInput({
         loginTime: moment.utc(moment(this.loginDate).format('YYYY-MM-DD') + ' ' + moment(this.timesheet.loginTime).format('HH:mm:ss')),
         logoutTime: moment.utc(moment(this.logoutDate).format('YYYY-MM-DD') + ' ' + moment(this.timesheet.logoutTime).format('HH:mm:ss')),
         creatorUserId: Number((<HTMLInputElement>document.getElementById('userInput')).value)
      });

      this._timeSheetServiceProxy.createTimeSheet(input)
         .pipe(finalize(() => {
            this.saving = false;
         }))
         .subscribe(() => {
            this.alertSaveSuccess();
         });
   }


   update(): void {

      this.saving = true;

      let input = new UpdateTimeSheetInput({
         id: this.timesheet.id,
         loginTime: moment.utc(moment(this.loginDate).format('YYYY-MM-DD') + ' ' + moment(this.timesheet.loginTime).format('HH:mm:ss')),
         logoutTime: moment.utc(moment(this.logoutDate).format('YYYY-MM-DD') + ' ' + moment(this.timesheet.logoutTime).format('HH:mm:ss')),
         creatorUserId: Number((<HTMLInputElement>document.getElementById('userInput')).value)
         
      });
     console.log(input.creatorUserId);
      this._timeSheetServiceProxy.updateTimeSheet(input)
         .pipe(finalize(()=> {
            this.saving = false;
         }))
         .subscribe(()=> {
            this.alertSaveSuccess();
         });
         console.log(input);
   }
   

   show(id?: any): void {
      let maxcount = 1000;
      this.isCreate = id ? false: true;

      this.active = true;

            if (!this.isCreate) 
            {
               this._timeSheetServiceProxy
                  .getTimeSheet(id,undefined, undefined, undefined, undefined, undefined, undefined, undefined)
                  .subscribe(result => {
                     
                     this.timesheet = result.items[0]; 
                     this.loginDate = moment.utc(this.timesheet.loginTime).toDate();
                     this.logoutDate = moment.utc(this.timesheet.logoutTime).toDate();
                     this.timesheet.loginTime =  moment.utc(this.timesheet.loginTime).toDate();
                     this.timesheet.logoutTime =  moment.utc(this.timesheet.logoutTime).toDate();
                     this.userInput = this.timesheet.creatorUserId;
                     console.log(this.timesheet.loginTime);
                     this.showAllUsers(maxcount);
                     this.modal.show();
                  });
            } 
            else 
            {
               this.clearField();
               this.userInput = null;
               this.showAllUsers(maxcount);
               this.modal.show();
            }

   }

   clearField(): void {
      this.timesheet.loginTime = null;
      this.timesheet.logoutTime = null;
      this.logoutDate = null;
      this.loginDate = null;
      this.userInput = null;
   }

   
   alertSaveSuccess(): void {
      this.notify.info(this.l('SavedSuccessfully'));
      this.modalSave.emit(null);
      this.close();
   }

   showAllUsers(maxcount) : void {
      this.active = true;
      this._userServiceProxy.getUsers(undefined,undefined,undefined, undefined, undefined, maxcount, undefined).subscribe((result) => {
         this.users = result.items;
 
     });
 
   }
   
   close(): void {
      this.active = false;
      this.modal.hide();
   }
}