import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { PolicyService } from '@core/services/policy.service';
import { SpinnerService } from '@core/services/spinner.service';
import { CreateEditApplicationModalComponent } from '@features/offline-grants/offline-grants-create-edit-application/create-edit-application-modal/create-edit-application-modal.component';
import { OfflineGrantsService } from '@features/offline-grants/offline-grants.service';
import { OfflineCreateModalAction } from '@features/offline-grants/offline-grants.typing';
import { PanelTypes, Tab } from '@yourcause/common';
import { I18nService } from '@yourcause/common/i18n';
import { ModalFactory } from '@yourcause/common/modals';
import { ApplicationManagerService } from '../services/application-manager/application-manager.service';

@Component({
  selector: 'gc-application-manager-wrapper',
  templateUrl: './application-manager-wrapper.component.html',
  styleUrls: ['./application-manager-wrapper.component.scss']
})
export class ApplicationManagerWrapperComponent implements OnInit {
  PanelTypes = PanelTypes;
  panelDescription: string;
  accessLevel = this.i18n.translate('MANAGE.NO_PERMISSION');
  totalApps = 0;
  showCreateApplication = this.policyService.grantApplication.canCreateOrEditApplications();
  tabs: Tab[] = [];

  constructor (
    private i18n: I18nService,
    private policyService: PolicyService,
    private modalFactory: ModalFactory,
    private spinnerService: SpinnerService,
    private offlineGrantsService: OfflineGrantsService,
    private router: Router,
    private applicationManagerService: ApplicationManagerService
  ) { }

  get isNomination () {
    return location.pathname.includes('nomination');
  }

  async ngOnInit () {
    this.setTabs();
    if (
      this.policyService.grantApplication.canManageAllApplications() ||
      this.policyService.grantApplication.canTakeActionsOnAllApps()
    ) {
      this.accessLevel = this.i18n.translate(
        this.isNomination ?
          'common:textAllNominations' :
          'common:textAllApplications',
        {},
        this.isNomination ?
          'All nominations' :
          'All applications'
      );
    } else if (this.policyService.grantApplication.canManageApplicationsInWorkFlows()) {
      this.accessLevel = this.i18n.translate(
        this.isNomination ?
          'GLOBAL:textInYourWorkflowsNoms' :
          'GLOBAL:textInYourWorkflowsApps',
        {},
        this.isNomination ?
          'Nominations in your workflows' :
          'Applications in your workflows'
      );
    }
    this.setPanelDescription();
  }


  setTabs () {
    const manageSlice = this.isNomination ?
      '/management/manage-nominations' :
      '/management/manage-applications';
    this.tabs = [{
      link: `${manageSlice}/${
        this.isNomination ? 'nominations' : 'applications'
      }`,
      labelKey: this.isNomination ?
        'common:hdrNominations' :
        'common:hdrApplications',
      label: this.isNomination ?  'Nominations' : 'Applications'
    }, {
      link: `${manageSlice}/forms`,
      labelKey: 'common:textForms',
      label: 'Forms'
    }, {
      link: `${manageSlice}/${
        this.isNomination ? 'nominators' : 'applicants'
      }`,
      labelKey: this.isNomination ?
        'common:lblNominators' :
        'common:lblApplicants',
      label: this.isNomination ? 'Nominators' : 'Applicants'
    }, {
      link: `${manageSlice}/organizations`,
      labelKey: 'common:lblOrganizations',
      label: 'Organizations'
    }];
    if (this.isNomination) {
      this.tabs = this.tabs.concat([{
        link: `${manageSlice}/nominees`,
        labelKey: 'GLOBAL:textNominees',
        label: 'Nominees'
      }]);
    }
  }

  setPanelDescription () {
    const accessLevelString = this.i18n.translate(
      'MANAGE:textAccessLevelDynamic',
      {
        accessLevel: this.accessLevel
      },
      'Access level: __accessLevel__'
    );
    this.panelDescription = `
      <div class="d-flex align-items-center mt-3">
        <div class="mr-4">
          <i class="fa fa-lock"></i>
          <span class="ml-2">
            ${accessLevelString}
          </span>
        </div>
      </div>
    `;
  }

  async createApplication () {
    const response = await this.modalFactory.open(
      CreateEditApplicationModalComponent,
      {
        isNomination: this.isNomination
      }
    );
    if (response) {
      this.spinnerService.startSpinner();
      const id = await this.offlineGrantsService.handleCreateEditApplication(
        response,
        null,
        this.isNomination
      );
      this.spinnerService.stopSpinner();
      if (id) {
        if (response.modalAction === OfflineCreateModalAction.SAVE_AND_EDIT) {
          const route = `/management/manage-${this.isNomination ? 'nominations/' : 'applications/'}${this.isNomination ? 'nomination' : 'application'}/` + id + '/form/no-form';
          this.router.navigate(
            [route],
            {
              queryParams: {
                isNewApp: true
              }
            }
          );
        } else {
          this.applicationManagerService.triggerResetAppManagerTable();
        }
      }
    }
  }

}