import {Component, OnInit} from '@angular/core';
import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
import {ParticleManagerService} from '../../services/particle-manager.service';
import {Particle} from '../../models/particle.model';
import {MatSliderModule} from '@angular/material/slider';
import {MatSelectModule} from '@angular/material/select';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {Observable} from 'rxjs';
import {map, startWith} from 'rxjs/operators';
import {AsyncPipe} from '@angular/common';

@Component({
  selector: 'app-particle',
  imports: [
    MatCard,
    MatCardContent,
    MatCardHeader,
    MatCardTitle,
    ReactiveFormsModule,
    FormsModule,
    MatSliderModule,
    MatSelectModule,
    MatFormFieldModule,
    MatInputModule,
    MatAutocompleteModule,
    AsyncPipe
  ],
  templateUrl: './particle.component.html',
  styleUrl: './particle.component.scss'
})
export class ParticleComponent implements OnInit {
  // Available particle types from the enum
  particleTypes = Object.values(Particle);

  // Form control for the particle type dropdown with filtering
  particleTypeControl = new FormControl();
  filteredParticleTypes: Observable<string[]>;

  constructor(
    private particleManagerService: ParticleManagerService,
  ) {
    this.filteredParticleTypes = this.particleTypeControl.valueChanges.pipe(
      startWith(''),
      map(value => this._filterParticleTypes(value || ''))
    );
  }

  ngOnInit() {
    // Initialize the particle type control with the current value
    this.particleTypeControl.setValue(this.selectedParticle);

    // Update the selected particle when the control value changes
    this.particleTypeControl.valueChanges.subscribe(value => {
      if (value && Object.values(Particle).includes(value)) {
        this.selectedParticle = value;
      }
    });
  }

  private _filterParticleTypes(value: string): string[] {
    const filterValue = value.toLowerCase();
    return this.particleTypes.filter(type => type.toLowerCase().includes(filterValue));
  }

  // Display function for the autocomplete
  displayFn(particle: string): string {
    return particle ? particle : '';
  }

  public get supportsColor(): boolean {
    return this.particleManagerService.supportsColor;
  }

  /**
   * Get the selected color
   */
  public get selectedColor(): string {
    return this.particleManagerService.getSelectedColor();
  }

  /**
   * Set the selected color
   */
  public set selectedColor(color: string) {
    this.particleManagerService.setSelectedColor(color);
  }

  /**
   * Get the selected particle type
   */
  public get selectedParticle(): Particle {
    return this.particleManagerService.particle;
  }

  /**
   * Set the selected particle type
   */
  public set selectedParticle(particle: Particle) {
    this.particleManagerService.particle = particle;
  }

  /**
   * Get the selected particle size
   */
  public get selectedSize(): number {
    return this.particleManagerService.size;
  }

  /**
   * Set the selected particle size
   */
  public set selectedSize(size: number) {
    this.particleManagerService.size = size;
  }
}