import {Component, Input} from '@angular/core';
import {MultiSelector} from '../../inputs/multi-selector/multi-selector';
import {CommonModule} from '@angular/common';


@Component({
  selector: 'sae-filters-group',
  imports: [
    MultiSelector,
    CommonModule,
  ],
  templateUrl: './filters-group.html',
  styleUrl: './filters-group.scss'
})
export class FiltersGroup {
  @Input() highlighted = false;
  @Input() store: any = {};
  @Input() appState: any = {};
  @Input() actionTypes: any;
  @Input() disabled!: boolean;
  @Input() hideChipsList: boolean = false;

  constructor() {

    console.log('constructor filters group', this.appState, this.store, this.actionTypes);
  }

  onSelectedChoicesChange(choice: any, filterType: string) {
    console.log('onSelectedChoicesChange', choice, 'for filter', filterType);
    if (this.store && this.actionTypes) {
      const choiceValue = typeof choice === 'string' ? choice : choice?.value;
      this.store.dispatch({
        type: this.actionTypes.UPDATE_FILTER,
        payload: {
          filter: filterType,
          choice: choiceValue
        }
      });
    }
  }

  onAvailableChoicesChange(choice: any, filterType: string) {
    console.log('onAvailableChoicesChange', choice, 'for filter', filterType);
    if (this.store && this.actionTypes) {
      const choiceValue = typeof choice === 'string' ? choice : choice?.value;
      this.store.dispatch({
        type: this.actionTypes.UPDATE_FILTER,
        payload: {
          filter: filterType,
          choice: choiceValue
        }
      });
    }
  }
}
