const myObservable$ = of<number[]>(1, 2, 3, 4, 5, 6);

myObservable$.subscribe({
  next: (value) => console.log("[next]: ", value),
  error: (error) => console.warn("[error]: ", error),
  complete: () => console.info("[complete] Secuencia terminada")
});

const myInput = $("#myInput");
const results = $("#results");

fromEvent(myInput, "keyup")
    .map((e) => e.target.value)
    .distinctUntilChanged()
    .debounceTime(500)
    .switchMap(getItems)
    .subscribe((items) => {
        results.empty();
        results.append(items.map((r) => $(`<li />`).text(r)));
    });

const obs$ = new Observable<string>(subscriber => {
  subscriber.next("Nuevo valor"); 
  subscriber.complete(); 
});

obs$.subscribe(resp => console.log(resp));

import { Observable } from 'rxjs';

// Creamos un Observable que emite números del 1 al 5 cada segundo
const observable = new Observable<number>(observer => {
  let count = 1;
  const intervalId = setInterval(() => {
    observer.next(count);
    count++;

    if (count > 5) {
      clearInterval(intervalId);
      observer.complete(); // Notificar que la emisión ha terminado
    }
  }, 1000);
});

// Observer que tiene tres métodos: next, error y complete, para manejar los valores emitidos, los errores y la finalización de la emisión, respectivamente
const observer = {
  next: (value: number) => console.log(`Valor recibido: ${value}`),
  error: (error: any) => console.error(`Ocurrió un error: ${error}`),
  complete: () => console.log('La emisión ha finalizado'),
};

// Creamos un Subscriber (opcional) del Observable para establecer la conexión entre el Observable y el Observer (o Subscriber). El Observer se pasa como argumento al método subscribe, lo que permite que el Observer reciba las notificaciones emitidas por el Observable
const subscriber = observable.subscribe(observer);

// Ejemplo adicional de uso del método subscribe, donde se proporcionan funciones separadas para manejar los valores, errores y la finalización de la emisión
observable.subscribe(
  value => console.log(`Valor recibido: ${value}`),
  error => console.error(`Ocurrió un error: ${error}`),
  () => console.log('La emisión ha finalizado')
);

import { Observable } from "rxjs";

// Con <string> especificamos el tipo de dato que va a devolver el Observable. Si no ponemos nada se considerará <unknown>
const obs$ = new Observable<string>(subscriber => {
    subscriber.next("Hola"); // next() emitirá el valor a los elementos suscritos
    subscriber.next("Mundo");
    subscriber.next("Test");
    subscriber.complete(); // Notificar que el observable ya no va a seguir emitiendo valores o que los valores siguientes ya no son de importancia
    // Por lo que al hacer el complete es posible que el observable siguiera emitiendo valores pero ya no hubiera una salida y por lo tanto sus dependientes no llegan a ser notificados

    subscriber.next("Esto no se ejecuta porque se ha ejecutado complete()");
});

/**
 * IMPORTANTE
 * Para que un Observable se ejecute tiene que tener por lo menos una suscripción (excepto en el caso de Subject)
 * porque el subscriber notificará a las suscripciones, y si no hay suscripciones no notificará nada
 */
obs$.subscribe(resp => console.log(resp));

import { Observable, Observer, Subject } from "rxjs";

/**
 * En este ejercicio tenemos un observable que emite cada segundo un número random
 * Si creo subs1 y subs2 para que se subscriban al observable, cada segundo se emitirá dos valores distintos, pero....
 * 
 *********** Qué pasaría si necesitamos que todas las subscripciones reciban el mismo valor? Para esto usamos Subject
 */
const observer: Observer<any> = {
    next: value => console.log("[next]: ", value),
    error: error => console.warn("[error]: ", error),
    complete: () => console.info("[completado]")
};

// Creamos intervalo que emite un número random cada segundo
const intervalo$ = new Observable<number>(subscriber => { // Observable que emitirá un number
    const intervalId = setInterval(() => subscriber.next(Math.random()), 1000);

    return () => {
        clearInterval(intervalId);
        console.log("Intervalo destruido");
    } 
});

// const subs1 = intervalo$.subscribe(rnd => console.log("subs1", rnd)); // Aquí se recibiría un valor emitido por el observable
// const subs2 = intervalo$.subscribe(rnd => console.log("subs2", rnd)); // Aquí se recibiría otro valor emitido por el observable (distinto al valor que recibe subs1)

/**
 * Creamos el subject
 * Características principales:
 *  - 1. Casteo múltiple: quiere decir que muchas suscripciones van a estar sujetas al mismo observable y por lo tanto se distribuirá la misma información a todos los lugares que estén suscritos
 *  - 2. También es un Observer
 *  - 3. También se puede manejar next, error y complete (puesto que también es un observer)
 */
const subject$ = new Subject(); // Al poner el simbolo de $ definimos que es un observable (buenas prácticas)
const subscription = intervalo$.subscribe(subject$); // Aquí podemos comprobar que un subject también es un observer. De esta manera, si creamo nuevas suscripciones:

const subs1 = subject$.subscribe(observer); // Aquí se recibirá un valor
const subs2 = subject$.subscribe(observer); // Aquí se recibirá el mismo valor que en subs1

setTimeout(() => {
    subject$.next(10); // Cómo es un observable, puedo emitir un valor
    subject$.complete(); // OJO! Este complete completa el subject, pero no el observable principal, por lo que el return del clearInterval() no se está ejecutando puesto que no es un UNSUBSCRIBE, así que sigue consumiendo memoria

    subscription.unsubscribe(); // Aquí si se ejecuta el return puesto que no estamos unsubscribiendo

    // Aquí podemos ver que el subject nos va a servir para insertar información al flujo de datos que el Observable intervalo$ está emitiendo

    // ****** Cuando la información es emitida por un observable en sí mismo, es considerado un "Cold Observable", pero cuando la información es emitida FUERA del observable (como en este caso del subject) es un Hot Observable
}, 3500);

const observable$ = of<number[]>(1, 2, 3, 4, 5, 6).subscribe(...)

const observable$ = fromEvent<MouseEvent>(document, "click");.subscribe(...)

const observable$ = const src$ = range(-5, 10); // La salida de esto será "-5, -4, -3, -2, -1, 0, 1, 2, 3, 4"
// Es decir, recorre un rango de 10 elementos empezando desde el -5!!!

const interval$ = interval(1000); // (*) Mientras no exista un suscripción este observable no emitirá valores
// El intervalo empezará en 0 por defecto

const timer$ = timer(2000);

console.log("Inicio comprobar asincronía timer");
timer$.subscribe(observer); // Aquí se emitirá el complete porque este observable lo emite al acabar!
console.log("Fin comprobar asincronía timer");

const task = () => console.log('it works!');

asyncScheduler.schedule(task, 2000);

// Para trabajar con operadores pasaremos antes el método pipe
// Con <number, number> especificamos que la entrada es un number y la salida otro number
range(1, 5).pipe(map<number, string>((value) => (value * 10).toString())).subscribe(console.log);

range(1, 10)
  .pipe(
    filter((value, index) => {
      console.log("El index es: ", index); // Aquí comprobamos que el index entra pero no es emitido
      return value % 2 === 1;
    })
  )
  .subscribe((val) => console.log("Valor recibido!!: ", val));

const numeros$ = range(1, 5);
numeros$
  .pipe(
    tap((x) => {
      console.log("tap antes de que se ejecute el subscribe", x);
      return 100;
    }),
    map((val) => val * 10),
    tap((x) => console.log("despues", x)),
    tap({ // Creamos un observer parcial
      next: valor => console.log("DESPUEESSSS", valor), // El next se ejecutará cada vez que el tap reciba el siguiente valor
      complete: () => console.log("Se terminó todo") // El complete se ejecutará cuando todo el observer se complete (POR ESO SIRVE PARA LA DEPURACIÓN)
    })
  )
  .subscribe((val) => console.log("subs", val));

interval(1000) // El primer valor que emite interval es 0
  .pipe(
    take(4), // Take COMPLETARÁ el observable después de la cantidad de veces que yo especifique dentro de el
    tap(console.log), // Debugeamos lo que fluye a través del observable en este instante
    reduce(totalReducer, 0) // No envio los paréntesis para no ejecutar la función en ese momento. El valor inicial será 0 (por defecto también)
  )
  .subscribe({
    next: (val) => console.log("next", val),
    complete: () => console.log("complete")
  });

const numbers = [1, 2, 3, 4, 5];
const totalReducer = (acumulador: number, valorActual: number) =>
  acumulador + valorActual;

// Reduce: tenemos una única emisión con el valor final
from(numbers)
  .pipe(reduce(totalReducer, 0))
  .subscribe((val) => console.log("Reduce val:", val));

// Scan: emite cada valor
from(numbers)
  .pipe(scan(totalReducer, 0))
  .subscribe((val) => console.log("Scan val:", val));

const numeros$ = of(1, 2, 3, 4, 5);
numeros$.pipe(
  tap(t => console.log(t)), // Con esto comprobamos que sólo emite 3 valores (correspondientes al take(3)) y que luego no sigue emitiendo los siguientes valores de la secuencia
  take(3)
)
.subscribe({
  next: (val) => console.log("next", val),
  complete: () => console.log("Completado"),
});

// Con esto solo se emitiría el primer click
const click$ = fromEvent<MouseEvent>(document, "click").pipe(first());
click$.subscribe({
  next: (val) => console.log("valor", val),
  complete: () => "completado",
});

const click1$ = fromEvent<MouseEvent>(document, "click").pipe(
  tap(console.log),
  first((event) => event.clientY > 150)
);
click1$.subscribe({
  next: (val) => console.log("valor click1", val),
  complete: () => "completado click1",
});

const click$ = fromEvent<MouseEvent>(document, "click").pipe(
  map(({ x, y }) => ({ x, y })),
  // takeWhile(({ y }) => y <= 150) // Cuando la condición se cumple emite el complete PERO no el elemento que "rompe" esa condición
  takeWhile(({ y }) => y <= 150, true) // Enviando true al parámetro "inclusive" hacemos que se devuelva ese elemento
);

click$.subscribe({
  next: (val) => console.log("next", val),
  complete: () => console.log("completado"),
});

// Creamos un botón para que emita un valor y podamos colocarle un valor
const boton = document.createElement("button");
boton.innerHTML = "Detener timer";
document.querySelector("body").append(boton);

const counter$ = interval(1000);
const clickBtn$ = fromEvent<MouseEvent>(boton, "click");

counter$.pipe(
  takeUntil(clickBtn$)
)
.subscribe({
  next: val => console.log("next", val),
  complete: () => console.log("Completado!!!") // El observable counter$ dejaría de emitir valores y se completaría en cuando se haga click en el botón y por lo tanto se emita su primer valor desdes el fromEvent
});

// Creamos un botón para que emita un valor y podamos colocarle un valor
const boton = document.createElement("button");
boton.innerHTML = "Detener timer";
document.querySelector("body").append(boton);

const counter$ = interval(1000);
const clickBtn$ = fromEvent<MouseEvent>(boton, "click").pipe(
  skip(2) // Esto saltaría el primer y segundo click y por lo tanto emitiría a partir del segundo click que es donde se completaría el takeUntil del observable counter$
)

counter$.pipe(
  takeUntil(clickBtn$)
)
.subscribe({
  next: val => console.log("next", val),
  complete: () => console.log("Completado!!!") // El observable counter$ dejaría de emitir valores y se completaría en cuando se haga click en el botón y por lo tanto se emita su primer valor desdes el fromEvent
});

/** Ejercicio simple */
const numeros$ = of(1, 1, 2, 3, 4, 4, 5, 5, 5, 6, 7, 8);
numeros$.pipe(distinct()).subscribe(console.log); // Aquí se ve simple porque utiliza el parámetro de equidad ===, por lo que puede saber si un número es igual a otro número
// Con el parámetro de equidad === obviamente se entiende que distinct no considerará 1 igual a "1" puesto que uno es un número y otro un string y evaluamos tanto el valor como el tipo con ===

/** Ejercicio con objetos */
interface Personaje {
  nombre: string;
}

const personajes: Personaje[] = [
  { nombre: "Megaman" }, // El problema es que este objeto no es igual
  { nombre: "Batman" },
  { nombre: "Megaman" }, // A este objeto aunque los dos sean visualmente iguales, por lo que el parámetro de equidad aquí no nos serviría
  { nombre: "Joker" },
  { nombre: "Megaman" },
  { nombre: "Batman" },
];

// En este caso deberemos darle más información al distinct para que sepa comparar estos objetos

from(personajes)
  .pipe(distinct((personaje) => personaje.nombre)) // Con este predicado decimos al distinct qué tiene que comparar
  .subscribe(console.log);

/** Ejercicio simple */
const numeros$ = of(1, 2, "2", 1, 2, 3, 4, 4, 5, 4, 5, 5, 6, 7, 8);
numeros$.pipe(distinctUntilChanged()).subscribe(console.log); // Aquí se ve simple porque utiliza el parámetro de equidad ===, por lo que puede saber si un número es igual a otro número

/** Ejercicio con objetos */
interface Personaje {
  nombre: string;
}

const personajes: Personaje[] = [
  { nombre: "Megaman" }, // El problema es que este objeto no es igual
  { nombre: "Megaman" }, // A este objeto aunque los dos sean visualmente iguales, por lo que el parámetro de equidad aquí no nos serviría
  { nombre: "Batman" },  
  { nombre: "Joker" },
  { nombre: "Megaman" },
  { nombre: "Batman" },
];

// En este caso deberemos darle más información al distinctUntilChanged para que sepa comparar estos objetos

from(personajes)
  // Con este predicado decimos al distinctUntilChanged qué tiene que comparar
  // La condición es que el predicado debe retornar un booleano, por lo que si es true lo que retorna, se considerarán iguales y por lo tanto el valor no se emitirá
  .pipe(distinctUntilChanged((anterior, actual) => anterior.nombre === actual.nombre)) 
  .subscribe(console.log);

/** Ejercicio con objetos */
interface Personaje {
  nombre: string;
}

const personajes: Personaje[] = [
  { nombre: "Megaman" }, // El problema es que este objeto no es igual
  { nombre: "Megaman" }, // A este objeto aunque los dos sean visualmente iguales, por lo que el parámetro de equidad aquí no nos serviría
  { nombre: "Batman" },  
  { nombre: "Joker" },
  { nombre: "Megaman" },
  { nombre: "Batman" },
];

// En este caso NO deberemos darle más información al distinctUntilKeyChanged para que sepa comparar estos objetos, sino que sólo le daremos la key que queremos que evalúe

from(personajes)  
  .pipe(distinctUntilKeyChanged("nombre")) 
  .subscribe(console.log);

const click$ = fromEvent<MouseEvent>(document, "click");

click$.pipe(
    // Si empiezo a hacer clicks se emitirá un valor 3 segundos después de haber hecho el último click, antes no
    // Si tuviera una búsqueda onkeyup, se emitirá el valor si transcurren 3 segundos sin que se haga ningún keyup
    // Por lo tanto, después de los 3 segundos se hará solamente UNA emisión
    debounceTime(3000) 
).subscribe(console.log);

// Ejemplo 2
const input = document.createElement("input");
document.querySelector("body").append(input);

const input$ = fromEvent(input, "keyup");
input$.pipe(
    debounceTime(1000),
    distinctUntilChanged() // Con esto controlamos además que la emisión se haga siempre que el valor no sea el mismo que el valor de la emisión anterior
).subscribe(console.log);

click$.pipe(
    // Si hago un click se emitirá y empezará el conteo de 3 segundos
    // Durante el conteo no se emitirá ningún valor y el siguiente valor se emitirá tras el conteo
    throttleTime(3000) 
).subscribe(console.log);

// Crea un observable que emite un valor cada 500 milisegundos
const observable = interval(500);

// Aplica sampleTime para obtener una muestra cada 2 segundos
// Solo obtendremos el último valor emitido dentro de cada intervalo de 2 segundos. Los valores intermedios se descartan
const sampledObservable = observable.pipe(sampleTime(2000));

// Suscríbete al sampledObservable para recibir las muestras
sampledObservable.subscribe(value => console.log(value));

// Crea un observable que emite un valor cada 500 milisegundos
const observable = interval(500);

// Crea un observable que emite un evento 'click'
const triggerObservable = fromEvent(document, 'click');

// Aplica el operador sample para obtener una muestra del último valor emitido por 'observable' cuando ocurre un evento 'click'
const sampledObservable = observable.pipe(sample(triggerObservable));

// Suscríbete al sampledObservable para recibir las muestras
sampledObservable.subscribe(value => console.log(value));

// Crea un observable que emite un valor cada 500 milisegundos
const observable = interval(500);

// Aplica el operador auditTime para obtener una muestra cada 2 segundos
const auditedObservable = observable.pipe(auditTime(2000));

// Suscríbete al auditedObservable para recibir las muestras
auditedObservable.subscribe(value => console.log(value));

import { of } from 'rxjs';
import { mergeAll } from 'rxjs/operators';

// Flujos de datos observables
const pares$ = of(2, 4, 6);
const impares$ = of(1, 3, 5);

// Combinación de los flujos y transformación
const numeros$ = of(pares$, impares$).pipe(
  mergeAll(),
  // Otros operadores de transformación si es necesario
);

// Suscripción al flujo resultante
// En este caso, pares$ devuelve un observable e impares$ devuelve otro. Con mergeAll() obtendremos todos los valores emitidos  por cada observable que está dentro del flujo principal
numeros$.subscribe(numero => console.log(numero));

const input = document.createElement("input");
document.querySelector("body").append(input);

const input$ = fromEvent<KeyboardEvent>(input, "keyup");

input$
  .pipe(
    debounceTime(500),
    map((texto) =>
      ajax.getJSON(`https://api.github.com/search/users?q=${texto}`)
      // Al utilizar mergeAll(), se suscribe a cada observable interno y se emiten sus valores
      // En este caso, el observable interno se crea con ajax.getJSON(), que realiza una solicitud HTTP a la URL proporcionada y devuelve un observable que emite la respuesta JSON
      // En cambio, si no se pone mergeAll(), el flujo de observables no se aplana y se suscribe directamente al observable que devuelve ajax.getJSON(). Debido a esto, solo se obtiene el observable en sí mismo, pero no se emite la respuesta JSON.
    ),
    mergeAll()
    // La función ajax.getJSON devuelve un observable que emite la respuesta JSON de la solicitud
    // mergeAll combina los observables emitidos por cada evento de teclado con el observable que emite la respuesta JSON
  )
  .subscribe((resp) => {
    console.log(resp);
  });

// Ejemplo 1
// Creamos un observable fuente con algunos valores
const source = of(1, 2, 3);

// Definimos una función que toma un valor y devuelve un observable con ese valor duplicado
const duplicate = (value: number) => of(value, value);

// Aplicamos mergeMap para transformar cada valor del observable fuente en un observable duplicado
const example = source.pipe(
  mergeMap(duplicate)
);

// Subscribimos y recibimos todas las emisiones de los observables resultantes
example.subscribe(value => console.log(value));

// Ejemplo 2: Calcular cuánto tiempo tiene el usuario el click pulsado
const mousedown$ = fromEvent(document, "mousedown");
const mouseup$ = fromEvent(document, "mouseup");
const interval$ = interval();

mousedown$.pipe(
  mergeMap(() => interval$.pipe(
    takeUntil(mouseup$)
  ))
).subscribe(console.log);

// Obtén el elemento de entrada de búsqueda del formulario
const searchInput = document.createElement("input");
document.querySelector("body").append(searchInput);

// Crea un observable desde el evento de entrada de búsqueda
const input$ = fromEvent(searchInput, 'input');

// Utiliza switchMap para realizar una solicitud de búsqueda cada vez que se ingresa un término de búsqueda
input$
  .pipe(
    switchMap((event: any) => {
      const term = event.target.value;

      return ajax.getJSON(`https://api.github.com/search/users?q=${term}`);
    })
  )
  .subscribe((response) => {
    console.log(response);
    // Realiza acciones con la respuesta de la API, como mostrar los resultados en la interfaz de usuario.
  });

// Si en este ejemplo usáramos mergeAll en lugar de switchMap, se realizarían múltiples solicitudes de búsqueda simultáneamente y las respuestas se fusionarían en el flujo de salida sin cancelar las solicitudes anteriores. Esto puede generar un orden de respuestas incorrecto y resultados obsoletos si el usuario ingresa rápidamente múltiples términos de búsqueda

// Obtén el elemento de entrada de búsqueda del formulario
const searchInput = document.createElement("input");
document.querySelector("body").append(searchInput);

// Crea un observable desde el evento de entrada de búsqueda
const input$ = fromEvent(searchInput, 'input');

// Utiliza concatMap para simular solicitudes de búsqueda secuenciales
input$
  .pipe(
    concatMap((event: any) => {
      const term = event.target.value;
      // Simula una solicitud de búsqueda con un retraso de 1 segundo
      return of(`Resultado para ${term}`).pipe(delay(1000));
    })
  )
  .subscribe((response) => {
    console.log(response);
    // Realiza acciones con el resultado de búsqueda, como mostrarlo en la interfaz de usuario.
  });

/*
Dentro de concatMap, se obtiene el término de búsqueda ingresado por el usuario a través de event.target.value. Luego, se utiliza of para crear un observable que emite un único valor, que en este caso es una cadena que representa el resultado de búsqueda para el término ingresado. Se utiliza delay para simular una solicitud de búsqueda que toma 1 segundo en completarse.
El operador concatMap se encarga de suscribirse secuencialmente a cada observable interno generado por el término de búsqueda ingresado. Cada observable se completa antes de que comience la suscripción al siguiente. Esto garantiza que las solicitudes de búsqueda se realicen en orden y se respete el flujo secuencial.
En la función de suscripción, puedes realizar acciones con el resultado de búsqueda, como mostrarlo en la interfaz de usuario o realizar cualquier otra lógica de manejo de datos necesaria.
En resumen, concatMap te permite transformar los valores de un observable en otro observable, manteniendo un orden secuencial en las suscripciones. Es útil cuando necesitas que las solicitudes o acciones se realicen de manera secuencial y respeten un orden específico.
*/

// Obtén el botón de inicio del temporizador
const startButton = document.createElement("button");
document.querySelector("body").append(startButton);

// Crea un observable desde el evento de clic en el botón
const click$ = fromEvent(startButton, 'click');

// Utiliza exhaustMap para iniciar un temporizador solo si no hay una suscripción activa
click$
  .pipe(
    exhaustMap(() =>
      interval(1000).pipe(
        take(5) // Limita el temporizador a 5 emisiones
      )
    )
  )
  .subscribe((value) => {
    console.log(value);
    // Realiza acciones con los valores emitidos por el temporizador
  });

const numeros$ = of(1, 2, 3);

numeros$.pipe(
    startWith(0) // 0 será la primera emisión antes de que el observable of emita sus valores
).subscribe(console.log);

const numeros$ = of(1, 2, 3);

numeros$.pipe(
    endWith(4) // 4 será la última emisión después de que el observable of emita sus valores
).subscribe(console.log);

const interval$ = interval(1000); // Este observable emitirá valores de manera secuencial cada 1000 milisegundos (1 segundo)

// En el siguiente ejemplo, concat combinará dos observables en uno solo y mantener un orden secuencial en las emisiones
// De forma que primero se emitirán los valores del primer observable y cuando se complete se emitirá los valores del segundo observable y así
concat(
    interval$.pipe(take(3)),
    interval$.pipe(take(2))
).subscribe(console.log);

const keyup$ = fromEvent(document, "keyup");
const click$ = fromEvent(document, "click");

merge( // La salida de este merge es el producto de ambas emisiones
    keyup$.pipe(pluck("type")), 
    click$.pipe(pluck("type"))
).subscribe(console.log);

const input1 = document.createElement("input");
const input2 = document.createElement("input");

input1.placeholder = "[email protected]";
input2.placeholder = "***************";
input2.type = "password";
document.querySelector("body").append(input1, input2);

// Helper
const getInputStream = (element: HTMLElement) =>
    fromEvent<KeyboardEvent>(element, "keyup").pipe(
        pluck("target", "value")
    );

combineLatest(
    getInputStream(input1),
    getInputStream(input2)
).subscribe(console.log); // Los valores se emitirán cuando cada observable interno haya emitido al menos un valor

const numeros$ = of(1,2,3,4);
const intervalo$ = interval(1000).pipe(take(3)); // Limitamos a 3 emisiones con take puesto que el observable debe ser finito e interval es infinito
const letras$ = of("a", "b", "c").pipe(delay(3500));

forkJoin({
    numeros$,
    intervalo$,
    letras$
}).subscribe(resp => {
    console.log(resp);
});

forkJoin({
    usuario: ajax.getJSON(`${GITHUB_API_URL}/${GITHUB_USER}`),
    repos: ajax.getJSON(`${GITHUB_API_URL}/${GITHUB_USER}/repos`),
    gists: ajax.getJSON(`${GITHUB_API_URL}/${GITHUB_USER}/gists`),
  }).subscribe(console.log); // Se realizarán las tres peticiones de manera simultánea y cuando se terminen se emitirán al subscriber

// Ejemplo Hot Observable
import { Subject } from 'rxjs';

// Creamos un subject como hot observable
const hotObservable = new Subject<number>();

// Emitimos números cada segundo
let count = 0;
setInterval(() => {
  hotObservable.next(count++);
}, 1000);

// Suscripción 1 al hot observable
hotObservable.subscribe((value) => {
  console.log(`Suscriptor 1: ${value}`);
});

setTimeout(() => {
  // Suscripción 2 al hot observable después de 3 segundos
  hotObservable.subscribe((value) => {
    console.log(`Suscriptor 2: ${value}`);
  });
}, 3000);

/*
En este ejemplo, utilizamos un Subject de RxJS como hot observable. Emitimos números cada segundo mediante hotObservable.next(count++). Cuando se suscribe el primer suscriptor, comienza a recibir los números en tiempo real. Después de 3 segundos, se suscribe un segundo suscriptor y también comienza a recibir los números desde ese punto en adelante.
*/

// Ejemplo Cold Observable
import { Observable } from 'rxjs';

// Creamos un cold observable que emite números cuando hay un suscriptor
const coldObservable = new Observable<number>((observer) => {
  let count = 0;

  // Emitimos números cada 500 ms cuando hay un suscriptor
  const intervalId = setInterval(() => {
    observer.next(count++);
  }, 500);

  // Manejamos la limpieza cuando no hay suscriptores
  return () => {
    clearInterval(intervalId);
  };
});

// Suscripción 1 al cold observable
coldObservable.subscribe((value) => {
  console.log(`Suscriptor 1: ${value}`);
});

setTimeout(() => {
  // Suscripción 2 al cold observable después de 3 segundos
  coldObservable.subscribe((value) => {
    console.log(`Suscriptor 2: ${value}`);
  });
}, 3000);

/*
En este ejemplo, el cold observable emite números cada 500 ms solo cuando hay suscriptores presentes. Cuando se suscribe el primer suscriptor, comienza a recibir los números desde el principio. Después de 3 segundos, se suscribe un segundo suscriptor y también comienza a recibir los números desde el principio, pero con un desfase de tiempo respecto al primer suscriptor debido al intervalo de emisión de números.
*/

/*
Usamos Subject porque un Observable en RxJS no tiene la capacidad de emitir eventos de forma independiente sin suscriptores. Los observables comunes solo comienzan a emitir eventos cuando se suscriben a ellos.
*/