import {Component} from '@angular/core';
import {select, Store} from "@ngrx/store";
import {fromSyncPage, selectCurrentInstance, selectFollowings, selectListsWithAccounts, selectLoading} from "../../shared/state/store";
import {Observable} from "rxjs";
import {Account, List} from 'projects/mastodon-api/src/public-api';

@Component({
    selector: 'app-sync',
    templateUrl: './sync.component.html',
    styleUrls: ['./sync.component.scss']
})
export class SyncComponent {
    loading$: Observable<boolean>;
    followings$: Observable<ReadonlyArray<Account>>;
    lists$: Observable<List[]>;
    instanceName$: Observable<string | undefined>;

    constructor(private store: Store) {
        this.instanceName$ = this.store.pipe(select(selectCurrentInstance));
        this.followings$ = this.store.pipe(select(selectFollowings))
        this.lists$ = this.store.pipe(select(selectListsWithAccounts));
        this.loading$ = this.store.pipe(select(selectLoading));
    }

    loadListsAndAccounts() {
        this.store.dispatch(fromSyncPage.loadLists());
        this.store.dispatch(fromSyncPage.loadFollowings());
    }

}
