import { CommonModule } from '@angular/common';
import { 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 { InputTextModule } from 'primeng/inputtext';
import { StyleClassModule } from 'primeng/styleclass';
import { Observable } from 'rxjs';
import { User } from '../../../../../bizmatch-server/src/models/db.model';
import { ListingCriteria } from '../../../../../bizmatch-server/src/models/main.model';
import { ListingsService } from '../../services/listings.service';
import { SelectOptionsService } from '../../services/select-options.service';
import { UserService } from '../../services/user.service';
import { getCriteriaStateObject, getSessionStorageHandler, resetCriteria } from '../../utils/utils';
@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule, StyleClassModule, ButtonModule, CheckboxModule, InputTextModule, DropdownModule, FormsModule, RouterModule],
  templateUrl: './home.component.html',
  styleUrl: './home.component.scss',
})
export class HomeComponent {
  activeTabAction: 'business' | 'commercialProperty' | 'broker' = 'business';
  type: string;
  maxPrice: string;
  minPrice: string;
  criteria: ListingCriteria;
  user$: Observable<User>;
  states = [];
  public constructor(private router: Router, private activatedRoute: ActivatedRoute, public selectOptions: SelectOptionsService, public userService: UserService, private listingsService: ListingsService) {
    this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
    resetCriteria(this.criteria);
  }
  async ngOnInit() {
    this.user$ = this.userService.getUserObservable();
    if (this.activeTabAction === 'business' || this.activeTabAction === 'commercialProperty') {
      const statesResult = await this.listingsService.getAllStates(this.activeTabAction);
      this.states = statesResult.map(s => s.state).map(ls => ({ name: this.selectOptions.getState(ls as string), value: ls }));
    } else {
      this.states = [];
    }
  }
  async changeTab(tabname: 'business' | 'commercialProperty' | 'broker') {
    this.activeTabAction = tabname;
    if (this.activeTabAction === 'business' || this.activeTabAction === 'commercialProperty') {
      const statesResult = await this.listingsService.getAllStates(this.activeTabAction);
      this.states = statesResult.map(s => s.state).map(ls => ({ name: this.selectOptions.getState(ls as string), value: ls }));
    } else {
      this.states = this.selectOptions.states;
    }
  }
  search() {
    const data = { keep: true };
    this.router.navigate([`${this.activeTabAction}Listings`]);
  }

  login() {
    this.userService.login(window.location.href);
  }
}