/* tslint:disable:max-line-length */
import { Component, ChangeDetectionStrategy, ChangeDetectorRef, OnInit, OnDestroy, NgZone } from '@angular/core';
import { DetailedSelectedService } from './detailed-selected.service';
import { DetailedItem } from '../detailed-item';
import { DetailedModeService } from '../detailed-mode/detailed-mode.service';
import { DetailedDropdownBrowseService } from '../detailed-dropdown-browse/detailed-dropdown-browse.service';
import { DetailedService } from '../detailed.service';
import { DetailedSearchService } from '../detailed-search/detailed-search.service';
import { Subject } from 'rxjs';
import { takeUntil, map } from 'rxjs/operators';
/* tslint:enable:max-line-length */

@Component({
  selector:        'app-detailed-selected',
  templateUrl:     'detailed-selected.component.html',
  styleUrls:       ['detailed-selected.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DetailedSelectedComponent implements OnInit, OnDestroy {

  destroy$ = new Subject();

  items: DetailedItem[];

  structuredSelectedItems;
  groupHovered: Object = {};

  constructor (private zone: NgZone,
               private detailedService: DetailedService,
               private detailedDropdownBrowseService: DetailedDropdownBrowseService,
               private detailedModeService: DetailedModeService,
               private detailedSelectedService: DetailedSelectedService,
               private detailedSearchService: DetailedSearchService,
               private changeDetectorRef: ChangeDetectorRef) {
  }

  /**
   * Open clicked crumb in browse dropdown and scroll to it
   * @param key
   * @param index
   */
  showCrumb (key: string, index: number) {
    const path             = key.split(' > ');
    const defaultOpenItems = this.detailedDropdownBrowseService.defaultOpenItems;
    // noinspection TypeScriptUnresolvedFunction
    const openItems        = Object.assign({}, defaultOpenItems);

    for (let pos = 0; pos < path.length; pos++) {
      if (pos <= index) {
        const openItemKey = path.slice(0, pos + 1)
                              .join(' > ');

        openItems._scrollTo    = openItemKey;
        openItems[openItemKey] = true;
      }
    }

    this.zone.run(() => {
      // Close search mode before opening browse tree
      this.detailedSearchService.update({isVisible: false, type: null});

      this.detailedModeService.set('browse');
      this.detailedDropdownBrowseService.updateOpenItems(openItems);
    });
  }

  removeGroup (key) {
    let selectedItems = this.detailedSelectedService.get();

    // Extended id with respect to item's type
    const combinedId = (item) => [item.type, item.id].join('.');

    const combinedIdsToRemove = this.structuredSelectedItems.map[key].map(item => combinedId(item));

    selectedItems = selectedItems.filter(item => combinedIdsToRemove.indexOf(combinedId(item)) === -1);

    this.detailedSelectedService.updateSelected(selectedItems);
  }

  removeItem (itemToRemove: DetailedItem) {
    let selectedItems = this.detailedSelectedService.get();
    const shouldRemove  = (item) => item.id === itemToRemove.id && item.type === itemToRemove.type;
    selectedItems     = selectedItems.filter(item => !shouldRemove(item));

    this.detailedSelectedService.updateSelected(selectedItems);
  }

  hoverGroup (key, isHovered) {
    this.groupHovered[key] = isHovered;
    this.changeDetectorRef.markForCheck();
    this.changeDetectorRef.detectChanges();
  }

  ngOnDestroy () {
    this.destroy$.next();
  }

  ngOnInit () {
    this.detailedSelectedService.items
        .pipe(takeUntil(this.destroy$))
        .subscribe((items: DetailedItem[]) => {
          this.items = items;
          this.detailedService.updateWithSelectedItems(this.items);
        });

    this.detailedSelectedService.items
        .pipe(
          takeUntil(this.destroy$),
          map(this.detailedSelectedService.structureSelectedItems)
        )
        .subscribe((structuredSelectedItems) => {
          this.structuredSelectedItems = structuredSelectedItems;
          this.changeDetectorRef.markForCheck();
          this.changeDetectorRef.detectChanges();
        });
  }

}