import {Component} from '@angular/core';
import {select, Store} from "@ngrx/store";
import {Account} from 'projects/mastodon-api/src/public-api';
import {Observable} from "rxjs";
import {selectCurrentAccount} from "../../shared/state/store";
import {ThemeService} from "../../shared/services/theme.service";
import {InputSwitchOnChangeEvent} from "primeng/inputswitch";

@Component({
    selector: 'app-header',
    templateUrl: './header.component.html',
    styleUrls: ['./header.component.scss']
})
export class HeaderComponent {
    navOpen = false;
    navigationItems = [
        {title: 'Authorize', link: '/authorize'},
        {title: 'Stats', link: '/sync'},
        {title: 'Edit Lists', link: '/lists'},
        {title: 'List view', link: '/followings/list'},
        {title: 'Matrix View', link: '/followings/matrix'},
        {title: 'Table View', link: '/followings/table'},
    ];

    currentAccount$: Observable<Account | undefined>;

    isDarkThemeEnabled: boolean = this.themeService.isDarkThemeEnabled();

    constructor(private store: Store, private themeService: ThemeService) {
        this.currentAccount$ = this.store.pipe(select(selectCurrentAccount));
    }

    toggleTheme(event: InputSwitchOnChangeEvent) {
        this.themeService.setTheme(event.checked ? 'dark' : 'light')
    }
}
