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/listings.json';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import { InputTextareaModule } from 'primeng/inputtextarea';
import { ChipModule } from 'primeng/chip';
import { lastValueFrom } from 'rxjs';
import { ListingsService } from '../../../services/listings.service';
import { UserService } from '../../../services/user.service';
import onChange from 'on-change';
import { createGenericObject, getCriteriaStateObject, getSessionStorageHandler } from '../../../utils/utils';
import { ImageProperty, ListingCriteria, ListingType, MailInfo, User } from '../../../../../../common-models/src/main.model';
import { MailService } from '../../../services/mail.service';
import { MessageService } from 'primeng/api';
import { SharedModule } from '../../../shared/shared/shared.module';
import { GalleriaModule } from 'primeng/galleria';
import { environment } from '../../../../environments/environment';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Component({
  selector: 'app-details-listing',
  standalone: true,
  imports: [SharedModule, GalleriaModule],
  providers: [MessageService],
  templateUrl: './details-listing.component.html',
  styleUrl: './details-listing.component.scss'
})
export class DetailsListingComponent {
  // listings: Array<BusinessListing>;
  responsiveOptions = [
    {
      breakpoint: '1199px',
      numVisible: 1,
      numScroll: 1
    },
    {
      breakpoint: '991px',
      numVisible: 2,
      numScroll: 1
    },
    {
      breakpoint: '767px',
      numVisible: 1,
      numScroll: 1
    }
  ];
  private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
  private type: 'business'|'commercialProperty' | undefined = this.activatedRoute.snapshot.params['type'] as 'business'|'commercialProperty' | undefined;
  listing: ListingType;
  criteria: ListingCriteria
  mailinfo: MailInfo;
  propertyImages: ImageProperty[] = []
  environment = environment;
  user:User
  description:SafeHtml;
  constructor(private activatedRoute: ActivatedRoute,
    private listingsService: ListingsService,
    private router: Router,
    private userService: UserService,
    public selectOptions: SelectOptionsService,
    private mailService: MailService,
    private messageService: MessageService,
    private sanitizer: DomSanitizer) {
    this.userService.getUserObservable().subscribe(user => {
      this.user = user
    });
    this.criteria = onChange(getCriteriaStateObject(), getSessionStorageHandler);
    this.mailinfo = { sender: {}, userId: '' }
  }

  async ngOnInit() {
    this.listing = await lastValueFrom(this.listingsService.getListingById(this.id, this.type));
    this.propertyImages = await this.listingsService.getPropertyImages(this.listing.id)
    this.description=this.sanitizer.bypassSecurityTrustHtml(this.listing.description);
  }
  back() {
    this.router.navigate(['listings', this.criteria.listingsCategory])
  }
  isAdmin() {
    return this.userService.hasAdminRole();
  }
  async mail() {
    this.mailinfo.userId = this.listing.userId;
    await this.mailService.mail(this.mailinfo);
    this.messageService.add({ severity: 'info', summary: 'Confirmed', detail: 'Your message has been sent to the creator of the listing', life: 3000 });
  }
}