import { Component, Input, OnInit } from '@angular/core';
import { UsersAndRoutesLevel, WorkflowRoute } from '@core/typings/workflow.typing';
import { DragAndDropChange, DragItem } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { I18nService } from '@yourcause/common/i18n';
import { YCModalComponent } from '@yourcause/common/modals';

@Component({
  selector: 'gc-routing-modal',
  templateUrl: './routing-modal.component.html',
  styleUrls: ['./routing-modal.component.scss']
})
export class RoutingModalComponent extends YCModalComponent<{
  levels: DragItem[];
  goToUsersModal: boolean;
}> implements OnInit {
  @Input() levelName: string;
  @Input() levelId: number;
  @Input() allLevels: UsersAndRoutesLevel[];
  @Input() routesForLevel: WorkflowRoute[];

  title = '';
  loaded = false;
  allRoutes: DragItem[] = [];
  workflowRoutes: DragItem[] = [];

  constructor (
    private i18n: I18nService,
    private analyticsService: AnalyticsService
  ) {
    super();
  }

  ngOnInit () {
    this.title = this.i18n.translate(
      'WORKFLOW:hdrManageRoutes',
      {},
      'Manage Routes'
    );
    this.workflowRoutes = this.routesForLevel.map((route) => {
      const foundLevel = this.allLevels.find((workflowLevel) => {
        if (!workflowLevel.subLevels) {
          workflowLevel.subLevels = [];
        }
        const foundSubLevel = workflowLevel.subLevels.find((sublevel) => {
          return sublevel.id === route.canRouteToWorkflowLevelId;
        });

        return !!foundSubLevel || workflowLevel.id === route.canRouteToWorkflowLevelId;
      });

      return this.getRouteObj(
        route.canRouteToWorkflowLevelName,
        route.canRouteToWorkflowLevelId,
        foundLevel.disabled
      );
    });
    const workflowRouteIds = this.routesForLevel
      .map((route) => route.canRouteToWorkflowLevelId);
    const allRoutes = this.allLevels.filter((level) => {
      return !workflowRouteIds.includes(level.id) &&
        level.id !== this.levelId &&
        !level.disabled;
    });
    this.allRoutes = allRoutes.map((route) => {
      return this.getRouteObj(route.name, route.id, false);
    });
    this.loaded = true;
  }

  getRouteObj (name: string, id: number, disabled: boolean) {
    const disabledText = this.i18n.translate(
      'common:textDisabled',
      {},
      'Disabled'
    );

    return {
      display: `
        <span ${disabled ? 'class="disabled-text"' : ''}>
          ${name + (disabled ? ' (' + disabledText + ')' : '')}
        </span>
      `,
      context: {
        id,
        name,
        disabledText
      }
    };
  }

  routesChanged (change: DragAndDropChange) {
    this.allRoutes = [...change.left];
    this.workflowRoutes = [...change.right];
  }

  onSave (goToUsersModal = false) {
    this.closeModal.emit({
      levels: this.workflowRoutes,
      goToUsersModal
    });
    this.analyticsService.emitEvent({
      eventName: 'Workflow routing modal save',
      eventType: EventType.Click,
      extras: null
    });
  }
}