import {AsyncPipe} from '@angular/common';
import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
import {toObservable} from '@angular/core/rxjs-interop';
import {MatList, MatListItem} from '@angular/material/list';
import {nshmpUtils} from '@ghsc/nshmp-lib-ng/nshmp';
import {SourceLogicTreesUsage} from '@ghsc/nshmp-utils-ts/libs/nshmp-haz/www/source-logic-trees-service';
import {
  sourceTypeToCapitalCase,
  tectonicSettingsToString,
} from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/model';
import {combineLatest, map, Observable} from 'rxjs';

import {ControlForm, MfdSource} from '../../models/control-form.model';
import {AppService} from '../../services/app.service';

interface Parameters {
  model: string;
  sourceTree: string;
  sourceType: string;
  textonicSettings: string;
}

/**
 * Summary of parameters entered, form field values to call service.
 */
@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: {id: 'source-mfd-parameter-summary'},
  imports: [MatList, MatListItem, AsyncPipe],
  selector: 'app-parameter-summary',
  styleUrl: './parameter-summary.component.scss',
  templateUrl: './parameter-summary.component.html',
})
export class ParameterSummaryComponent {
  service = inject(AppService);

  /** Function to get display from a `Parameter` */
  toDisplay = nshmpUtils.parameterToDisplay;

  values$ = this.service.formGroup.valueChanges;

  /** Usage response state */
  usage = this.service.usage;

  parameters$: Observable<Parameters> = combineLatest([
    toObservable(this.usage),
    toObservable(this.service.availableModels),
    this.service.formGroup.valueChanges,
  ]).pipe(
    map(([usage, availableModels, values]) => {
      return {
        model: this.toDisplay(values.model, availableModels),
        sourceTree: this.sourceTree(values, usage),
        sourceType: this.sourceType(values.source),
        textonicSettings: this.tectonicSetting(values.source),
      };
    }),
  );

  /**
   * Returns the source tree name.
   *
   * @param values Control panel form field values
   * @param usage Source logic trees usage
   */
  private sourceTree(values: Partial<ControlForm>, usage: SourceLogicTreesUsage): string {
    if (values.model === null || values.source === null || usage === null) {
      return '';
    }

    const source = values.source;

    const settingsTree = usage.response.trees.find(
      tree => tree.setting === source.tectonicSettings,
    );
    const tree = settingsTree?.data?.find(data => data.type === source.sourceType);
    const data = tree?.data.find(info => info.id === values.sourceTree);

    return data ? `${data.name} (${values.sourceTree})` : '';
  }

  /**
   * Returns the source type name.
   *
   * @param source The MFD source
   * @returns
   */
  private sourceType(source: MfdSource): string {
    return source === undefined || source === null
      ? ''
      : sourceTypeToCapitalCase(source.sourceType);
  }

  /**
   * Returns the tectonic setting name.
   *
   * @param source The MFD source
   * @returns
   */
  private tectonicSetting(source: MfdSource): string {
    return source === undefined || source === null
      ? ''
      : tectonicSettingsToString(source.tectonicSettings);
  }
}