import { Component, Input, OnInit } from '@angular/core';
import { WorkflowDetail, WorkflowManager, WorkflowManagerActions } from '@core/typings/workflow.typing';
import { ClientSettingsService } from '@features/client-settings/client-settings.service';
import { UserService } from '@features/users/user.service';
import { ArrayHelpersService, SelectOption, TypeaheadSelectOption, TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { I18nService } from '@yourcause/common/i18n';
import { YCModalComponent } from '@yourcause/common/modals';
import { WorkflowService } from '../workflow.service';
interface WorkflowGroup {
  userSelect: number;
  standardWorkflowActions: WorkflowManagerActions[];
  draftWorkflowActions: WorkflowManagerActions[];
}

@Component({
  selector: 'gc-workflow-manager-modal',
  templateUrl: './workflow-manager-modal.component.html',
  styleUrls: ['./workflow-manager-modal.component.scss']
})
export class WorkflowManagerModalComponent extends YCModalComponent<{
  manager: WorkflowManager;
  addAnother: boolean;
}> implements OnInit {
  @Input() workflow: WorkflowDetail;
  @Input() workflowManager: WorkflowManager;

  formGroup: TypeSafeFormGroup<WorkflowGroup>;
  allUsers = this.userService.allUsers;
  userOptions: TypeaheadSelectOption[] = [];
  selectedManager: WorkflowManager;
  companyName = this.clientSettingsService.clientBranding.name;
  standardActionOptions: SelectOption[] = [{
    display: this.i18n.translate(
      'GLOBAL:btnApprove',
      {},
      'Approve'
    ),
    value: WorkflowManagerActions.Approve
  }, {
    display: this.i18n.translate(
      'GLOBAL:btnDecline',
      {},
      'Decline'
    ),
    value: WorkflowManagerActions.Decline
  }, {
    display: this.i18n.translate(
      'common:btnAwardPay',
      {},
      'Award / Pay'
    ),
    value: WorkflowManagerActions.AwardPay
  }, {
    display: this.i18n.translate(
      'GLOBAL:textArchiveUnarchive',
      {},
      'Archive / Unarchive'
    ),
    value: WorkflowManagerActions.ArchiveUnarchive
  }, {
    display: this.i18n.translate(
      'APPLY:textNotifyOfStatus',
      {},
      'Notify of status'
    ),
    value: WorkflowManagerActions.NotifyOfStatus
  }, {
    display: this.i18n.translate(
      'GLOBAL:btnRoute',
      {},
      'Route'
    ),
    value: WorkflowManagerActions.Route
  }, {
    display: this.i18n.translate(
      'GLOBAL:textUpdateCycle',
      {},
      'Update cycle'
    ),
    value: WorkflowManagerActions.UpdateCycle
  }, {
    display: this.i18n.translate(
      'APPLY:textUpdateStatus',
      {},
      'Update status'
    ),
    value: WorkflowManagerActions.UpdateStatus
  }, {
    display: this.i18n.translate(
      'APPLY:textManageCollaborators',
      {},
      'Manage collaborators'
    ),
    value: WorkflowManagerActions.ManageCollabs
  }, {
    display: this.i18n.translate(
      'FORMS:textSendReminder',
      {},
      'Send reminder'
    ),
    value: WorkflowManagerActions.SendReminder
  }, {
    display: this.i18n.translate(
      'CONFIG:textAddMergeDocument',
      {},
      'Add merge document'
    ),
    value: WorkflowManagerActions.MailMerge
  }, {
    display: this.i18n.translate(
      'CONFIG:textAddTags',
      {},
      'Add tags'
    ),
    value: WorkflowManagerActions.AddTags
  }, {
    display: this.i18n.translate(
      'CONFIG:textUpdateProgram',
      {},
      'Update program'
    ),
    value: WorkflowManagerActions.UpdateProgram
  }, {
    display: this.i18n.translate(
      'GLOBAL:textDeleteApplications',
      {},
      'Delete applications'
    ),
    value: WorkflowManagerActions.DeleteApplications
  }, {
    display: this.i18n.translate(
      'CONFIG:textCancelApplications',
      {},
      'Cancel applications'
    ),
    value: WorkflowManagerActions.Cancel
  }];
  draftActionOptions = [{
    display: this.i18n.translate(
      'GLOBAL:textViewCommunications',
      {},
      'View communications'
    ),
    value: WorkflowManagerActions.ViewCommunications
  }];

  constructor (
    private userService: UserService,
    private formBuilder: TypeSafeFormBuilder,
    private arrayHelper: ArrayHelpersService,
    private clientSettingsService: ClientSettingsService,
    private i18n: I18nService,
    private workflowService: WorkflowService,
    private analyticsService: AnalyticsService
  ) {
    super();
  }

  ngOnInit () {
    if (this.workflowManager) {
      this.selectedManager = {
        ...this.workflowManager
      };
    }
    const manager = this.selectedManager || {} as WorkflowManager;
    const standardWorkflowActions = this.getStandardWorkflowActions();
    const draftWorkflowActions = this.getDraftWorkflowActions();
    this.formGroup = this.formBuilder.group({
      userSelect: manager.clientUserId,
      standardWorkflowActions: [standardWorkflowActions],
      draftWorkflowActions: [draftWorkflowActions]
    });
    this.setUserOptions();
  }


  getStandardWorkflowActions () {
    const manager = this.selectedManager || {} as WorkflowManager;
    const actions = this.workflowService.standardWfManagerActions
      .filter((action) => {
        return (manager.workflowActions || []).includes(action);
      });

    return actions;
  }

  getDraftWorkflowActions () {
    const manager = this.selectedManager || {} as WorkflowManager;
    const actions = this.workflowService.draftWfManagerActions.filter((action) => {
      return (manager.workflowActions || []).includes(action);
    });

    return actions;
  }

  setUserOptions () {
    const existingUsers = (this.workflow.workflowLevelManagers || [])
      .filter((manager) => {
        return this.workflowManager ?
          this.workflowManager.clientUserId !== manager.clientUserId :
          true;
      }).map((manager) =>  manager.clientUserId);
      this.userOptions = this.arrayHelper.sort(
        this.allUsers.filter((user) => {
          return !existingUsers.includes(user.userId);
        }).map((user) => {
          return {
            label: user.fullName,
            value: user.userId,
            option: `<div class="d-flex justify-content-between">
              <div>${user.fullName}</div>
              <div>${user.email}</div>
            </div>`
          };
        }),
        'label'
      );
  }

  onUserChange (userId: number) {
    const found = this.allUsers.find((user) => {
      return user.userId === userId;
    });

    if (found) {
      this.selectedManager = {
        clientUserId: found.id,
        firstName: found.fullName.split(' ')[0],
        lastName: found.fullName.split(' ')[1],
        fullName: found.fullName,
        email: found.email,
        workflowActions: this.workflowService.allWfManagerActions
      };
    } else {
      this.selectedManager  = null;
    }

    this.formGroup.get('standardWorkflowActions').setValue(
      this.getStandardWorkflowActions()
    );
    this.formGroup.get('draftWorkflowActions').setValue(
      this.getDraftWorkflowActions()
    );
  }

  clearSelectedManager () {
    this.selectedManager = null;
    this.formGroup.get('userSelect').setValue(null);
  }

  onSave (addAnother = false) {
    const formValue = this.formGroup.value;
    this.closeModal.emit({
      manager: {
        ...this.selectedManager,
        workflowActions: formValue.standardWorkflowActions.concat(
          formValue.draftWorkflowActions
        )
      },
      addAnother
    });
    this.analyticsService.emitEvent({
      eventName: 'Save workflow manager modal',
      eventType: EventType.Click,
      extras: null
    });
  }
}