import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output, ViewChild, inject } from '@angular/core';
import { PickupShelfStore } from '../../store';
import { Filter, FilterInputGroupMainComponent, FilterModule } from '@shared/components/filter';
import { AsyncPipe } from '@angular/common';
import { IconModule } from '@shared/components/icon';
import { EnvironmentService } from '@core/environment';
import { Observable, combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';
import { isEqual } from 'lodash';

@Component({
  selector: 'page-pickup-shelf-out-main-side-view',
  templateUrl: 'pickup-shelf-out-main-side-view.component.html',
  styleUrls: ['pickup-shelf-out-main-side-view.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { class: 'page-pickup-shelf-out-main-side-view' },
  imports: [FilterModule, AsyncPipe, IconModule],
})
export class PickupShelfOutMainSideViewComponent implements OnInit {
  @Output() showFilter = new EventEmitter<void>();

  @ViewChild(FilterInputGroupMainComponent, { static: false })
  sharedFilterInputGroupMain: FilterInputGroupMainComponent;

  store = inject(PickupShelfStore);

  filter$ = this.store.filter$;

  get isDesktop$() {
    return this._environment.matchDesktopLarge$;
  }

  hasFilter$ = combineLatest([this.filter$, this.store.defaultFilter$]).pipe(
    map(([filter, defaultFilter]) => {
      const filterQueryParams = filter?.getQueryParams();
      return !isEqual(filterQueryParams, Filter.create(defaultFilter).getQueryParams());
    }),
  );

  fetching$: Observable<boolean> = this.store.fetchingList$;

  searchboxHint$ = this.store.searchboxHint$;

  constructor(private _environment: EnvironmentService) {}

  ngOnInit() {}

  search(filter: Filter) {
    this.store.setQueryParams(filter.getQueryParams());
    this.store.fetchList();
  }
}
