import {Component} from '@angular/core';

import {inputModeChoicesType} from '../../services/AirWatchState';
import {Store} from '@ngrx/store';
import {ActionTypes, StateInterface} from '../../reducers';
import {ApiService} from '../../services/api-service';
import {NgClass} from '@angular/common';

@Component({
  selector: 'app-prompt-indicator',
  imports: [NgClass],
  templateUrl: './prompt-indicator.html',
  styleUrl: './prompt-indicator.scss'
})
export class PromptIndicator {

  inputMode: inputModeChoicesType = 'auto';
  isDropdownActive: boolean = false;

  constructor(private store: Store<StateInterface>, private apiService: ApiService) {
    // Subscribe to the app state to get the current input mode
    this.store.select(state => state.app.inputMode).subscribe(mode => {
      if (mode) {
        this.inputMode = mode;
      }
    });

  }

// Toggle dropdown menu
  toggleDropdown() {
    this.isDropdownActive = !this.isDropdownActive;
  }

// Change input mode
  changeInputMode(mode
                  :
                  inputModeChoicesType
  ) {
    this.inputMode = mode;
    this.isDropdownActive = false; // Close dropdown after selection

    // Update the app state with the new input mode
    this.store.dispatch({
      type: ActionTypes.UPDATE_APP,
      payload: {
        inputMode: mode
      }
    });

  }
}
