import { Component, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { ClientSettingsService } from '@features/client-settings/client-settings.service';
import { StandardProductDashboard } from '@features/platform-admin/standard-product-configuration/standard-product-configuration.typing';
import { ALL_SKIP_FILTER, ArrayHelpersService, TopLevelFilter } from '@yourcause/common';
import { I18nService } from '@yourcause/common/i18n';
import { ModalFactory } from '@yourcause/common/modals';
import { Subscription } from 'rxjs';
import { DashboardNameModalComponent } from '../dashboard-name-modal/dashboard-name-modal.component';
import { DashboardTabActionsService } from '../dashboard-tab-actions.service';
import { DashboardsService } from '../dashboards.service';
import { GCDashboards } from '../dashboards.typing';

@Component({
  selector: 'gc-dashboard-manager-page',
  templateUrl: './dashboard-manager-page.component.html',
  styleUrls: ['./dashboard-manager-page.component.scss']
})
export class DashboardManagerPageComponent implements OnDestroy {
  constructor (
    private dashboardsService: DashboardsService,
    private dashboardActions: DashboardTabActionsService,
    private i18n: I18nService,
    private clientSettings: ClientSettingsService,
    private router: Router,
    private modalFactory: ModalFactory,
    private arrayHelper: ArrayHelpersService
  ) {
    this.sub.add(
      this.dashboardsService.changesTo$('dashboardManagerRows')
      .subscribe(() => {
        this.rows = this.dashboardsService.dashboardManagerRows;
        this.numberOfActiveDashboards = this.rows.filter((row) => !row.isHidden).length;
        this.panelDescription = this.i18n.translate(
          'DASHBOARD:textNumberActiveDashboards',
          {
            number: this.numberOfActiveDashboards
          },
          '__number__ active dashboards'
        );
      })
    );
  }

  DashboardTypes = GCDashboards.DashboardTypes;
  panelDescription: string;
  isRootZone = this.clientSettings.clientSettings.isRootClient;
  topLevelFilters: TopLevelFilter[] = [
    new TopLevelFilter(
      'text',
      'name',
      '',
      this.i18n.translate(
        'common:textSearchForADashboard',
        {},
        'Search for a dashboard'
      )
    ),
    new TopLevelFilter(
      'typeaheadSingleEquals',
      'isHidden',
      ALL_SKIP_FILTER,
      '',
      {
        selectOptions: this.arrayHelper.sort([{
          label: this.i18n.translate(
            'DASHBOARD:lblAllDashboards',
            {},
            'All dashboards'
          ),
          value: ALL_SKIP_FILTER
        }, {
          label: this.i18n.translate(
            'DASHBOARD:lblVisibleDashboards',
            {},
            'Visible dashboards'
          ),
          value: false
        }, {
          label: this.i18n.translate(
            'DASHBOARD:lblHiddenDashboards',
            {},
            'Hidden dashboards'
          ),
          value: true
        }, {
          label: this.i18n.translate(
            'common:textStandardProductDashboards',
            {},
            'Standard product dashboards'
          ),
          value: 'standardProductTemplates', // unique placeholder. we actually use custom col/value
          customColumn: 'isStandardDashboardPublished',
          customValue: true
        }], 'label')
      },
      this.i18n.translate(
        'CONFIG:textVisibility',
        {},
        'Visibility'
      )
    )
  ];
  sub = new Subscription();

  rows: (GCDashboards.DashboardTab | StandardProductDashboard)[] = [];

  numberOfActiveDashboards: number;

  async addWidget (id: number) {
    const didCreate = await this.dashboardActions.addWidget(id);

    if (didCreate) {
      this.dashboardActions.navigateToDashboard(id);
    }
  }

  async addDashboard () {
    const dashboardId = await this.dashboardActions.openManageDashboardNameModal();

    if (dashboardId) {
      this.dashboardActions.activateEditing(dashboardId);
      this.dashboardActions.navigateToDashboard(dashboardId);
    }
  }

  renameDashboard (dashboard: GCDashboards.DashboardTab) {
    this.dashboardActions.openManageDashboardNameModal(dashboard);
  }

  deleteDashboard (dashboard: GCDashboards.DashboardTab) {
    this.dashboardActions.deleteDashboard(dashboard);
  }

  editDashboard (id: number) {
    this.dashboardActions.activateEditing(id);
    this.dashboardActions.navigateToDashboard(id);
  }

  changeVisibility (dashboard: GCDashboards.DashboardTab) {
    return !dashboard.isHidden ?
      this.dashboardActions.hideDashboard(dashboard) :
      this.dashboardActions.showDashboard(dashboard);
  }

  shareDashboard (dashboard: GCDashboards.DashboardTab) {
    this.dashboardActions.shareDashboard(dashboard);
  }

  makeStandardProductDB (dashboard: GCDashboards.DashboardTab) {
    this.dashboardActions.publishStandardDB(dashboard.dashboardId);
  }

  unpublishStandardProductDashboard (dashboard: GCDashboards.DashboardTab) {
    this.dashboardActions.unpublishStandardProductDB(
      dashboard.dashboardId
    );
  }

  async createCopyFromStandardProductDB (
    dashboard: StandardProductDashboard
  ) {
    const modalHeader = this.i18n.translate(
      'common:hdrCreateDashboardFromTemplate',
      {},
      'Create Dashboard From Template'
    );
    const result = await this.modalFactory.open(
      DashboardNameModalComponent,
      {
        name: dashboard.name,
        modalHeader
      }
    );
    if (result) {
      await this.dashboardActions.copyStandardDashboard(
        dashboard,
        result
      );
    }
  }

  navigateToPreview (dashboardId: number) {
    this.router.navigateByUrl('/management/home/manage/preview/' + dashboardId);
  }

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