import { Component, OnInit } from '@angular/core';
import { AdHocReportingAPI } from '@core/typings/api/ad-hoc-reporting.typing';
import { ALL_SKIP_FILTER, TopLevelFilter, TopLevelFilterOption } from '@yourcause/common';
import { AnalyticsService, EventType } from '@yourcause/common/analytics';
import { I18nService } from '@yourcause/common/i18n';
import { YCModalComponent } from '@yourcause/common/modals';
import { DashboardsService } from '../dashboards.service';
import { GCDashboards } from '../dashboards.typing';

@Component({
  selector: 'gc-add-widget-modal',
  templateUrl: './add-widget-modal.component.html',
  styleUrls: ['./add-widget-modal.component.scss']
})
export class AddWidgetModalComponent extends YCModalComponent<{
  template: GCDashboards.SimpleWidgetConfig;
}> implements OnInit {
  addNewWidgetAlert = this.i18n.translate(
    'GLOBAL:textAddNewWidgetAlert',
    {},
    `Select an existing widget to use as a template for your new widget. Once a template has been selected you can make any required changes before adding the widget to your dashboard. Alternatively, click "Add new widget" below to start from scratch.`
  );
  widgets: GCDashboards.SimpleWidgetConfig[] = [];
  sourceSelects: TopLevelFilterOption[] = [{
    value: ALL_SKIP_FILTER,
    display: this.i18n.translate(
      'BUDGET:textAllSources',
      {},
      'All sources'
    )
  },
    ...this.dashboardsService.getSourceSelectOptions() as TopLevelFilterOption[]
  ];
  typeSelects: TopLevelFilterOption[] = [{
    value: ALL_SKIP_FILTER,
    display: this.i18n.translate(
      'common:textAllTypes',
      {},
      'All types'
    )
  },
    ...this.dashboardsService.typeSelectOptions as TopLevelFilterOption[]
  ];
  widgetTypeSelects: TopLevelFilterOption[] = [{
    value: ALL_SKIP_FILTER,
    display: this.i18n.translate(
      'common:textAllWidgets',
      {},
      'All widgets'
    )
  }, {
    value: AdHocReportingAPI.AdHocReportType.Chart,
    display: this.i18n.translate(
      'common:textMyWidgets',
      {},
      'My widgets'
    )
  }, {
    value: AdHocReportingAPI.AdHocReportType.ChartTemplate,
    display: this.i18n.translate(
      'common:textSystemTemplates',
      {},
      'System templates'
    )
  }];
  topLevelFilters: TopLevelFilter[] = [
    new TopLevelFilter(
      'typeaheadSingleEquals',
      'reportType',
      ALL_SKIP_FILTER,
      undefined,
      {
        selectOptions: this.widgetTypeSelects
      },
      this.i18n.translate(
        'GLOBAL:textReportType',
        {},
        'Report type'
      )
    ),
    new TopLevelFilter(
      'typeaheadSingleEquals',
      'object',
      ALL_SKIP_FILTER,
      undefined,
      {
        selectOptions: this.sourceSelects
      },
      this.i18n.translate(
        'common:textSource',
        {},
        'Source'
      )
    ),
    new TopLevelFilter(
      'typeaheadSingleEquals',
      'type',
      ALL_SKIP_FILTER,
      undefined,
      {
        selectOptions: this.typeSelects
      },
      this.i18n.translate(
        'common:hdrType',
        {},
        'Type'
      )
    ),
    new TopLevelFilter(
      'text',
      'name',
      '',
      this.i18n.translate(
        'common:textSearchByName',
        {},
        'Search by name'
      )
    )
  ];
  ReportTypes = AdHocReportingAPI.AdHocReportType;

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

  async ngOnInit () {
    this.setWidgets();
  }

  setWidgets () {
    this.widgets = this.dashboardsService.allWidgets;
  }

  addNewWidget () {
    this.closeModal.emit({
      template: null
    });
    this.analyticsService.emitEvent({
      eventName: 'Add new widget modal submit',
      eventType: EventType.Click,
      extras: null
    });
  }

  selectWidget (template: GCDashboards.SimpleWidgetConfig) {
    this.closeModal.emit({
      template
    });
  }
}