import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { SpinnerService } from '@core/services/spinner.service';
import { WorkflowDetail } from '@core/typings/workflow.typing';
import { Tab } from '@yourcause/common';
import { ModalFactory } from '@yourcause/common/modals';
import { Subscription } from 'rxjs';
import { WorkflowDetailsModalComponent } from '../workflow-details-modal/workflow-details-modal.component';
import { WorkflowManagerModalComponent } from '../workflow-manager-modal/workflow-manager-modal.component';
import { WorkflowService } from '../workflow.service';

@Component({
  selector: 'gc-workflow-detail-page',
  templateUrl: './workflow-detail-page.component.html',
  styleUrls: ['./workflow-detail-page.component.scss']
})
export class WorkflowDetailPageComponent implements OnInit, OnDestroy {
  id = this.activatedRoute.snapshot.params.id;
  isNew = this.id === 'new';
  tabs: Tab[] = [];
  sub = new Subscription();
  workflow: WorkflowDetail;

  constructor (
    private activatedRoute: ActivatedRoute,
    private workflowService: WorkflowService,
    private modalFactory: ModalFactory,
    private router: Router,
    private spinnerService: SpinnerService
  ) {
    this.sub.add(activatedRoute.params.subscribe((params) => {
      if (params) {
        this.id = params.id;
        this.isNew = this.id === 'new';
      }
      this.ngOnInit();
    }));
  }

  get workflowMap () {
    return this.workflowService.get('workflowMap');
  }

  ngOnInit () {
    this.setWorkflow();
    if (this.isNew && !this.workflow) {
      this.router.navigate(['/management/program-setup/workflows']);
    }
    this.tabs = [{
      link: `/management/program-setup/workflows/detail/${this.id}/structure`,
      labelKey: 'GLOBAL:textStructure',
      label: 'Structure'
    }, !this.isNew ? {
      link: `/management/program-setup/workflows/detail/${this.id}/users-and-routes`,
      labelKey: 'GLOBAL:textUsersAndRoutes',
      label: 'Users and Routes'
    } : null,  !this.isNew ? {
      link: `/management/program-setup/workflows/detail/${this.id}/workflow-managers`,
      labelKey: 'GLOBAL:textWorkflowManagers',
      label: 'Workflow Managers'
    } : null].filter((tab) => !!tab);
  }

  setWorkflow () {
    this.workflow = this.workflowService.getWorkflowForEdit(this.id);
  }

  async workflowDetailModal () {
    const response = await this.modalFactory.open(
      WorkflowDetailsModalComponent,
      {
        isNew: this.isNew,
        name: this.workflow.name,
        description: this.workflow.description
      }
    );
    if (response) {
      if (this.isNew) {
        this.workflowService.setMapForNewWorkflow(
          response.workflowName,
          response.workflowDescription
        );
      } else {
        this.spinnerService.startSpinner();
        await this.workflowService.handleUpdateWorkflowDetails(
          this.id,
          response.workflowName,
          response.workflowDescription
        );
        this.setWorkflow();
        this.spinnerService.stopSpinner();
      }
    }
  }

  async addWorkflowManagerModal () {
    const response = await this.modalFactory.open(
      WorkflowManagerModalComponent,
      {
        workflow: this.workflow,
        workflowManager: null
      }
    );
    if (response) {
      this.spinnerService.startSpinner();
      await this.workflowService.handleAddWorkflowManager(
        this.id,
        response.manager,
        true
      );
      this.setWorkflow();
      this.spinnerService.stopSpinner();
      if (response.addAnother) {
        this.addWorkflowManagerModal();
      }
    }
  }

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