import {Component, Input, OnDestroy, OnInit} from '@angular/core';
import {Region} from '../../interfaces/region.interface';
import {BookmarkService} from '../../services/bookmark.service';
import {Subject} from 'rxjs';
import {takeUntil} from 'rxjs/operators';

@Component({
  selector: 'app-bookmark-button',
  templateUrl: './bookmark-button.component.html',
  styleUrls: ['./bookmark-button.component.scss']
})
export class BookmarkButtonComponent implements OnInit, OnDestroy {

  @Input()
  region: Region;

  isBookmarked = false;

  private destroyed$ = new Subject<void>();

  constructor(private bs: BookmarkService) {
  }

  ngOnInit() {
    this.bs.isMarked(this.region.region_id).pipe(
      takeUntil(this.destroyed$)
    ).subscribe(val => this.isBookmarked = val);
  }

  onToggle(event: Event) {
    event.stopPropagation();
    this.bs.toggleRegion(this.region.region_id);
  }

  ngOnDestroy(): void {
    this.destroyed$.next();
    this.destroyed$.complete();
  }

}