import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Store } from '@ngrx/store';
import { Blog, BlogService } from '../root-service/blog.service';
import { Observable } from 'rxjs';

@Component({
    selector: 'app-root-blog-details',
    templateUrl: './root-blog-details.component.html',
    styleUrls: ['./root-blog-details.component.css'],
})
export class RootBlogDetailsComponent implements OnInit {
    storeData: any;
    constructor(public store: Store<any>, private route: ActivatedRoute, private blogService: BlogService) {
        this.initStore();
    }

    blogId: number | null = null;
    blog: Observable<Blog> | null = null;

    ngOnInit(): void {
        // Retrieve the blog ID from the route parameters
        this.route.paramMap.subscribe((params) => {
            this.blogId = Number(params.get('id')); // Get 'id' from the route
            if (this.blogId) {
                this.loadBlogDetails(this.blogId);
            }
        });
    }
    loadBlogDetails(blogId: number) {
        this.blog = this.blogService.getBlog(blogId);
    }

    async initStore() {
        this.store
            .select((d) => d.index)
            .subscribe((d) => {
                this.storeData = d;
            });
    }
}
