import { Component, Injector, ViewEncapsulation, ViewChild, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { NotifyService } from '@abp/notify/notify.service';
import { AppComponentBase } from '@shared/common/app-component-base';
import { TokenAuthServiceProxy, SupportCategoryTypesServiceProxy } from '@shared/service-proxies/service-proxies';
import { UserServiceProxy, UserListDto, SupportTicketServiceProxy, SupportTicketStatusServiceProxy, SupportTicketTypeServiceProxy, TicketTypeList, TicketStatusList, CreateTicketDto, CreateAttachments, CreateNotes, TicketEffortHoursDto } from '@shared/service-proxies/service-proxies';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import { TicketNotesModalComponent } from './ticket-notes-modal.component';
import { AppSessionService } from '@shared/common/session/app-session.service';
import { Table } from 'primeng/components/table/table';
import { Paginator } from 'primeng/components/paginator/paginator';
import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent';
import { FileDownloadService } from '@shared/utils/file-download.service';
import { EntityTypeHistoryModalComponent } from '@app/shared/common/entityHistory/entity-type-history-modal.component';
import * as _ from 'lodash';
import * as moment from 'moment';
import { Router } from '@angular/router';
import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
import { HttpClient } from '@angular/common/http';
import { FormControl } from '@angular/forms';
import {Location} from '@angular/common';
import { AppConsts } from '@shared/AppConsts';
import {FormBuilder, FormGroup, Validators} from "@angular/forms";

import { NgxDropzoneModule } from 'ngx-dropzone';
import { SupportCategoryTypesComponent } from './supportCategoryTypes/supportCategoryTypes.component';
declare var $: any;



@Component({
    templateUrl: './create-support-ticket.component.html',
    encapsulation: ViewEncapsulation.None,
    animations: [appModuleAnimation()],
    styleUrls: ['./support-ticket.component.less'],
})
export class CreateSupportTicketComponent extends AppComponentBase implements OnInit {

    @ViewChild('dataTable', { static: true }) dataTable: Table;
    @ViewChild('paginator', { static: true }) paginator: Paginator;
    @ViewChild('ticketNotesModal', {static: false}) ticketNotesModal: TicketNotesModalComponent;

    bsConfig: Partial<BsDatepickerConfig>;

    effortHours : TicketEffortHoursDto[];

    id: any;
    defaultDate = new Date();
    dueDate = new Date();
    startDate = new Date();
    //users: UserListDto = new UserListDto();
    //contacts: ContactListDto= new ContactListDto();
    incidentDate: any;
    incidentType: any;
    typesId: number;
    content: string;
    notes: any[] = [];
    users: UserListDto[] = [];
    ticketTypes: TicketTypeList[] = [];
    ticketStatuses: TicketStatusList[] = [];
    today: any;
    uploadUrl: string;
    url: string;
    uploadedFiles: any[] = [];
    data: any[] = [];
    noteCreator: string;
    tenancy: boolean = false;
    hideNew: boolean = false;

    assignedToId: any;
    assignedTo: any;
    ticketTypeId: any;
    ticketStatusId: any;
    shortDescription: any;
    description: any;
    rootCause: string;
    // solution: string;
    environment: any;
    priority: any;
    effortHour?: number;
    showAlert: boolean = false;
    typeTrigger: any;
    categoryTypes: any;
    solution: string;
    categoryTypeIds: number[]
    assignedStatusId: any;

    parentId: any;

    files: File[] = [];

    notesCreate: Array<any> = [];
    
    attachMents: Array<any> = [];

    constructor(
        injector: Injector,
        private _notifyService: NotifyService,
        private _userServiceProxy: UserServiceProxy,
        private _supportTicketServiceProxy: SupportTicketServiceProxy,
        private _supportTicketStatusServiceProxy: SupportTicketStatusServiceProxy,
        private _supportTicketTypeServiceProxy: SupportTicketTypeServiceProxy,
        private _supportCategoryTypeServiceProxy : SupportCategoryTypesServiceProxy,
        private _tokenAuth: TokenAuthServiceProxy,
        private _activatedRoute: ActivatedRoute,
        private _httpClient: HttpClient,
        private _router: Router,
        private _location:Location,
        private route: ActivatedRoute,
        //private _orderAppService: OrderServiceProxy,
        //private _incidentTypesService: IncidentTypesServiceProxy,
        //private _orderIncidentsService : OrderIncidentsServiceProxy,
        private _appSessionService: AppSessionService
    ) {
        super(injector);
        this.uploadUrl = AppConsts.remoteServiceBaseUrl + '/DemoUiComponents/UploadFiles';
        this.url = AppConsts.appBaseUrl;
        
    }

    ngOnInit(): void {
        let maxcount = 1000;
        this.route.paramMap.subscribe(params => {
            this.parentId = params.get("id")
        })
        $('.kt-select2').select2();
        this.showAllUsers();
        this.showAllTypes();
        this.showAllStatus();
        this.getCategoryTypes()
        this.getEffortHours();
        this.today = new Date();
        this.noteCreator = this._appSessionService.user.name + ' ' + this._appSessionService.user.surname;
        if(this._appSessionService.tenant != undefined) {
          this.tenancy = true;
          this.hideNew = true;
        }
        var that = this;
        $('#assigned').change(function() {
           //that.selectedStatusId = that.assignedStatusId;
           $('#statusInputCreate').val(that.assignedStatusId);
           $('#statusInputCreate').trigger('change');

        });
        var re = "sandbox"; 
        var str = this.url;
        if(str.search(re) == -1){
           $('#environmentInput').val('Production');
           $('#environmentInput').trigger('change');
        }
        else {
           $('#environmentInput').val('Sandbox');
           $('#environmentInput').trigger('change');
        } 


        this.typeTrigger = Number($('#typeInput').val());
        $('#typeInput').change(function() {
            that.typeTrigger =  $("#typeInput :selected").val();
            console.log(that.typeTrigger)
            //that.selectedStatusId = that.assignedStatusId;
            // $('#statusInput').val(that.assignedStatusId);
            // $('#statusInput').trigger('change');
         });
    }

    ngAfterViewInit(){
        $('.kt-select2').select2();
        $(".m-input").datepicker("setDate", new Date());
    }

    onSelect(event) {
      console.log(event.addedFiles);
      if(event.rejectedFiles.length != 0) {
        this.showAlert = true;
      }
      this.files.push(...event.addedFiles);
      let f = event.addedFiles;
      for (const file of f) { 
         this.getData(file);
           
      }

    }
     
    onRemove(event) {
      console.log(event.name);
      this.files.splice(this.files.indexOf(event), 1);
      //this.data.splice(this.data.indexOf(event), 1);
      
      _.remove(this.data, function (el) {
        
           return el.fileName === event.name;
           
        
       });

    }

    closeAlert() {
      this.showAlert = false;
    }
    goBack(){
        this._location.back();
    }

    getIncident(event?: LazyLoadEvent) {
        if (this.primengTableHelper.shouldResetPaging(event)) {
            this.paginator.changePage(0);
            return;
        }


        
    }

    reloadPage(): void {
        this.paginator.changePage(this.paginator.getPage());
    }

    showAllUsers() : void {
      //this.active = true;
      this._supportTicketServiceProxy.getUsersForDropDown().subscribe((result) => {
         this.users = result.items;
 
     });




 
   }

   showAllTypes() : void {
      //this.active = true;
      this._supportTicketTypeServiceProxy.getTicketTypeList().subscribe((result) => {
         this.ticketTypes = result.items;
 
     });
    }

    showAllStatus() : void {
      //this.active = true;
      this._supportTicketStatusServiceProxy.getTicketStatusList().subscribe((result) => {
         this.ticketStatuses = result.items;

         for (var i = 0, len = result.items.length; i < len; i++) {


               if(result.items[i].code == 'ASSIGNED') {
                  this.assignedStatusId = result.items[i].id;
                  
                  
               }
              
              
         }
 
     });
    }
    save(): void {

        let that = this;
        this.spinnerService.show();
      for(let item of this.notes) {
            let a = new CreateNotes({
              ticketId: null,
              notes: item,
              creator: this.noteCreator,
              creationTime: this.today,
            });
            this.notesCreate.push(a);
      } 
        
      if(this._appSessionService.tenant != undefined) {
          this.assignedToId = null;
          this.assignedTo = "";
          this.ticketStatusId = Number($('#statusNew').val());
      }
      else {
          this.assignedToId = Number($('#assigned').val());
          this.assignedTo = $('#assigned option:selected').text();
          this.ticketStatusId = Number($('#statusInputCreate').val());
      }
      this.ticketTypeId = Number($('#typeInput').val());
      this.environment = $('#environmentInput').val();
      this.priority = Number($('#priorityInput').val());
      
      let checkEffort = $('#effortHours').val();
      if(checkEffort == null || checkEffort == ''){
          this.effortHour = 0
      }
      else{
          this.effortHour = checkEffort;
      }
      for (let item of this.data) {

          let a = new CreateAttachments({
              fileName: item.fileName,
              base64EncodedData: item.base64EncodedData,
              ticketId: null,
              
          });

          this.attachMents.push(a);
      }
      
      let input = new CreateTicketDto({
           tenantId: null,
           parentId: this.parentId,
           dueDate: moment(this.dueDate),
           startDate: moment(this.startDate),
           effortHour: this.effortHour,
           assignedToId: this.assignedToId,
           ticketTypeId: this.ticketTypeId,
           ticketStatusId: this.ticketStatusId,
           shortDescription: this.shortDescription,
           assigned: this.assignedTo,
           creator: this.noteCreator,
           description: this.description,
           rootCause: this.rootCause == null ? "" : this.rootCause,
           solution: this.solution == null ? "" : this.solution,
           environment: this.environment,
           priority: this.priority,
           createAttachments: this.attachMents,
           createNotes: this.notesCreate,
           categoryTypeId: $("#categoryTypeInput").val()          
      }); 
      
      this._supportTicketServiceProxy.createTicket(
                  input
              ).pipe().subscribe(result => {
                  this.attachMents = [];
                  this.notesCreate = [];
                  this.notify.info(this.l('SavedSuccessfully'));
                  this.spinnerService.hide();
                  this.goBack();
       });
        
    }
   
    updateMyDate(newDate) {
        this.defaultDate = newDate;
    }

    ticketNotes(id?: any): void {
        this.ticketNotesModal.show(id, false);
    }

    onBeforeSend(event): void {
        event.xhr.setRequestHeader('Authorization', 'Bearer ' + abp.auth.getToken());
    }

    
    /*getFile(event): void {
      for (const file of event.files) { 
           this.getData(file);
           
             
      }
    }*/

   /* remove(event): void {
      
       
       
       //this.data = this.data.filter(item => item = event.file.name);
       
       _.remove(this.data, function (el) {
        
           return el.fileName === event.file.name;
           
        
       });
       console.log(this.data);

       
    }*/

    getData(file) {
              
              var reader:any;
              let me = this;
              reader = new FileReader();
              reader.readAsDataURL(file);
              //reader.onload = function () {
                //me.modelvalue = reader.result;
                //console.log(reader.result.toString().split(',')[1]);
                          

              //};
              reader.onload = function() {
                              //me.modelvalue = reader.result.toString().split(',')[1];
                              //me.image.fileName = file.name;
                              //me.image.base64EncodedData = me.modelvalue;
                              
                              me.data.push(      
                              { fileName: file.name, base64EncodedData: reader.result.toString().split(',')[1] });

                        
                        
                      
              };
              reader.onerror = function (error) {
                console.log('Error: ', error);
              };
    }

    deleteRow(index){
            
            
                    this.notes.splice(index,1);
             
    }

    getCategoryTypes(){
        this._supportCategoryTypeServiceProxy.getAll(undefined,
                                                     undefined,
                                                     undefined,
                                                     undefined,
                                                     undefined,
                                                     0,
                                                     undefined,
                                                     undefined,
                                                     1000)
                                              .subscribe(result => {
                                                this.categoryTypes = result.items
                                              })
    }

    getEffortHours(){
        this._supportTicketStatusServiceProxy.getEffortHours().subscribe(result =>{
            this.effortHours = result;
        });
    }

}