import {Component, EventEmitter, Input, Output} from '@angular/core';
import {Activity} from '../../../link/models/_content/activity/activity.model';
import {ActivitiesHttpService} from '../../../link/services/http_/content-http/activities/activities-http.service';
import {UserService} from '../../../link/services/user/user.service';
import {DisplayUtilsService} from '../../services/display-utils/display-utils.service';
import {AnalyticsService} from '../../services/analytics/analytics.service';

@Component({
  selector: 'app-favorite',
  templateUrl: './favorite.component.html',
  styleUrls: ['./favorite.component.scss']
})
/**
 * Favorite component that shows a heart
 * Full when marked as favorite, empty otherwise
 */
export class FavoriteComponent {

  status: 'empty' | 'full' = 'empty';

  @Input() data: {
    countryId: number,
    classId: number,
    disciplineId: number,
    chapterId: number,
    notionId: number,
  };
  @Input() activity: Activity;
  // Send true if favorite is NOW marked as favorite, false if favorite is not.
  @Output() onToggle:EventEmitter<boolean> = new EventEmitter<boolean>();

  constructor(
    public activitiesHttp: ActivitiesHttpService,
    public userService: UserService,
    public displayUtils: DisplayUtilsService,
    public analytics:AnalyticsService,
  ) {
  }

  /**
   * If the user is logged, toggle/untoggle the activity as a favorite
   * Else, displays the register popup
   */
  toggleFav() {
    if(!this.userService.user.logged){
      this.analytics.send('/register/before/favorites');
      this.displayUtils.showPopupRegister();
      return;
    }

    this.activitiesHttp.markAsFavorite(
      this.data.countryId,
      this.data.classId,
      this.data.disciplineId,
      this.data.chapterId,
      this.data.notionId,
      this.activity.id,
      !this.activity.favorite,
    )
      .subscribe(data => {
        this.activity.favorite = data.favorite;
        this.activity.status = data.status;
        this.onToggle.emit(data.favorite);
      }, () => {

      });
  }

}