import PageComponentProps from "../../PageComponentProps";
import ObjectID from "Common/Types/ObjectID";
import Navigation from "Common/UI/Utils/Navigation";
import React, {
  Fragment,
  FunctionComponent,
  ReactElement,
  useEffect,
  useState,
} from "react";
import AlertsTable from "../../../Components/Alert/AlertsTable";
import { PromiseVoidFunction } from "Common/Types/FunctionTypes";
import ModelAPI from "Common/UI/Utils/ModelAPI/ModelAPI";
import ListResult from "Common/Types/BaseDatabase/ListResult";
import { LIMIT_PER_PROJECT } from "Common/Types/Database/LimitMax";
import API from "Common/UI/Utils/API/API";
import ErrorMessage from "Common/UI/Components/ErrorMessage/ErrorMessage";
import PageLoader from "Common/UI/Components/Loader/PageLoader";
import ServiceMonitor from "Common/Models/DatabaseModels/ServiceMonitor";
import Includes from "Common/Types/BaseDatabase/Includes";
import Query from "Common/Types/BaseDatabase/Query";
import Alert from "Common/Models/DatabaseModels/Alert";

const ServiceAlerts: FunctionComponent<
  PageComponentProps
> = (): ReactElement => {
  const modelId: ObjectID = Navigation.getLastParamAsObjectID(1);

  const [monitorIds, setMonitorIds] = useState<Array<ObjectID> | null>(null);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [error, setError] = useState<string | null>(null);

  const fetchMonitorsInService: PromiseVoidFunction =
    async (): Promise<void> => {
      try {
        setIsLoading(true);
        const serviceMonitors: ListResult<ServiceMonitor> =
          await ModelAPI.getList<ServiceMonitor>({
            modelType: ServiceMonitor,
            query: {
              serviceId: modelId,
            },
            select: {
              monitorId: true,
            },
            limit: LIMIT_PER_PROJECT,
            skip: 0,
            sort: {},
          });

        const ids: ObjectID[] = serviceMonitors.data.map(
          (serviceMonitor: ServiceMonitor) => {
            return serviceMonitor.monitorId!;
          },
        );

        setMonitorIds(ids);
        setIsLoading(false);
      } catch (err) {
        setIsLoading(false);
        setError(API.getFriendlyMessage(err));
      }
    };

  useEffect(() => {
    fetchMonitorsInService().catch((err: Error) => {
      setError(API.getFriendlyMessage(err));
    });
  }, []);

  if (error) {
    return <ErrorMessage message={error} />;
  }

  if (isLoading || monitorIds === null) {
    return <PageLoader isVisible={true} />;
  }

  const query: Query<Alert> = {
    monitorId: new Includes(monitorIds),
  };

  return (
    <Fragment>
      <AlertsTable
        query={query}
        title="Service Alerts"
        description="Alerts generated by monitors attached to this service."
        noItemsMessage={"No alerts found for this service."}
      />
    </Fragment>
  );
};

export default ServiceAlerts;
