import { Component, ErrorHandler, inject } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpErrorResponse,
  HTTP_INTERCEPTORS,
  httpResource,
  provideHttpClient,
  withInterceptorsFromDi,
  HttpClient,
} from '@angular/common/http';

@Component({
  selector: 'app-root',
  template: `
   <button (click)="onHttpClient()">httpClient</button>
   <button (click)="onError()">error</button>
  `,
})
export class App {
  httpClient = inject(HttpClient);

  httpResource = httpResource(
    {
      url: `http://111/api/httpResource`,
      method: 'GET',
    },
    {
      defaultValue: null,
    }
  );

  onHttpClient() {
    this.httpClient.get(`http://111/api/httpClient`).subscribe(console.log);
  }

  onError() {
    throw Error('test');
  }
}

class MyInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        console.log('MyInterceptor', error);
        return throwError(() => error);
      })
    );
  }
}

class MyErrorHandler implements ErrorHandler {
  handleError(error: any) {
    console.log('MyErrorHandler', error);
    alert('Error!' + error.message);
  }
}

bootstrapApplication(App, {
  providers: [
    provideHttpClient(withInterceptorsFromDi()),
    {
      provide: ErrorHandler,
      useClass: MyErrorHandler,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MyInterceptor,
      multi: true,
    },
  ],
});