import { fromEvent, throwError } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { catchError, mergeMap, tap } from 'rxjs/operators';

const login = document.getElementById('login') as HTMLFormElement;
const email = document.getElementById('email') as HTMLInputElement;
const password = document.getElementById('password') as HTMLInputElement;
fromEvent(login, 'submit')
  .pipe(
    tap((event) => event.preventDefault()),
    mergeMap((event) =>
      ajax
        .post('https://reqres.in/api/login', {
          email: email.value,
          password: password.value
        })
        .pipe(
          catchError((error) => {
            debugger;
            console.error(error);
            return throwError(error);
          })
        )
    )
  )
  .subscribe({
    error: (e) => console.error('observer', e),
    next: (value) => console.log('next', value),
    complete: () => console.log('complete')
  });