import { Component } from "@angular/core";
import { Observable } from 'rxjs';
import { Store } from '@ngrx/store';
import { IAppState } from '../store/index';
import { ICharacters } from '../store/characters/characters.reducer'

@Component({
    selector: 'characters-list',
    templateUrl: './characters.component.html',
    styleUrls: ['./characters.component.css']
})
export class CharactersComponent {

    public data = null;

    public characters$: Observable<ICharacters>;

    constructor(store: Store<IAppState>) {
      this.characters$ = store.select('characters');
      this.characters$.subscribe(val => this.data = val);
    }

    public toInt(num: string) {
        return +num;
    }

    public sortByWordLength = (a: any) => {
        return a.name.length;
    }

    public remove(character) {
      console.log('remove character: ', character);
    }
}
    public filterQuery = "";
    public rowsOnPage = 10;
    public sortBy = "name";
    public sortOrder = "asc";