import {Component, computed, DestroyRef, inject, OnInit} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {ReactiveFormsModule} from '@angular/forms';
import {MatOption} from '@angular/material/core';
import {MatDivider} from '@angular/material/divider';
import {
  MatAccordion,
  MatExpansionPanel,
  MatExpansionPanelHeader,
  MatExpansionPanelTitle,
} from '@angular/material/expansion';
import {MatFormField, MatLabel} from '@angular/material/form-field';
import {MatSelect} from '@angular/material/select';
import {NshmpAppMetadataComponent} from '@ghsc/nshmp-lib-ng/nshmp';
import {NshmpPlotComponent, NshmpPlotsContainerComponent} from '@ghsc/nshmp-lib-ng/plot';

import {MfdType} from '../../models/control-form.model';
import {AppService} from '../../services/app.service';
import {ParameterSummaryComponent} from '../parameter-summary/parameter-summary.component';

/**
 * Main application plots showing magnitude frequency distribution: magnitude vs. rate.
 *
 * By default all MFD types are show, select menu with ability to change to specific MFD type.
 */
@Component({
  imports: [
    NshmpPlotsContainerComponent,
    NshmpPlotComponent,
    NshmpAppMetadataComponent,
    MatAccordion,
    MatExpansionPanel,
    MatExpansionPanelHeader,
    MatExpansionPanelTitle,
    MatDivider,
    MatFormField,
    MatLabel,
    MatSelect,
    MatOption,
    ParameterSummaryComponent,
    ReactiveFormsModule,
  ],
  selector: 'app-plots',
  styleUrl: './plots.component.scss',
  templateUrl: './plots.component.html',
})
export class PlotsComponent implements OnInit {
  private service = inject(AppService);
  private destroyRef = inject(DestroyRef);

  MfdType = MfdType;

  /** Form field state */
  formGroup = this.service.formGroup;

  /** MFD plot data state */
  mfdPlotData = this.service.mfdPlotData;

  /** MFD types plotted for select menu */
  mfdTypes = computed(() => {
    const serviceResponse = this.service.serviceResponse();

    if (serviceResponse === null) {
      return [];
    }

    const mfdTypes = serviceResponse.response.branches
      .map(branch => {
        return branch.mfds.map(mfdInfo => mfdInfo.mfd.props.type);
      })
      .reduce((prev, curr) => [...prev, ...curr]);

    return Array.from(new Set(mfdTypes)).sort((a, b) => a.localeCompare(b));
  });

  /** Repo metadata */
  repositories = computed(() => this.service.usage()?.metadata.repositories);

  ngOnInit(): void {
    this.formGroup.controls.mfdType.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => {
        if (this.formGroup.controls.mfdType.enabled && this.service.serviceResponse() !== null) {
          this.service.createPlots();
        }
      });
  }
}