import { Component, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { StandardProductDashboard } from '@features/platform-admin/standard-product-configuration/standard-product-configuration.typing';
import { I18nService } from '@yourcause/common/i18n';
import { ModalFactory } from '@yourcause/common/modals';
import { filter, 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';

@Component({
  selector: 'gc-dashboard-preview',
  templateUrl: './dashboard-preview.component.html',
  styleUrls: ['./dashboard-preview.component.scss']
})
export class DashboardPreviewComponent implements OnDestroy {
  id = +this.activatedRoute.snapshot.params.id;
  sub = new Subscription();
  title: string;

  nameModalHeader = this.i18n.translate(
    'common:hdrCreateDashboardFromTemplate',
    {},
    'Create Dashboard From Template'
  );

  constructor (
    private dashboardsService: DashboardsService,
    private activatedRoute: ActivatedRoute,
    private modalFactory: ModalFactory,
    private dashboardTabsService: DashboardTabActionsService,
    private i18n: I18nService,
    private router: Router
  ) {
    this.sub.add(
      this.dashboardsService.changesTo$('dashboardDetails').pipe(
      filter(dashboard => !!dashboard[this.id]))
      .subscribe(() => {
        this.title = this.dashboardsService.dashboardDetails[this.id].name;
      })
    );
  }


  async openNameAndSaveModal () {
    const result = await this.modalFactory.open(
      DashboardNameModalComponent,
      {
        name: this.title,
        modalHeader: this.nameModalHeader
      }
    );
    if (result) {
      const standardProductDB = this.dashboardsService.dashboardManagerRows.find((db) => {
        return db.dashboardId === this.id;
      });
      await this.dashboardTabsService.copyStandardDashboard(
        standardProductDB as StandardProductDashboard,
        result
      );
      this.router.navigateByUrl('management/home/manage');
    }
  }

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