import { Component, ViewChild } from '@angular/core';
import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
import { lastValueFrom } from 'rxjs';
import { ListingsService } from '../../../services/listings.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { createDefaultCommercialPropertyListing, getDialogWidth, getImageDimensions, map2User, routeListingWithState } from '../../../utils/utils';

import { DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
import { HttpEventType } from '@angular/common/http';
import { faTrash } from '@fortawesome/free-solid-svg-icons';
import { AngularCropperjsModule } from 'angular-cropperjs';
import { MixedCdkDragDropModule } from 'angular-mixed-cdk-drag-drop';
import { KeycloakService } from 'keycloak-angular';
import { ConfirmationService, MessageService } from 'primeng/api';
import { CarouselModule } from 'primeng/carousel';
import { ConfirmDialogModule } from 'primeng/confirmdialog';
import { DialogModule } from 'primeng/dialog';
import { DialogService, DynamicDialogModule, DynamicDialogRef } from 'primeng/dynamicdialog';
import { EditorModule } from 'primeng/editor';
import { FileUpload, FileUploadModule } from 'primeng/fileupload';
import { BusinessListing, CommercialPropertyListing, User } from '../../../../../../bizmatch-server/src/models/db.model';
import { AutoCompleteCompleteEvent, ImageProperty, emailToDirName } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { ImageCropperComponent } from '../../../components/image-cropper/image-cropper.component';
import { InputNumberModule } from '../../../components/inputnumber/inputnumber.component';
import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
import { GeoService } from '../../../services/geo.service';
import { ImageService } from '../../../services/image.service';
import { LoadingService } from '../../../services/loading.service';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { TOOLBAR_OPTIONS } from '../../utils/defaults';
@Component({
  selector: 'commercial-property-listing',
  standalone: true,
  imports: [
    SharedModule,
    ArrayToStringPipe,
    InputNumberModule,
    CarouselModule,
    DialogModule,
    AngularCropperjsModule,
    FileUploadModule,
    EditorModule,
    DynamicDialogModule,
    DragDropModule,
    ConfirmDialogModule,
    MixedCdkDragDropModule,
  ],
  providers: [MessageService, DialogService, ConfirmationService],
  templateUrl: './edit-commercial-property-listing.component.html',
  styleUrl: './edit-commercial-property-listing.component.scss',
})
export class EditCommercialPropertyListingComponent {
  @ViewChild(FileUpload) public fileUpload: FileUpload;
  listingsCategory = 'commercialProperty';
  category: string;
  location: string;
  mode: 'edit' | 'create';
  separator: '\n\n';
  listing: CommercialPropertyListing;
  private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
  user: User;
  maxFileSize = 3000000;
  environment = environment;
  responsiveOptions = [
    {
      breakpoint: '1199px',
      numVisible: 1,
      numScroll: 1,
    },
    {
      breakpoint: '991px',
      numVisible: 2,
      numScroll: 1,
    },
    {
      breakpoint: '767px',
      numVisible: 1,
      numScroll: 1,
    },
  ];
  config = { aspectRatio: 16 / 9 };
  editorModules = TOOLBAR_OPTIONS;
  dialogRef: DynamicDialogRef | undefined;
  draggedImage: ImageProperty;
  faTrash = faTrash;
  suggestions: string[] | undefined;
  data: BusinessListing;
  userId: string;
  typesOfCommercialProperty = [];
  env = environment;
  ts = new Date().getTime();
  constructor(
    public selectOptions: SelectOptionsService,
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private listingsService: ListingsService,
    public userService: UserService,
    private messageService: MessageService,
    private geoService: GeoService,
    private imageService: ImageService,
    private loadingService: LoadingService,
    public dialogService: DialogService,
    private confirmationService: ConfirmationService,
    private route: ActivatedRoute,
    private keycloakService: KeycloakService,
  ) {
    // Abonniere Router-Events, um den aktiven Link zu ermitteln
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.mode = event.url === '/createCommercialPropertyListing' ? 'create' : 'edit';
      }
    });
    this.route.data.subscribe(async () => {
      if (this.router.getCurrentNavigation().extras.state) {
        this.data = this.router.getCurrentNavigation().extras.state['data'];
      }
    });
    this.typesOfCommercialProperty = selectOptions.typesOfCommercialProperty.map(e => {
      return { name: e.name, value: parseInt(e.value) };
    });
  }
  async ngOnInit() {
    const token = await this.keycloakService.getToken();
    const keycloakUser = map2User(token);
    if (this.mode === 'edit') {
      this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'));
    } else {
      this.listing = createDefaultCommercialPropertyListing();
      const listingUser = await this.userService.getByMail(keycloakUser.email);
      this.listing.userId = listingUser.id;
      this.listing.imagePath = `${emailToDirName(keycloakUser.email)}`;
      if (this.data) {
        this.listing.title = this.data?.title;
        this.listing.description = this.data?.description;
      }
    }
  }

  async save() {
    this.listing = await this.listingsService.save(this.listing, this.listing.listingsCategory);
    this.router.navigate(['editCommercialPropertyListing', this.listing.id]);
    this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing changes have been persisted', life: 3000 });
  }

  async search(event: AutoCompleteCompleteEvent) {
    const result = await lastValueFrom(this.geoService.findCitiesStartingWith(event.query, this.listing.state));
    this.suggestions = result.map(r => r.city).slice(0, 5);
  }

  select(event: any) {
    const imageUrl = URL.createObjectURL(event.files[0]);
    getImageDimensions(imageUrl).then(dimensions => {
      const dialogWidth = getDialogWidth(dimensions);
      this.dialogRef = this.dialogService.open(ImageCropperComponent, {
        data: {
          imageUrl: imageUrl,
          fileUpload: this.fileUpload,
          ratioVariable: false,
        },
        header: 'Edit Image',
        width: dialogWidth,
        modal: true,
        closeOnEscape: true,
        keepInViewport: true,
        closable: false,
        breakpoints: {
          '960px': '75vw',
          '640px': '90vw',
        },
      });
      this.dialogRef.onClose.subscribe(cropper => {
        if (cropper) {
          this.loadingService.startLoading('uploadImage');
          cropper.getCroppedCanvas().toBlob(async blob => {
            this.imageService.uploadImage(blob, 'uploadPropertyPicture', this.listing.imagePath, this.listing.serialId).subscribe(
              async event => {
                if (event.type === HttpEventType.Response) {
                  this.ts = new Date().getTime();
                  console.log('Upload abgeschlossen', event.body);
                  this.loadingService.stopLoading('uploadImage');
                  this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, 'commercialProperty'));
                }
              },
              error => console.error('Fehler beim Upload:', error),
            );
          }, 'image/jpg');
          cropper.destroy();
        }
      });
    });
  }

  deleteConfirm(imageName: string) {
    this.confirmationService.confirm({
      target: event.target as EventTarget,
      message: `Do you want to delete this image ${imageName}?`,
      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 () => {
        this.listing.imageOrder = this.listing.imageOrder.filter(item => item !== imageName);
        await Promise.all([this.imageService.deleteListingImage(this.listing.imagePath, this.listing.serialId, imageName), this.listingsService.save(this.listing, 'commercialProperty')]);
        this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Image deleted' });
      },
      reject: () => {
        // this.messageService.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected' });
        console.log('deny');
      },
    });
  }

  onDrop(event: { previousIndex: number; currentIndex: number }) {
    moveItemInArray(this.listing.imageOrder, event.previousIndex, event.currentIndex);
  }
  changeListingCategory(value: 'business' | 'commercialProperty') {
    routeListingWithState(this.router, value, this.listing);
  }
}