import { Component, Input, OnInit } from '@angular/core';
import { PolicyService } from '@core/services/policy.service';
import { AudienceMember } from '@features/audience/audience.typing';
import { UserService } from '@features/users/user.service';
import { ALL_SKIP_FILTER, SimpleStringMap, TopLevelFilter, TypeaheadSelectOption } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { I18nService } from '@yourcause/common/i18n';
import { YCModalComponent } from '@yourcause/common/modals';
import { cloneDeep } from 'lodash';
import { DashboardsService } from '../dashboards.service';
import { GCDashboards } from '../dashboards.typing';

@Component({
  selector: 'gc-share-dashboard-modal',
  templateUrl: './share-dashboard-modal.component.html',
  styleUrls: ['./share-dashboard-modal.component.scss']
})
export class ShareDashboardModalComponent extends YCModalComponent<GCDashboards.SharedDashboardModalResult> implements OnInit {
  @Input() dashboard: GCDashboards.DashboardTab;
  @Input() members: AudienceMember[];

  originalMembers: AudienceMember[];
  userManageMap: SimpleStringMap<boolean> = {};
  permissionOptions: TypeaheadSelectOption[] = [{
    label: this.i18n.translate(
      'common:textOwner',
      {},
      'Owner'
    ),
    value: true
  }, {
    label: this.i18n.translate(
      'GLOBAL:textViewOnly',
      {},
      'View only'
    ),
    value: false
  }];
  topLevelFilters: TopLevelFilter[] = [];
  currentUserId = this.userService.currentUser.id;

  constructor (
    private i18n: I18nService,
    private dashboardService: DashboardsService,
    private userService: UserService,
    private policyService: PolicyService,
    private analyticsService: AnalyticsService
  ) {
    super();
  }

  ngOnInit () {
    this.originalMembers = cloneDeep(this.members);
    this.setUserManageMap();
    this.setTopLevelFilters();
  }

  setUserManageMap () {
    this.userService.allUsers.forEach((user) => {
      const canManageDashboards = this.policyService.dataExport.canManageDashboards(user);
      this.userManageMap[user.userId] = canManageDashboards;
    });
  }

  setTopLevelFilters () {
    const statusOptions = {
      selectOptions: [{
        display: this.i18n.translate(
          'common:textAllPermissions',
          {},
          'All permissions'
        ),
        value: ALL_SKIP_FILTER
      }, {
        display: this.i18n.translate(
          'GLOBAL:textViewOnly',
          {},
          'View only'
        ),
        value: false
      }, {
        display: this.i18n.translate(
          'common:textOwner',
          {},
          'Owner'
        ),
        value: true
      }]
    };
    this.topLevelFilters = [
      new TopLevelFilter(
        'text',
        'name',
        '',
        this.i18n.translate(
          'GLOBAL:textSearchByNameOrEmail',
          {},
          'Search by name or email'
        ),
        undefined,
        undefined,
        [{
          column: 'name',
          filterType: 'cn'
        }, {
          column: 'email',
          filterType: 'cn'
        }]
      ),
      new TopLevelFilter(
        'typeaheadSingleEquals',
        'canManage',
        ALL_SKIP_FILTER,
        '',
        statusOptions,
        this.i18n.translate(
          'common:lblPermissions',
          {},
          'Permissions'
        )
      )
    ];
  }

  membersChanged (members: AudienceMember[]) {
    this.members = members;
  }

  onSubmit () {
    const originalMembers = this.originalMembers;
    const members = this.members;
    const { removals, changes } = this.dashboardService.determineShareChanges(
      originalMembers,
      members
    );

    this.closeModal.emit({
      removals,
      changes
    });
    this.analyticsService.emitEvent({
      eventName: 'Share dashboard modal submit',
      eventType: EventType.Click,
      extras: null
    });
  }
}