import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { ApiRequestService } from 'src/app/services/api/api-request.service';
import { UiComponent } from './chart-config-manager.component';

@Injectable({
  providedIn: 'root'
})
export class UiComponentService {
  private uiComponentsUrl = 'api/ui-components';

  constructor(private apiRequest: ApiRequestService) { }

  // Get all UI components for a chart type
  getUiComponentsByChartType(chartTypeId: number): Observable<UiComponent[]> {
    const url = `${this.uiComponentsUrl}/chart-type/${chartTypeId}`;
    console.log(`Fetching UI components for chart type ${chartTypeId} from ${url}`);
    return this.apiRequest.get(url);
  }

  // Get UI component by ID
  getUiComponentById(id: number): Observable<UiComponent> {
    const url = `${this.uiComponentsUrl}/${id}`;
    console.log(`Fetching UI component ${id} from ${url}`);
    return this.apiRequest.get(url);
  }

  // Create new UI component
  createUiComponent(uiComponent: Partial<UiComponent>): Observable<UiComponent> {
    console.log('Creating UI component:', uiComponent);
    return this.apiRequest.post(this.uiComponentsUrl, uiComponent);
  }

  // Update UI component
  updateUiComponent(id: number, uiComponent: UiComponent): Observable<UiComponent> {
    const url = `${this.uiComponentsUrl}/${id}`;
    console.log(`Updating UI component ${id}:`, uiComponent);
    return this.apiRequest.put(url, uiComponent);
  }

  // Delete UI component
  deleteUiComponent(id: number): Observable<void> {
    const url = `${this.uiComponentsUrl}/${id}`;
    console.log(`Deleting UI component ${id}`);
    return this.apiRequest.delete(url);
  }
}