import { CommonModule } from '@angular/common';
import { ChangeDetectorRef, Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import onChange from 'on-change';
import { ButtonModule } from 'primeng/button';
import { CheckboxModule } from 'primeng/checkbox';
import { DropdownModule } from 'primeng/dropdown';
import { InputGroupModule } from 'primeng/inputgroup';
import { InputTextModule } from 'primeng/inputtext';
import { PaginatorModule } from 'primeng/paginator';
import { StyleClassModule } from 'primeng/styleclass';
import { ToggleButtonModule } from 'primeng/togglebutton';
import { TooltipModule } from 'primeng/tooltip';
import { BusinessListing } from '../../../../../../bizmatch-server/src/models/db.model';
import { ListingCriteria, ListingType } from '../../../../../../bizmatch-server/src/models/main.model';
import { environment } from '../../../../environments/environment';
import { ImageService } from '../../../services/image.service';
import { ListingsService } from '../../../services/listings.service';
import { SelectOptionsService } from '../../../services/select-options.service';
import { getCriteriaStateObject, getSessionStorageHandler, resetCriteria } from '../../../utils/utils';

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

  constructor(
    public selectOptions: SelectOptionsService,
    private listingsService: ListingsService,
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private cdRef: ChangeDetectorRef,
    private imageService: ImageService,
    private route: ActivatedRoute,
  ) {
    this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
    this.route.data.subscribe(async () => {
      if (this.router.getCurrentNavigation().extras.state) {
        resetCriteria(this.criteria);
      } else {
        this.first = this.criteria.page * this.criteria.length;
      }
      this.init();
    });
  }
  async ngOnInit() {}
  async init() {
    const statesResult = await this.listingsService.getAllStates('business');
    this.states = statesResult.map(ls => ({ name: this.selectOptions.getState(ls.state as string), value: ls.state, count: ls.count }));
    this.search();
  }
  refine() {
    this.criteria.start = 0;
    this.criteria.page = 0;
    this.search();
  }
  async search() {
    const listingReponse = await this.listingsService.getListings(this.criteria, 'business');
    this.listings = listingReponse.data;
    this.totalRecords = listingReponse.total;
    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;
    this.search();
  }
  imageErrorHandler(listing: ListingType) {
    // listing.hideImage = true; // Bild ausblenden, wenn es nicht geladen werden kann
  }
  reset() {
    this.criteria.title = null;
  }
}