import { Component, Input, Output, EventEmitter } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';

// models
import { ArrayStatus } from '../../models/array-status.model';
import { userSelected } from '../../models/user-selected.model';
import { filterOutput } from '../../models/filter-output.model';
import { filterOutputWithParams } from '../../models/filter-output-params.model';

// enums
import { ToolbarFilterStringEnum } from '../ca-map/enums';

// components
import { CaAppTooltipV2Component } from '../ca-app-tooltip-v2/ca-app-tooltip-v2.component';

@Component({
    selector: 'app-ca-collapsible-filter',
    templateUrl: './ca-collapsible-filter.component.html',
    styleUrls: ['./ca-collapsible-filter.component.scss'],
    imports: [
        // modules
        CommonModule,
        NgbTooltipModule,
        // components
        CaAppTooltipV2Component,
    ]
})
export class CaCollapsibleFilterComponent {
  @Input() isExpanded: boolean = true;
  @Input() filterArray!: ArrayStatus[];
  @Input() type!: string;
  @Output() onTagEmit = new EventEmitter<Event>();

  public selectedFilterArray: ArrayStatus[] = [];


  public addToSelectedUser(item: userSelected, event: Event): void {
    const alreadySelected = this.selectedFilterArray.some(
      (selected) => selected.id === item.id
    );

    if (!alreadySelected) {
      this.selectedFilterArray.push(item);
      this.onTagClick(event, item);
    }
  }

  public removeFromSelectedUser(item: userSelected, event: Event): void {
    this.selectedFilterArray = this.selectedFilterArray.filter(
      (selected) => selected.id !== item.id
    );
    this.onTagClick(event, item);
  }

  public onTagClick(event: Event, item: ArrayStatus): void {
    item.isSelected = !item.isSelected;
    item.currentSet = !item.currentSet;

    this.onTagEmit.emit(event);
  }

  public setFilterValue(): filterOutput {
    const subType = ToolbarFilterStringEnum.EMPTY_STRING_PLACEHOLDER.toString();
    const queryParams = this.selectedFilterArray.map((item) => item.id);

    const action = ToolbarFilterStringEnum.SET;
    const data = {
      filterType: this.type,
      action,
      queryParams,
      subType,
    };

    return data;
  }

  public toggleExpand(): void {
    this.isExpanded = !this.isExpanded;
  }
}