import {AsyncPipe} from '@angular/common';
import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
import {ReactiveFormsModule} from '@angular/forms';
import {MatButton} from '@angular/material/button';
import {MatOption} from '@angular/material/core';
import {MatDivider} from '@angular/material/divider';
import {MatFormField, MatLabel} from '@angular/material/form-field';
import {MatIcon} from '@angular/material/icon';
import {MatSelect} from '@angular/material/select';
import {NshmpHazardDisaggPlotComponent} from '@ghsc/nshmp-lib-ng/hazard';
import {NshmpTemplateService} from '@ghsc/nshmp-template';
import {map, Observable} from 'rxjs';

import {AppService} from '../../services/app.service';

/**
 * Disaggregation plot with select menu of component.
 */
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {id: 'hazard-disagg-plots'},
  imports: [
    NshmpHazardDisaggPlotComponent,
    MatDivider,
    MatFormField,
    MatLabel,
    MatSelect,
    MatOption,
    AsyncPipe,
    ReactiveFormsModule,
    MatIcon,
    MatButton,
    AsyncPipe,
  ],
  selector: 'app-plots',
  styleUrl: './plots.component.scss',
  templateUrl: './plots.component.html',
})
export class PlotsComponent {
  service = inject(AppService);
  templateService = inject(NshmpTemplateService);

  /** Disaggregation response data state */
  disaggData = this.service.disaggData;
  /** Form field state */
  form = this.service.formGroup;
  /** Disaggreagtion service response */
  serviceResponse = this.service.serviceResponse;

  filename$: Observable<string> = this.form.valueChanges.pipe(
    map(
      values =>
        `disagg-${values.disaggComponent}-${values.vs30}-${values.imt}-${values.returnPeriod}.png`,
    ),
  );

  /** Print report */
  exportReport(): void {
    print();
  }
}