import {Component, EventEmitter, Input, Output} from '@angular/core';
import {NgClass} from '@angular/common';

@Component({
  selector: 'sae-multi-selector',
  imports: [
    NgClass
  ],
  templateUrl: './multi-selector.html',
  styleUrl: './multi-selector.scss'
})
export class MultiSelector {
  @Input() disabled: boolean = false;
  @Input() label!: string;
  // @Input() store: any;
  // @Input() ActionTypes: any;
  @Input() availableChoices: any = ['choix 1', 'choix 2', 'choix 3'];
  @Input() selectedChoices: any = ['choix 4', 'choix 5'];
  @Input() displayDropdown: boolean = false;
  @Output() selectedChoicesChange = new EventEmitter<any>();
  @Output() availableChoicesChange = new EventEmitter<any>();

  constructor() {

  }

  selectedChoicesChangeToggleItem(choice: any) {
    console.log('toggle selected choice ', choice, 'in filter ', this.label);
    this.selectedChoicesChange.emit(choice);
    // console.log(choice);
    // this.store.dispatch({
    //   type: this.ActionTypes.UPDATE_FILTER,
    //   payload: {
    //     filter: this.label,
    //     selectedChoice: choice
    //   }
    // })
  }

  availableChoicesChangeToggleItem(choice: any) {
    this.availableChoicesChange.emit(choice);
    console.log('toggle available choice ', choice, 'in filter ', this.label);
    // this.store.dispatch({
    //     type: this.ActionTypes.UPDATE_FILTER,
    //     payload: {
    //       filter: this.label,
    //       availableChoice: choice
    //     }
    //   }
    // )
  }

  onClickInput() {
    if (this.disabled) return;
    this.displayDropdown = !this.displayDropdown
  }
}