import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FilterItem } from '../../../../../../core/models/filter-item.model';
import { Store } from '@ngxs/store';
import { RemoveSelectedFilter, ToggleFilterItemByName } from 'apps/sales/src/app/core/store/actions/filter.actions';
import { Filter } from 'apps/sales/src/app/core/models/filter.model';
import { Side } from '@libs/ui/lib/small-double-choice-switch';
import { FilterType } from 'apps/sales/src/app/core/models/filter-type.enum';

@Component({
  selector: 'app-selected-filter-item',
  templateUrl: './selected-filter-item.component.html',
  styleUrls: ['./selected-filter-item.component.scss'],
})
export class SelectedFilterItemComponent implements OnInit {
  @Input() filterItem: FilterItem;
  @Input() filter: Filter;
  @Input() selectedFilterMode: Side;
  @Output() confirmed = new EventEmitter();

  get filterType() {
    if (this.selectedFilterMode) {
      return this.selectedFilterMode === Side.RIGHT ? FilterType.Negative : FilterType.Default;
    }
  }

  constructor(private store: Store) {}

  ngOnInit() {}

  deleteFilter(filterItem: FilterItem) {
    this.toggleItem(filterItem);
    this.store.dispatch(new RemoveSelectedFilter(filterItem));
    this.confirmed.emit(true);
  }

  toggleItem(item: FilterItem) {
    this.store.dispatch(new ToggleFilterItemByName(item.name));
  }
}
