import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox';
import { InputTextModule } from 'primeng/inputtext';
import { StyleClassModule } from 'primeng/styleclass';
import { SelectOptionsService } from '../../../services/select-options.service';
import { DropdownModule } from 'primeng/dropdown';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { ToggleButtonModule } from 'primeng/togglebutton';
import { TagModule } from 'primeng/tag';
import { ActivatedRoute } from '@angular/router';
import { InputTextareaModule } from 'primeng/inputtextarea';
import { ChipModule } from 'primeng/chip';
import { MenuAccountComponent } from '../../menu-account/menu-account.component';
import { DividerModule } from 'primeng/divider';
import { TableModule } from 'primeng/table';
import { HttpClient, HttpEventType } from '@angular/common/http';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { SubscriptionsService } from '../../../services/subscriptions.service';
import { lastValueFrom } from 'rxjs';
import { MessageService } from 'primeng/api';
import { environment } from '../../../../environments/environment';
import { FileUpload, FileUploadModule } from 'primeng/fileupload';
import { AutoCompleteCompleteEvent, Invoice, KeyValue, KeyValueRatio, Subscription, User } from '../../../../../../common-models/src/main.model';
import { GeoService } from '../../../services/geo.service';
import { ChangeDetectionStrategy } from '@angular/compiler';
import { EditorModule } from 'primeng/editor';
import { LoadingService } from '../../../services/loading.service';
import { AngularCropperjsModule, CropperComponent } from 'angular-cropperjs';
import { ImageService } from '../../../services/image.service';
import { DialogModule } from 'primeng/dialog';
import { SelectButtonModule } from 'primeng/selectbutton';
@Component({
  selector: 'app-account',
  standalone: true,
  imports: [SharedModule,FileUploadModule,EditorModule,AngularCropperjsModule,DialogModule,SelectButtonModule],
  providers:[MessageService],
  templateUrl: './account.component.html',
  styleUrl: './account.component.scss'
})
export class AccountComponent {
  @ViewChild(CropperComponent) public angularCropper: CropperComponent;
  @ViewChild('companyUpload') public companyUpload: FileUpload;
  @ViewChild('profileUpload') public profileUpload: FileUpload;
  private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
  user:User;
  subscriptions:Array<Subscription>;
  userSubscriptions:Array<Subscription>=[];
  maxFileSize=1000000;
  companyLogoUrl:string;
  profileUrl:string;
  imageUrl;
  type:'company'|'profile'
  stateOptions:KeyValueRatio[]=[
                {label:'16/9',value:16/9},
                {label:'1/1',value:1},
                {label:'2/3',value:2/3},
              ]
  value:number = this.stateOptions[0].value;
  config={aspectRatio: this.value}
  environment=environment
  constructor(public userService: UserService, 
              private subscriptionService: SubscriptionsService,
              private messageService: MessageService,
              private geoService:GeoService,
              public selectOptions:SelectOptionsService,
              private cdref:ChangeDetectorRef,
              private activatedRoute: ActivatedRoute,
              private loadingService:LoadingService,
              private imageUploadService: ImageService) {
			
	}
  async ngOnInit(){
    this.user=await this.userService.getById(this.id);
    this.userSubscriptions=await lastValueFrom(this.subscriptionService.getAllSubscriptions());
    if (!this.user.licensedIn || this.user.licensedIn?.length===0){
      this.user.licensedIn = [{name:'',value:''}]
    }
    this.user=await this.userService.getById(this.user.id);
    this.profileUrl = this.user.hasProfile?`${environment.apiBaseUrl}/profile/${this.user.id}.avif`:`/assets/images/placeholder.png`
    this.companyLogoUrl = this.user.hasCompanyLogo?`${environment.apiBaseUrl}/logo/${this.user.id}.avif`:`/assets/images/placeholder.png`
  }
  printInvoice(invoice:Invoice){}

  async updateProfile(user:User){
    //this.messageService.add({ severity: 'warn', summary: 'Information', detail: 'This function is not yet available, please send an email to info@bizmatch.net for changes to your customer data', life: 15000 });
    await this.userService.save(this.user);
  }


  onUploadCompanyLogo(event:any){
    const uniqueSuffix = '?_ts=' + new Date().getTime();
    this.companyLogoUrl = `${environment.apiBaseUrl}/logo/${this.user.id}${uniqueSuffix}` //`http://IhrServer:Port/${newImagePath}${uniqueSuffix}`;
  }
  onUploadProfilePicture(event:any){
    const uniqueSuffix = '?_ts=' + new Date().getTime();
    this.profileUrl = `${environment.apiBaseUrl}/profile/${this.user.id}${uniqueSuffix}` //`http://IhrServer:Port/${newImagePath}${uniqueSuffix}`;
  }
  setImageToFallback(event: Event) {
    (event.target as HTMLImageElement).src = `/assets/images/placeholder.png`; // Pfad zum Platzhalterbild
  }

  
  suggestions: string[] | undefined;

  async search(event: AutoCompleteCompleteEvent) {
      const result = await lastValueFrom(this.geoService.findCitiesStartingWith(event.query))
      this.suggestions = result.map(r=>`${r.city} - ${r.state_code}`).slice(0,5);
  }
  addLicence(){
    this.user.licensedIn.push({name:'',value:''});
  }
  removeLicence(){
    this.user.licensedIn.splice(this.user.licensedIn.length-2,1);
  }

  select(event:any,type:'company'|'profile'){
    this.imageUrl = URL.createObjectURL(event.files[0]);
    this.type=type
    this.config={aspectRatio: type==='company'?this.stateOptions[0].value:this.stateOptions[2].value}
  }
  sendImage(){
    this.imageUrl=null
    this.loadingService.startLoading('uploadImage');
    this.angularCropper.cropper.getCroppedCanvas().toBlob(async(blob) => {
      if (this.type==='company'){
        this.imageUploadService.uploadCompanyLogo(blob,this.user.id).subscribe(async(event) => {
          if (event.type === HttpEventType.UploadProgress) {
            // Berechne und zeige den Fortschritt basierend auf event.loaded und event.total
            const progress = event.total ? event.loaded / event.total : 0;
            console.log(`Upload-Fortschritt: ${progress * 100}%`);
            // Hier könntest du beispielsweise eine Fortschrittsanzeige aktualisieren
          } else if (event.type === HttpEventType.Response) {
            console.log('Upload abgeschlossen', event.body);
            this.companyUpload.clear();
            this.loadingService.stopLoading('uploadImage');
            this.companyLogoUrl=`${environment.apiBaseUrl}/logo/${this.user.id}.avif?_ts=${new Date().getTime()}`
          }
        }, error => console.error('Fehler beim Upload:', error));  
      } else {
        this.imageUploadService.uploadProfileImage(blob,this.user.id).subscribe(async(event) => {
          if (event.type === HttpEventType.UploadProgress) {
            // Berechne und zeige den Fortschritt basierend auf event.loaded und event.total
            const progress = event.total ? event.loaded / event.total : 0;
            console.log(`Upload-Fortschritt: ${progress * 100}%`);
            // Hier könntest du beispielsweise eine Fortschrittsanzeige aktualisieren
          } else if (event.type === HttpEventType.Response) {
            console.log('Upload abgeschlossen', event.body);
            this.profileUpload.clear();
            this.loadingService.stopLoading('uploadImage');
            this.profileUrl=`${environment.apiBaseUrl}/profile/${this.user.id}.avif?_ts=${new Date().getTime()}`
          }
        }, error => console.error('Fehler beim Upload:', error));          
      }
    
      
      // this.fileUpload.upload();
    }, 'image/png');
  }  
  cancelUpload(){
    this.imageUrl=null
    if (this.type==='company'){
      this.companyUpload.clear();
    } else {
      this.profileUpload.clear();
    }
  }
  changeAspectRation(ratio:number){
    this.config={aspectRatio: ratio}
    this.angularCropper.cropper.setAspectRatio(ratio);
  }
}