import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
import {Region} from '../../interfaces/region.interface';
import {ActivatedRoute, ParamMap} from '@angular/router';
import {DataService} from '../../services/data.service';
import {switchMap} from 'rxjs/operators';
import {SearchParameter} from '../../interfaces/search-request.interface';
import {Place} from '../../interfaces/places.interface';


@Component({
  selector: 'app-region-details',
  templateUrl: './region-details.component.html',
  styleUrls: ['./region-details.component.scss']
})
export class RegionDetailsComponent implements AfterViewInit {

  @ViewChild('container', {static: false})
  container: ElementRef;

  /** Cut descriptions after x chars */
  readonly DESC_CUT_POINT = 300;
  /** Region property to show in view */
  readonly SHOWN_PROPS: SearchParameter[] = [
    SearchParameter.AVERAGE_PER_DAY_COSTS,
    SearchParameter.ACCOMMODATION_COSTS,
    SearchParameter.FOOD_COSTS,
    SearchParameter.WATER_COSTS,
    SearchParameter.ALCOHOL_COSTS,
    SearchParameter.LOCAL_TRANSPORTATION_COSTS,
    SearchParameter.ENTERTAINMENT_COSTS,
  ];

  /** Current region */
  region: Region;
  /** URI encoded region name */
  uriRegionName: string;
  /** Extend the description text */
  isDescExtended = false;

  places: Place[] = [];

  constructor(private route: ActivatedRoute, private ds: DataService) {
  }

  ngAfterViewInit(): void {
    this.route.paramMap.pipe(
      switchMap((params: ParamMap) => this.ds.getRegion(parseInt(params.get('id'), 10)))
    ).subscribe((region: Region) => {
      this.region = region;
      this.uriRegionName = encodeURI(this.region.name.toLowerCase());
      this.ds.getPlacesByRegion(this.region.region_id).then(places => this.places = places);
      setTimeout(() => {
        if (this.container) {
          this.container.nativeElement.scrollIntoView();
        }
      }, 10);
    });
  }

}