import { Component, OnDestroy, OnInit } from '@angular/core';
import { Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { SpinnerService } from '@core/services/spinner.service';
import { FooterState } from '@core/states/footer.state';
import { AdHocReportingService } from '@features/reporting/services/ad-hoc-reporting.service';
import { FileUploadRequest, TemplateMarginsForUI, TypeSafeFormBuilder, TypeSafeFormGroup } from '@yourcause/common';
import { I18nService } from '@yourcause/common/i18n';
import { ModalFactory } from '@yourcause/common/modals';
import { DocumentFormatModalComponent } from '../document-format-modal/document-format-modal.component';
import { DocumentTemplateService } from '../document-template.service';
import { DocumentTemplateDetailForUI } from '../document-template.typing';
interface DocumentTemplateFormGroup {
  name: string;
}

@Component({
  selector: 'gc-document-template-detail-page',
  templateUrl: './document-template-detail-page.component.html',
  styleUrls: ['./document-template-detail-page.component.scss']
})
export class DocumentTemplateDetailPageComponent implements OnInit, OnDestroy {
  detail: DocumentTemplateDetailForUI;
  id = this.activatedRoute.snapshot.params.id;
  formGroup: TypeSafeFormGroup<DocumentTemplateFormGroup>;
  tokenGroups = this.adHocService.applicationTokenGroups;
  templateHtml: string;
  margins: TemplateMarginsForUI;
  constructor (
    private documentTemplateService: DocumentTemplateService,
    private activatedRoute: ActivatedRoute,
    private formBuilder: TypeSafeFormBuilder,
    private adHocService: AdHocReportingService,
    private footerState: FooterState,
    private i18n: I18nService,
    private router: Router,
    private spinnerService: SpinnerService,
    private modalFactory: ModalFactory
  ) { }

  ngOnInit () {
    this.setDetail();
    this.setFooterInfo();
    this.formGroup = this.formBuilder.group<DocumentTemplateFormGroup>({
      name: [this.detail.name, Validators.required]
    });
  }

  setDetail () {
    this.detail = this.documentTemplateService.detailMap[this.id];
    this.margins = this.detail.margins;
    this.templateHtml = this.detail.templateHtml;
  }

  setFooterInfo () {
    this.footerState.set('footerState', this.footerState.FOOTER_STATES.ACTION);
    this.footerState.setActionLabel(
      this.i18n.translate(
        'CONFIG:textSaveTemplate',
        {},
        'Save template'
      )
    );
    this.footerState.setPrimaryAction(() => this.saveChanges());
    this.footerState.setCancelLabel(this.i18n.translate('common:btnCancel'));
    this.footerState.setCancelAction(() => this.navigateBack());
  }

  onTemplateChange (html: string) {
    this.templateHtml = html;
  }
  async handleFileUploadRequest (uploadRequest: FileUploadRequest) {
    this.spinnerService.startSpinner();
    const realURL = await this.documentTemplateService.uploadFileAndReturnWithToken(uploadRequest.file, +this.id);
    uploadRequest.handleComplete(realURL);
    this.spinnerService.stopSpinner();
  }
  async saveChanges () {
    this.spinnerService.startSpinner();
    await this.documentTemplateService.handleUpdateDocumentTemplate(
      this.id,
      this.formGroup.value.name,
      this.templateHtml,
      this.margins
    );
    this.navigateBack();
    this.spinnerService.stopSpinner();
  }

  async openDocumentFormatModal () {
    const result = await this.modalFactory.open(
      DocumentFormatModalComponent,
      {
        margins: this.margins
      }
    );

    if (result) {
      this.margins = result;
    }
  }
  navigateBack () {
    this.router.navigate(['/management/configure/document-templates']);
  }

  ngOnDestroy () {
    this.footerState.clearAll();
  }
}