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

@Component({
  selector: 'sae-multi-selector',
  imports: [
    CommonModule
  ],
  templateUrl: './multi-selector.html',
  styleUrl: './multi-selector.scss'
})
export class MultiSelector implements OnInit {
  @Input() disabled: boolean = false;
  @Input() label!: string;
  @Input() availableChoices: any = [{
    label: 'aaaaaa',
    value: 'AAAAA'
  }];
  @Input() selectedChoices: any = [];
  @Input() displayDropdown: boolean = false;

  @Input() store: any;
  @Input() actionTypes: any;

  @Output() clickedOnInput = new EventEmitter<any>();
  @Output() selectedChoicesChange = new EventEmitter<any>();
  @Output() availableChoicesChange = new EventEmitter<any>();

  searchText: string = '';

  constructor() {
  }

  ngOnInit() {
    console.log('constructor multi selector', this.label, this.availableChoices, this.selectedChoices);

  }

  onSearchInput(event: any) {
    this.searchText = (event?.target?.value || '').toLowerCase();
  }

  getFilteredSelectedChoices() {
    if (!this.searchText) {
      return this.selectedChoices || [];
    }
    return (this.selectedChoices || []).filter((c: any) =>
      (c?.label || '').toLowerCase().includes(this.searchText)
    );
  }

  getFilteredAvailableChoices() {
    if (!this.searchText) {
      return this.availableChoices || [];
    }
    return (this.availableChoices || []).filter((c: any) =>
      (c?.label || '').toLowerCase().includes(this.searchText)
    );
  }

  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);
    // Retire immédiatement l'élément cliqué de la liste des disponibles (feedback UI optimiste)
    const clickedValue = typeof choice === 'string' ? choice : choice?.value;
    this.availableChoices = (this.availableChoices || []).filter((c: any) => {
      const value = typeof c === 'string' ? c : c?.value;
      return value !== clickedValue;
    });
    this.store.dispatch({
        type: this.actionTypes.UPDATE_FILTER,
        payload: {
          filter: this.label,
          availableChoice: choice
        }
      }
    )
  }

  onInputClickedOrFocused(event?: any) {
    // Informe le parent que cet input a été cliqué/focus pour fermer les autres dropdowns
    this.clickedOnInput.emit({ label: this.label });
    if (this.disabled) {
      console.info('disabled input');
      return;
    }
    this.displayDropdown = true;
  }

  onClickInput() {
    console.log('click dropdown:', this.displayDropdown);
    if (this.disabled) {
      console.info('disabled input');
      return;
    }
    // Informe le parent pour fermer les autres puis ouvre celui-ci
    this.clickedOnInput.emit({ label: this.label });
    this.displayDropdown = true;
    console.log('Opened dropdown:', this.displayDropdown);
  }
}