import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';

import { LemmatizedEntitiesList, Relation } from '../../models/evt-models';
import { EVTModelService } from '../../services/evt-model.service';
import { Map } from '../../utils/js-utils';

interface SpecificList extends LemmatizedEntitiesList {
  icon: string;
}

@Component({
  selector: 'evt-specific-lists',
  templateUrl: './specific-lists.component.html',
  styleUrls: ['./specific-lists.component.scss'],
})
export class SpecificListsComponent {
  lists$: Observable<SpecificList[]> = this.evtModelService.lemmatizedEntities$.pipe(
    map(ne => (ne.lemmas.lists)),
    map(lists => (lists.map(list => ({
      ...list,
      icon: this.listsIcons[list.lemmatizedEntityType] || 'list',
    })))),
    tap(lists => {
      if (!this.selectedList && lists[0]) {
        this.openList(undefined, lists[0]);
      }
    }),
  );

  selectedList: LemmatizedEntitiesList;

  relations$: Observable<Relation[]> = this.evtModelService.lemmatizedEntities$.pipe(
    map(ne => ne.relations),
  );

  showRelations = false;

  private listsIcons: Map<string> = {
    lem: 'user',
    place: 'map-marker',
    org: 'users',
    event: 'calendar',
  };

  constructor(
    private evtModelService: EVTModelService,
  ) {
  }

  openList(event: MouseEvent, list: LemmatizedEntitiesList) {
    if (event) {
      event.stopPropagation();
    }
    if (this.selectedList !== list) {
      this.selectedList = list;
    }
    this.showRelations = false;
  }

  openRelations() {
    this.showRelations = true;
    this.selectedList = undefined;
  }
}