import { Component, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { SimpleRole } from '@core/typings/roles.typing';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { Subscription } from 'rxjs';
import { RolesService } from '../roles.service';

@Component({
  selector: 'gc-roles-page-wrapper',
  templateUrl: 'roles-page-wrapper.component.html',
  styleUrls: ['./roles-page-wrapper.component.scss']
})

export class RolesPageWrapperComponent implements OnDestroy {
  roles: SimpleRole[] = [];
  sub = new Subscription();

  constructor (
    private roleService: RolesService,
    private router: Router,
    private analyticsService: AnalyticsService
  ) {
    this.sub.add(
      this.roleService.changesTo$('roles').subscribe(() => {
        this.roles = this.roleService.get('roles').map((role) => {
          return {
            name: role.roleName,
            description: role.roleDescription,
            id: role.id
          };
        });
      })
    );
  }

  onAddRole () {
    this.analyticsService.emitEvent({
      eventName: 'Add role',
      eventType: EventType.Click,
      extras: null
    });
    this.router.navigateByUrl('/management/configure/roles/new');
  }

  onEditRole (roleId: number) {
    this.analyticsService.emitEvent({
      eventName: 'Edit role',
      eventType: EventType.Click,
      extras: null
    });
    this.router.navigateByUrl(
      `/management/configure/roles/${roleId}`
    );
  }

  ngOnDestroy () {
    this.sub.unsubscribe();
  }
}