import {Component, computed, OnDestroy, OnInit} from '@angular/core';
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 {NshmpLibNgAppMetadataComponent} from '@ghsc/nshmp-lib-ng/nshmp';
import {
  NshmpLibNgPlotComponent,
  NshmpLibNgPlotsContainerComponent,
} from '@ghsc/nshmp-lib-ng/plot';
import {Subscription} from 'rxjs';

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: [
    NshmpLibNgPlotsContainerComponent,
    NshmpLibNgPlotComponent,
    NshmpLibNgAppMetadataComponent,
    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, OnDestroy {
  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);

  private mfdSubscription = new Subscription();

  constructor(private service: AppService) {}

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