import { Component, OnInit } from '@angular/core';
import { CommonModule } from "@angular/common";
import { ActivatedRoute, Router, RouterLink, RouterLinkActive, RouterOutlet } from "@angular/router";
import { ApiService } from "../../shared/services/api.service";
import { InfoComponent } from "../info/info.component";
import { OriginComponent } from "../origin/origin.component";
import { TimelineComponent } from "../timeline/timeline.component";

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [CommonModule, RouterLink, RouterLinkActive, RouterOutlet, InfoComponent, OriginComponent, TimelineComponent],
  templateUrl: './home.component.html',
  styleUrl: './home.component.scss',
  providers: [ApiService]
})
export class HomeComponent implements  OnInit {
  id = '';
  data$: any;
  tab: 'info' | 'origin' | 'timeline' = 'info';
  constructor(private route: ActivatedRoute, private api$: ApiService, private router: Router) {
    this.route.params.subscribe((params) => {
      this.id = params['id'];
    });
  }
  ngOnInit() {
    if (!this.id) {
      this.router.navigate(['**']).then();
    }
    this.api$.getData(this.id).subscribe((res) => {
      console.log(res);
    }, () => {
      this.router.navigate(['/']);
    });
    this.data$ = this.api$.data$;
  }

}
