import { ChangeDetectorRef, 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 { DropdownModule } from 'primeng/dropdown';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { ToggleButtonModule } from 'primeng/togglebutton';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { Observable, lastValueFrom } from 'rxjs';
import { PaginatorModule } from 'primeng/paginator';
import onChange from 'on-change';
import { InitEditableRow } from 'primeng/table';
import { SelectOptionsService } from '../../../services/select-options.service';
import { ListingsService } from '../../../services/listings.service';
import { UserService } from '../../../services/user.service';
import { ImageService } from '../../../services/image.service';
import { createGenericObject, getCriteriaStateObject, getListingType, getSessionStorageHandler } from '../../../utils/utils';
import { ListingCriteria, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { BusinessListing, User } from '../../../../../../bizmatch-server/src/models/db.model';


@Component({
  selector: 'app-broker-listings',
  standalone: true,
  imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, StyleClassModule, ToggleButtonModule, RouterModule, PaginatorModule],
  templateUrl: './broker-listings.component.html',
  styleUrl: './broker-listings.component.scss'
})
export class BrokerListingsComponent {
  environment=environment;
  listings: Array<BusinessListing>;
  users: Array<User>
  filteredListings: Array<ListingType>;
  criteria:ListingCriteria;
  realEstateChecked: boolean;
  // category: string;
  maxPrice: string;
  minPrice: string;
  type:string;
  states = [];
  statesSet = new Set();
  state:string;
  first: number = 0;
  rows: number = 12;
  totalRecords:number = 0;
  ts = new Date().getTime()
  public category: 'business' | 'commercialProperty' | 'professionals_brokers' | undefined;

  constructor(public selectOptions: SelectOptionsService, 
              private listingsService:ListingsService,
              private userService:UserService,
              private activatedRoute: ActivatedRoute, 
              private router:Router, 
              private cdRef:ChangeDetectorRef,
              private imageService:ImageService) { 
    this.criteria = onChange(getCriteriaStateObject(),getSessionStorageHandler);
    this.router.getCurrentNavigation()
    this.activatedRoute.snapshot
    this.activatedRoute.params.subscribe(params => {
      if (this.activatedRoute.snapshot.fragment===''){
        this.criteria = onChange(createGenericObject<ListingCriteria>(),getSessionStorageHandler)
        this.first=0;
      }
      this.init()
    })
   
  }
  async ngOnInit(){
  }
  async init(){
    
      this.listings=[]
      this.filteredListings=[];
      this.users=await this.userService.search(this.criteria);
      const profiles = await this.imageService.getProfileImagesForUsers(this.users.map(u=>u.id));
      const logos = await this.imageService.getCompanyLogosForUsers(this.users.map(u=>u.id));
      this.users.forEach(u=>{
        u.hasProfile=profiles[u.id]
        u.hasCompanyLogo=logos[u.id]
      })
      this.cdRef.markForCheck();
      this.cdRef.detectChanges();    

  }
  setStates(){
    this.statesSet=new Set();
    this.listings.forEach(l=>{
      if (l.state){
        this.statesSet.add(l.state)
      }
    })
    this.states = [...this.statesSet].map((ls) =>({name:this.selectOptions.getState(ls as string),value:ls}))
  }
  async search() { 
    this.listings= await this.listingsService.getListings(this.criteria,'professionals_brokers');
    this.setStates();
    this.totalRecords=this.listings.length
    this.filteredListings =[...this.listings].splice(this.first,this.rows);
    this.cdRef.markForCheck();
    this.cdRef.detectChanges();
  }
  onPageChange(event: any) {

    this.criteria.start=event.first;
    this.criteria.length=event.rows;
    this.criteria.page=event.page;
    this.criteria.pageCount=event.pageCount;
  }
  imageErrorHandler(listing: ListingType) {
    // listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann
  }
}