import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { SpinnerService } from '@core/services/spinner.service';
import { FooterState } from '@core/states/footer.state';
import { PermissionSet } from '@core/typings/permission.typing';
import { BaseRole, DetachedPermissionSet, RoleToSave } from '@core/typings/roles.typing';
import { TypeaheadSelectOption } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { RolesService } from '../roles.service';

@Component({
  selector: 'gc-role-detail-wrapper',
  templateUrl: './role-detail-wrapper.component.html',
  styleUrls: ['./role-detail-wrapper.component.scss']
})
export class RoleDetailWrapperComponent implements OnInit {
  roleId = this.activatedRoute.snapshot.params.id;
  role: BaseRole;
  permissionSets: DetachedPermissionSet[];
  permissionTypeOptions: TypeaheadSelectOption<PermissionSet>[];

  constructor (
    private activatedRoute: ActivatedRoute,
    private roleService: RolesService,
    private spinnerService: SpinnerService,
    private footerState: FooterState,
    private router: Router,
    private analyticsService: AnalyticsService
  ) { }

  ngOnInit () {
    this.role = !this.roleId ?
      this.roleService.getBlankRole() :
      this.roleService.getRoleById(+this.roleId);
    this.permissionSets = this.roleService.getDetachedPermissionSets();
    this.permissionTypeOptions = this.roleService.getPermissionSetOptions();
  }

  async saveRole (roleToSave: RoleToSave) {
    this.spinnerService.startSpinner();
    this.footerState.set('footerActionDisabled', true);
    await this.roleService.saveRole(roleToSave);
    this.footerState.set('footerActionDisabled', false);
    this.spinnerService.stopSpinner();
    this.analyticsService.emitEvent({
      eventName: 'Save role',
      eventType: EventType.Click,
      extras: null
    });
    this.router.navigateByUrl('/management/configure/roles');
  }
}