import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { environments } from '../../../../environments/environments';
import { Personalizar } from '../interfaces/Personalizar.interface';
import { Observable, Subject } from 'rxjs';
import { tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class PersonalizarService {
  private URL: string = environments.baseUrl;
  private dataUpdated = new Subject<void>(); // <-- Esto hacía falta

  constructor(private http: HttpClient) {}

  private getHeaders(): HttpHeaders {
    const token = localStorage.getItem('token') || '';
    return new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`
    });
  }

  getOptions() {
    return this.http.get(`${this.URL}/personalizarInfo`);
  }

  personalizar(personalizar: Personalizar) {
    return this.http.put(`${this.URL}/personalizar`, personalizar, { headers: this.getHeaders() });
  }

  eliminarArchivo(rutaArchivo: string): Observable<any> {
    return this.http.post(`${this.URL}/eliminarPerlogo`, { rutaArchivo }, {
      headers: this.getHeaders()
    }).pipe(
      tap(() => this.dataUpdated.next())
    );
  }

  // Este método permite a otros componentes suscribirse a los cambios
  onDataUpdated(): Observable<void> {
    return this.dataUpdated.asObservable();
  }

   getPERLOGO1(): Observable<{ PERLOGO1: string | null }> {
    return this.http.get<{ PERLOGO1: string | null }>(`${this.URL}/personalizar/perlogo1`, {
      headers: this.getHeaders()
    });
  }

  getPERLOGO2(): Observable<{ PERLOGO2: string | null }> {
    return this.http.get<{ PERLOGO2: string | null }>(`${this.URL}/personalizar/perlogo2`, {
      headers: this.getHeaders()
    });
  }
}
