// Router

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { ApiComponent } from './components/api/api.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'api', component: ApiComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

// App Module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { ApiComponent } from './components/api/api.component';
import { NavComponent } from './components/nav/nav.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ApiComponent,
    NavComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// API-Components

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { filter, map, tap } from 'rxjs/operators';

interface Task {
  id: number;
  user_id: number;
  title: string;
  due_on: string;
  status: string;
}

@Component({
  selector: 'app-api',
  templateUrl: './api.component.html',
  styleUrls: ['./api.component.css']
})
export class ApiComponent implements OnInit {

  tasks: Task[] = [];
  secondPendingTask: Task | undefined;

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.getSecondPendingTask()
      .subscribe(task => {
        this.secondPendingTask = task;
      }, error => {
        console.error('Error fetching task:', error);
      });
  }

  getSecondPendingTask(): Observable<Task> {
    return this.http.get<Task[]>('https://gorest.co.in/public/v2/todos')
      .pipe(
        // Filter tasks with status 'pending'
        filter(tasks => tasks.length > 1 && tasks[1].status === 'pending'),
        // Map to the second pending task (if found)
        map(tasks => tasks[1]),
        // Handle the case where no second pending task exists
        tap(task => {
          if (!task) {
            console.log('No second pending task found');
          }
        })
      );
  }
}

<h1 class="display-4">API</h1>
<p class="lead">Api works!</p>

<div class="bg-light">
  <ul class="list-unstyled">
    <li *ngIf="secondPendingTask">
      (task Id: {{ secondPendingTask.id}}) **Second Pending Task:** <span>{{ secondPendingTask.title }} </span> (status:
      {{ secondPendingTask.status }})
    </li>
    <li *ngIf="!secondPendingTask">
      No second pending task found.
    </li>
  </ul>
</div>