import { ChangeDetectorRef, Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
import { NgSelectModule } from '@ng-select/ng-select';
import { KeycloakService } from 'keycloak-angular';
import { NgxCurrencyDirective } from 'ngx-currency';
import { ImageCropperComponent } from 'ngx-image-cropper';
import { QuillModule } from 'ngx-quill';
import { lastValueFrom } from 'rxjs';
import { User } from '../../../../../../bizmatch-server/src/models/db.model';
import { AutoCompleteCompleteEvent, Invoice, Subscription, UploadParams, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { ConfirmationComponent } from '../../../components/confirmation/confirmation.component';
import { ConfirmationService } from '../../../components/confirmation/confirmation.service';
import { ImageCropAndUploadComponent, UploadReponse } from '../../../components/image-crop-and-upload/image-crop-and-upload.component';
import { MessageComponent } from '../../../components/message/message.component';
import { MessageService } from '../../../components/message/message.service';
import { GeoService } from '../../../services/geo.service';
import { ImageService } from '../../../services/image.service';
import { LoadingService } from '../../../services/loading.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { SharedService } from '../../../services/shared.service';
import { SubscriptionsService } from '../../../services/subscriptions.service';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { createDefaultUser, map2User } from '../../../utils/utils';
import { TOOLBAR_OPTIONS } from '../../utils/defaults';
@Component({
  selector: 'app-account',
  standalone: true,
  imports: [SharedModule, QuillModule, NgxCurrencyDirective, NgSelectModule, ImageCropperComponent, ConfirmationComponent, ImageCropAndUploadComponent, MessageComponent],
  providers: [],
  templateUrl: './account.component.html',
  styleUrl: './account.component.scss',
})
export class AccountComponent {
  private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
  user: User;
  subscriptions: Array<Subscription>;
  userSubscriptions: Array<Subscription> = [];
  companyLogoUrl: string;
  profileUrl: string;
  type: 'company' | 'profile';
  environment = environment;
  editorModules = TOOLBAR_OPTIONS;
  env = environment;
  faTrash = faTrash;
  customerTypes = ['buyer', 'professional'];
  customerSubTypes = ['broker', 'cpa', 'attorney', 'titleCompany', 'surveyor', 'appraiser'];
  quillModules = {
    toolbar: [['bold', 'italic', 'underline', 'strike'], [{ list: 'ordered' }, { list: 'bullet' }], [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }, { background: [] }], ['clean']],
  };
  uploadParams: UploadParams;
  constructor(
    public userService: UserService,
    private subscriptionService: SubscriptionsService,
    private geoService: GeoService,
    public selectOptions: SelectOptionsService,
    private cdref: ChangeDetectorRef,
    private activatedRoute: ActivatedRoute,
    private loadingService: LoadingService,
    private imageUploadService: ImageService,
    private imageService: ImageService,
    private keycloakService: KeycloakService,
    private confirmationService: ConfirmationService,
    private messageService: MessageService,
    private sharedService: SharedService,
  ) {}
  async ngOnInit() {
    if (this.id) {
      this.user = await this.userService.getById(this.id);
    } else {
      const token = await this.keycloakService.getToken();
      const keycloakUser = map2User(token);
      const email = keycloakUser.email;
      try {
        this.user = await this.userService.getByMail(email);
      } catch (e) {
        this.user = {
          email,
          firstname: keycloakUser.firstName,
          lastname: keycloakUser.lastName,
          areasServed: [],
          licensedIn: [],
          companyOverview: '',
          offeredServices: '',
          customerType: 'professional',
          customerSubType: 'broker',
        };
        this.user = await this.userService.save(this.user);
      }
    }

    this.userSubscriptions = await lastValueFrom(this.subscriptionService.getAllSubscriptions(this.user.id));
    this.profileUrl = this.user.hasProfile ? `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
    this.companyLogoUrl = this.user.hasCompanyLogo ? `${this.env.imageBaseUrl}/pictures/logo/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}` : `/assets/images/placeholder.png`;
  }
  printInvoice(invoice: Invoice) {}

  async updateProfile(user: User) {
    if (this.user.customerType === 'buyer') {
      const id = this.user.id;
      this.user = createDefaultUser(this.user.email, this.user.firstname, this.user.lastname);
      this.user.customerType = 'buyer';
      this.user.id = id;
      this.imageService.deleteLogoImagesByMail(this.user.email);
      this.imageService.deleteProfileImagesByMail(this.user.email);
    }
    await this.userService.save(this.user);
    this.messageService.addMessage({ severity: 'success', text: 'Account changes have been persisted', duration: 3000 });
  }

  onUploadCompanyLogo(event: any) {
    const uniqueSuffix = '?_ts=' + new Date().getTime();
    this.companyLogoUrl = `${this.env.imageBaseUrl}/pictures/logo/${emailToDirName(this.user.email)}${uniqueSuffix}`;
  }
  onUploadProfilePicture(event: any) {
    const uniqueSuffix = '?_ts=' + new Date().getTime();
    this.profileUrl = `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}${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({ registerNo: '', state: '' });
  }
  removeLicence() {
    this.user.licensedIn.splice(this.user.licensedIn.length - 1, 1);
  }
  addArea() {
    this.user.areasServed.push({ county: '', state: '' });
  }
  removeArea() {
    this.user.areasServed.splice(this.user.areasServed.length - 1, 1);
  }
  get isProfessional() {
    return this.user.customerType === 'professional';
  }
  uploadCompanyLogo() {
    this.uploadParams = { type: 'uploadCompanyLogo', imagePath: emailToDirName(this.user.email) };
  }
  uploadProfile() {
    this.uploadParams = { type: 'uploadProfile', imagePath: emailToDirName(this.user.email) };
  }
  async uploadFinished(response: UploadReponse) {
    if (response.success) {
      if (response.type === 'uploadCompanyLogo') {
        this.user.hasCompanyLogo = true; //
        this.companyLogoUrl = `${this.env.imageBaseUrl}/pictures/logo/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}`;
      } else {
        this.user.hasProfile = true;
        this.profileUrl = `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}`;
        this.sharedService.changeProfilePhoto(this.profileUrl);
      }
      await this.userService.save(this.user);
    }
  }
  async deleteConfirm(type: 'profile' | 'logo') {
    const confirmed = await this.confirmationService.showConfirmation(`Do you want to delete your ${type === 'logo' ? 'Logo' : 'Profile'} image`);
    if (confirmed) {
      if (type === 'profile') {
        this.user.hasProfile = false;
        await Promise.all([this.imageService.deleteProfileImagesByMail(this.user.email), this.userService.save(this.user)]);
      } else {
        this.user.hasCompanyLogo = false;
        await Promise.all([this.imageService.deleteLogoImagesByMail(this.user.email), this.userService.save(this.user)]);
      }
      this.user = await this.userService.getById(this.user.id);
      // this.messageService.showMessage('Image deleted');
      this.messageService.addMessage({
        severity: 'success',
        text: 'Image deleted.',
        duration: 3000, // 3 seconds
      });
    }
  }
  // select(event: any, type: 'company' | 'profile') {
  //   const imageUrl = URL.createObjectURL(event.files[0]);
  //   this.type = type;
  //   const config = { aspectRatio: type === 'company' ? stateOptions[0].value : stateOptions[2].value };
  //   getImageDimensions(imageUrl).then(dimensions => {
  //     const dialogWidth = getDialogWidth(dimensions);

  //     this.dialogRef = this.dialogService.open(ImageCropperComponent, {
  //       data: {
  //         imageUrl: imageUrl,
  //         fileUpload: type === 'company' ? this.companyUpload : this.profileUpload,
  //         config: config,
  //         ratioVariable: type === 'company' ? true : false,
  //       },
  //       header: 'Edit Image',
  //       width: dialogWidth,
  //       modal: true,
  //       closeOnEscape: true,
  //       keepInViewport: true,
  //       closable: false,
  //     });
  //     this.dialogRef.onClose.subscribe(cropper => {
  //       if (cropper) {
  //         this.loadingService.startLoading('uploadImage');
  //         cropper.getCroppedCanvas().toBlob(async blob => {
  //           this.imageUploadService.uploadImage(blob, type === 'company' ? 'uploadCompanyLogo' : 'uploadProfile', emailToDirName(this.user.email)).subscribe(
  //             async event => {
  //               if (event.type === HttpEventType.Response) {
  //                 this.loadingService.stopLoading('uploadImage');
  //                 if (this.type === 'company') {
  //                   this.user.hasCompanyLogo = true; //
  //                   this.companyLogoUrl = `${this.env.imageBaseUrl}/pictures/logo/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}`;
  //                 } else {
  //                   this.user.hasProfile = true;
  //                   this.profileUrl = `${this.env.imageBaseUrl}/pictures/profile/${emailToDirName(this.user.email)}.avif?_ts=${new Date().getTime()}`;
  //                 }
  //                 await this.userService.save(this.user);
  //               }
  //             },
  //             error => console.error('Fehler beim Upload:', error),
  //           );
  //         });
  //       }
  //     });
  //   });
  // }

  // this.confirmationService.showConfirmation({
  //   target: event.target as EventTarget,
  //   message: `Do you want to delete your ${type === 'logo' ? 'Logo' : 'Profile'} image`,
  //   header: 'Delete Confirmation',
  //   icon: 'pi pi-info-circle',
  //   acceptButtonStyleClass: 'p-button-danger p-button-text',
  //   rejectButtonStyleClass: 'p-button-text p-button-text',
  //   acceptIcon: 'none',
  //   rejectIcon: 'none',

  //   accept: async () => {
  //     if (type === 'profile') {
  //       this.user.hasProfile = false;
  //       await Promise.all([this.imageService.deleteProfileImagesById(this.user.email), this.userService.save(this.user)]);
  //     } else {
  //       this.user.hasCompanyLogo = false;
  //       await Promise.all([this.imageService.deleteLogoImagesById(this.user.email), this.userService.save(this.user)]);
  //     }
  //     this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Image deleted' });
  //     this.user = await this.userService.getById(this.user.id);
  //   },
  //   reject: () => {
  //     console.log('deny');
  //   },
  // });
}