import { useEffect, useState } from 'react';
import { useApi, errorApiRef } from '@backstage/core-plugin-api';
import { catalogApiRef } from '@backstage/plugin-catalog-react';
import { Entity } from '@backstage/catalog-model';

export function useSazonComponents(): {
  components: Entity[] | null;
  loading: boolean;
} {
  const catalogApi = useApi(catalogApiRef);
  const errorApi = useApi(errorApiRef);
  const [components, setComponents] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    catalogApi
      .getEntities({ filter: { kind: 'Component', 'spec.system': 'sazon-restaurant' } })
      .then(res => setComponents(res.items))
      .catch(err => errorApi.post(err))
      .finally(() => setLoading(false));
  }, [catalogApi, errorApi]);

  return { components, loading };
}

export function useCustomSazonStatus(): { rows: { service: string; status: string }[] | null } {
  const [rows, setRows] = useState<{ service: string; status: string }[] | null>(null);
  useEffect(() => {
    // /api/sazon-status is proxied to the backend (see app-config dev server).
    fetch('/api/sazon/status')
      .then(r => r.json())
      .then(j => setRows(j.rows ?? []))
      .catch(() => setRows([]));
  }, []);
  return { rows };
}