import { Component } 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 data from '../../../../assets/data/user.json';
import dataListings from '../../../../assets/data/listings.json';
import { ActivatedRoute, NavigationEnd, Router } 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 { createGenericObject } from '../../../utils/utils';
import { ListingsService } from '../../../services/listings.service';
import { lastValueFrom } from 'rxjs';

import { ArrayToStringPipe } from '../../../pipes/array-to-string.pipe';
import { UserService } from '../../../services/user.service';
import { SharedModule } from '../../../shared/shared/shared.module';
import { MessageService } from 'primeng/api';
import { AutoCompleteCompleteEvent, BusinessListing, CommercialPropertyListing, ImageProperty, ListingType, User } from '../../../../../../common-models/src/main.model';
import { GeoResult, GeoService } from '../../../services/geo.service';
import { InputNumberComponent, InputNumberModule } from '../../../components/inputnumber/inputnumber.component';
import { environment } from '../../../../environments/environment';
import { FileUploadModule } from 'primeng/fileupload';
import { CarouselModule } from 'primeng/carousel';
import { v4 as uuidv4 } from 'uuid';

@Component({
  selector: 'create-listing',
  standalone: true,
  imports: [SharedModule,ArrayToStringPipe, InputNumberModule,FileUploadModule,CarouselModule],
  providers:[MessageService],
  templateUrl: './edit-listing.component.html',
  styleUrl: './edit-listing.component.scss'
})
export class EditListingComponent {
  listingCategory:'Business'|'Commercial Property';
  category:string;
  location:string;
  mode:'edit'|'create';
  separator:'\n\n'
  listing:ListingType 
  private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
  user:User;
  maxFileSize=1000000;
  uploadUrl:string;
  environment=environment;
  propertyImages:ImageProperty[]
  responsiveOptions = [
    {
        breakpoint: '1199px',
        numVisible: 1,
        numScroll: 1
    },
    {
        breakpoint: '991px',
        numVisible: 2,
        numScroll: 1
    },
    {
        breakpoint: '767px',
        numVisible: 1,
        numScroll: 1
    }
];
  constructor(public selectOptions:SelectOptionsService,
              private router: Router,
              private activatedRoute: ActivatedRoute,
              private listingsService:ListingsService,
              public userService: UserService,
              private messageService: MessageService,
              private geoService:GeoService){
    this.user=this.userService.getUser();
    // Abonniere Router-Events, um den aktiven Link zu ermitteln
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        this.mode = event.url==='/createListing'?'create':'edit';
      }
    });

  }
  async ngOnInit(){
    if (this.mode==='edit'){
      this.listing=await lastValueFrom(this.listingsService.getListingById(this.id));   
    } else {
      const uuid = sessionStorage.getItem('uuid')?sessionStorage.getItem('uuid'):uuidv4();
      sessionStorage.setItem('uuid',uuid);
      this.listing=createGenericObject<BusinessListing>();
      this.listing.id=uuid
      this.listing.temporary=true;
      this.listing.userId=this.user.id
      this.listing.listingsCategory='business';
    }    
    this.uploadUrl = `${environment.apiBaseUrl}/bizmatch/${this.listing.listingsCategory}/uploadPropertyPicture/${this.listing.id}`;
    this.propertyImages=await this.listingsService.getPropertyImages(this.listing.id)
  }
  async save(){
    sessionStorage.removeItem('uuid')
    await this.listingsService.save(this.listing,this.listing.listingsCategory);
    this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Listing changes have been persisted', life: 3000 });
  }

  suggestions: string[] | undefined;

  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);
  }

  setImageToFallback(event: Event) {
    (event.target as HTMLImageElement).src = `/assets/images/placeholder.png`; // Pfad zum Platzhalterbild
  }
  async onUploadPropertyPicture(event:any){
    // (<CommercialPropertyListing>this.listing).images=[];
    // (<CommercialPropertyListing>this.listing).images.push(this.listing.id);
    // await this.listingsService.save(this.listing)
    this.propertyImages=await this.listingsService.getPropertyImages(this.listing.id)
  }
}