import {Component} from '@angular/core';
import {PersistentStore} from "../../shared/state/persistent/persistent-store.service";
import {Account, List, MastodonApiListsService} from 'projects/mastodon-api/src/public-api';
import {NbToastrService} from "@nebular/theme";
import {ListService} from "../../shared/services/list.service";
import {Observable} from "rxjs";
import {select, Store} from "@ngrx/store";
import {selectFilteredFollowingsWithLists, selectFollowings, selectFollowingsWithLists, selectLists} from "../../shared/state/store/selectors";
import {FiltersActions, ListActions, MastodonApiActions} from "../../shared/state/store/actions";

@Component({
    selector: 'app-list',
    templateUrl: './list.component.html',
    styleUrls: ['./list.component.scss']
})
export class ListComponent {
    followings$: Observable<ReadonlyArray<Account>>;
    lists$: Observable<ReadonlyArray<List>>;

    constructor(private store: Store) {
        this.followings$ = this.store.pipe(select(selectFilteredFollowingsWithLists));
        this.lists$ = this.store.pipe(select(selectLists));
    }

    addAccountToSelectedList(accountId: string, select: HTMLSelectElement) {
        this.store.dispatch(ListActions.addAccountToList({accountId, listId: select.value}));
    }

    removeAccountFromList(accountId: string, listId: string) {
        this.store.dispatch(ListActions.removeAccountFromList({accountId, listId}));
    }

}