import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { SpinnerService } from '@core/services/spinner.service';
import { User } from '@core/typings/client-user.typing';
import { ClientUserService } from '@features/client-user/client-user.service';
import { UserService } from '@features/users/user.service';
import { ArrayHelpersService, DragAndDropChange, DragItem } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { I18nService } from '@yourcause/common/i18n';
import { RolesResources } from '../roles.resources';
import { RolesService } from '../roles.service';

@Component({
  selector: 'yc-manage-role-users-page',
  templateUrl: 'manage-role-users-page.component.html'
})
export class ManageRoleUsersPageComponent implements OnInit {
  roleId = +this.activatedRoute.snapshot.params.id;
  roleName = this.roleService.getRoleById(this.roleId).roleName;
  users: User[] = this.roleService.getUsersByRoleId(this.roleId);
  title = '';
  saving = false;
  availableUsers: DragItem<{ fullName: string; email: string; id: number }>[] = [];
  roleUsers: DragItem[] = [];

  constructor (
    private i18n: I18nService,
    private userService: UserService,
    private roleService: RolesService,
    private activatedRoute: ActivatedRoute,
    private spinnerService: SpinnerService,
    private clientUserService: ClientUserService,
    private rolesResources: RolesResources,
    private analyticsService: AnalyticsService,
    private arrayHelper: ArrayHelpersService
  ) { }

  async ngOnInit () {
    this.title = `${this.i18n.translate(
      'common:textManageUsers',
      {},
      'Manage Users'
    )}: ${this.roleName}`;
    const allUsers = this.userService.allUsers;
    const deactivatedUsers = allUsers.filter((user) => {
      return user.isDeactivated;
    }).map((user) => user.id);
    this.roleUsers = this.arrayHelper.sort(this.users.filter((user) => {
      return !deactivatedUsers.includes(user.id);
    }).map((user) => {
      return this.getUserObj(
        user.firstName + ' ' + user.lastName,
        user.email,
        user.id
      );
    }), 'display');
    const workflowUserIds = this.users.map((user) => user.id);
    this.availableUsers = this.arrayHelper.sort(allUsers.filter((user) => {
      return !user.isDeactivated && !workflowUserIds.includes(user.id);
    }).map((user) => {
      return this.getUserObj(user.fullName, user.email, user.id);
    }), 'display');
    this.spinnerService.stopSpinner();
  }

  getUserObj (fullName: string, email: string, id: number) {
    return {
      display: `
        <span class="mr-3">
          ${fullName}
        </span>
        <span>
          ${email}
        </span>
      `,
      context: {
        fullName,
        email,
        id
      }
    };
  }

  async usersChanged (
    change: DragAndDropChange<{
      fullName: string;
      email: string;
      id: number;
    }>
  ) {
    const nonAttachedUsersBeforeChange = this.availableUsers;
    const attachedUsersBeforeChange = this.roleUsers;
    const nonAttachedUsersAfterChange = change.left;
    const attachedUsersAfterChange = change.right;

    this.saving = true;
    this.spinnerService.startSpinner();
    if (
      attachedUsersAfterChange.length > attachedUsersBeforeChange.length
    ) {
      const user = attachedUsersAfterChange
      .find(newUser => !attachedUsersBeforeChange
        .find(oldUser => oldUser.context.id === newUser.context.id)
      );

      await this.rolesResources.attachUserToRole(this.roleId, user.context.id);
      this.resetUserMap();
    } else if (
      nonAttachedUsersAfterChange.length > nonAttachedUsersBeforeChange.length
    ) {
      // attach the new user
      const user = nonAttachedUsersAfterChange
      .find(newUser => !nonAttachedUsersBeforeChange
        .find(oldUser => oldUser.context.id === newUser.context.id)
      );
      // detach the old user
      await this.rolesResources.detachUserFromRole(this.roleId, user.context.id);
      this.resetUserMap();
    }

    this.availableUsers = [...change.left];
    this.roleUsers = [...change.right];
    this.saving = false;
    this.clientUserService.getUser(true, true);
    this.spinnerService.stopSpinner();
    this.analyticsService.emitEvent({
      eventName: 'Update user roles',
      eventType: EventType.Click,
      extras: null
    });
  }

  resetUserMap () {
    this.roleService.resetUserMap(this.roleId);
  }

}