import {AsyncPipe} from '@angular/common';
import {Component, computed, DestroyRef, OnInit} from '@angular/core';
import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
import {ReactiveFormsModule} from '@angular/forms';
import {MatOptgroup, MatOption} from '@angular/material/core';
import {MatFormField, MatLabel} from '@angular/material/form-field';
import {MatSelect} from '@angular/material/select';
import {MatSlideToggle} from '@angular/material/slide-toggle';
import {NshmpHazardModelFormComponent} from '@ghsc/nshmp-lib-ng/hazard';
import {
  NshmpControlPanelButtonsComponent,
  NshmpSectionComponent,
  NshmpService,
} from '@ghsc/nshmp-lib-ng/nshmp';
import {
  SettingGroup,
  SourceType,
  sourceTypeToCapitalCase,
  TectonicSettings,
  tectonicSettingsToString,
  TreeInfo,
} from '@ghsc/nshmp-utils-ts/libs/nshmp-lib/model';
import {map} from 'rxjs';

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

/**
 * Earthquake settings group
 */
interface SettingsGroup {
  /** Tectonic settings */
  settings: TectonicSettings;
  /** Earthquake source types */
  types: SourceType[];
}

/**
 * Control panel form fields to set values to call MFD service.
 */
@Component({
  imports: [
    NshmpHazardModelFormComponent,
    NshmpControlPanelButtonsComponent,
    NshmpSectionComponent,
    MatFormField,
    MatLabel,
    MatSelect,
    MatOptgroup,
    MatOption,
    MatSlideToggle,
    AsyncPipe,
    ReactiveFormsModule,
  ],
  selector: 'app-control-panel',
  styleUrl: './control-panel.component.scss',
  templateUrl: './control-panel.component.html',
})
export class ControlPanelComponent implements OnInit {
  /** Function to convert tectonic settings to string */
  settingsToString = tectonicSettingsToString;
  /** Function to convert source type to string */
  sourceTypeToString = sourceTypeToCapitalCase;

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

  /** Settings group state */
  settingsGroup = computed(() => {
    const usage = this.service.usage();

    if (usage) {
      return this.toSourceTypes(usage.response.trees);
    } else {
      return [];
    }
  });

  /** Source trees state */
  sourceTrees$ = this.formGroup.controls.source.valueChanges.pipe(
    map(source => this.toSourceTrees(source, this.service.usage().response.trees)),
  );

  constructor(
    public service: AppService,
    private nshmpService: NshmpService,
    private destroyRef: DestroyRef,
  ) {}

  ngOnInit(): void {
    const controls = this.formGroup.controls;

    controls.model.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => this.onModelChange());

    controls.sourceAsString.valueChanges.subscribe(sourceAsString => {
      controls.source.setValue(JSON.parse(sourceAsString) as MfdSource);
      this.onSourceChange();
    });

    controls.sourceTree.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => this.service.resetState());

    controls.cumulative.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => this.service.createPlots());

    controls.weightedMfds.valueChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(() => this.service.createPlots());
  }

  /**
   * On form submit.
   */
  onSubmit(): void {
    this.service.callService();
    this.nshmpService.selectPlotControl();
  }

  private onModelChange(): void {
    const trees = this.service.usage().response.trees;
    const defaultSource = this.service.defaultSource(trees);
    const defaultTreeInfo = this.service.defaultSourceTree(trees, defaultSource);

    this.formGroup.patchValue({
      source: defaultSource,
      sourceAsString: JSON.stringify(defaultSource),
      sourceTree: defaultTreeInfo.id,
    });

    this.service.resetState();
  }

  private onSourceChange(): void {
    const trees = this.service.usage().response.trees;
    const defaultTreeInfo = this.service.defaultSourceTree(
      trees,
      this.formGroup.getRawValue().source,
    );

    this.formGroup.patchValue({
      sourceTree: defaultTreeInfo.id,
    });
    this.service.resetState();
  }

  toSourceValue(sourceType: SourceType, tectonicSettings: TectonicSettings): string {
    return JSON.stringify({
      sourceType,
      tectonicSettings,
    });
  }

  /**
   * Returns the tree info list associated with a source and trees.
   *
   * @param source The MfdSource
   * @param trees The setting groups
   */
  private toSourceTrees(source: MfdSource, trees: SettingGroup[]): TreeInfo[] {
    if (source === null || source === undefined || trees === null || trees === undefined) {
      return [];
    }

    const settingsTree = trees.find(tree => tree.setting === source.tectonicSettings);
    const tree = settingsTree?.data?.find(data => data.type === source.sourceType);
    const data = tree?.data.sort((a, b) => a.name.localeCompare(b.name));

    return data ?? [];
  }

  /**
   *  Convert setting group to source types.
   *
   * @param trees The settings groups
   */
  private toSourceTypes(trees: SettingGroup[]): SettingsGroup[] {
    if (trees === null || trees === undefined) {
      return [];
    }

    return trees.map(tree => {
      const types = [...tree.data].map(data => data.type);

      return {
        settings: tree.setting,
        types: types.sort((a, b) => a.localeCompare(b)),
      };
    });
  }
}