import {Component, Input} from '@angular/core';
import {ToggleButton} from '../toggle-button/toggle-button';
import {Store} from '@ngrx/store';
import {ActionTypes, StateInterface} from '../../reducers';
import {filterType} from '../../services/AirWatchState';

@Component({
  selector: 'app-tools-options',
  imports: [
    ToggleButton
  ],
  templateUrl: './tools-options.html',
  styleUrl: './tools-options.scss'
})
export class ToolsOptions {
  filters: filterType[] = [];
  @Input() public hideDisabledButtons: boolean = false;
  @Input() public alignLeft: boolean = false;

  constructor(private store: Store<StateInterface>) {
    this.store.select(state => state.app.filters).subscribe(filters => {

      console.log("filters", filters)
      this.filters = filters;
    });
  }

  toggleFilter(filter: filterType, newState: boolean) {
    // Find the main-button of the filter in the array
    const filterIndex = this.filters.findIndex(f => f.name === filter.name);

    if (filterIndex !== -1) {
      // Create a new array with the updated filter
      const updatedFilters = [...this.filters];
      updatedFilters[filterIndex] = {
        ...filter,
        enabled: newState
      };

      // Dispatch the action to update the store
      this.store.dispatch({
        type: ActionTypes.UPDATE_APP,
        payload: {
          filters: updatedFilters
        }
      });
    }
  }

  getTooltipForFilter(filter: filterType): string {
    // Generate descriptive tooltips based on filter name and kind
    const kindDescription = filter.kind === 'local' ? 'Données internes' : 'Données externes';
    return `${filter.name} - ${kindDescription}`;
  }
}
