import React, { useState, useEffect } from "react";
import type { TableColumn } from "@dynatrace/strato-components-preview/tables";
import { DataTable } from "@dynatrace/strato-components-preview/tables";
import { Entity, monitoredEntitiesClient } from "@dynatrace-sdk/client-classic-environment-v2";
import { ProgressCircle } from "@dynatrace/strato-components-preview";

export const HostsTable = () => {
  const [hostEntities, setHostEntities] = useState<Entity[] | undefined>();

  useEffect(() => {
    monitoredEntitiesClient
      .getEntities({
        entitySelector: 'type("HOST")',
        fields: "properties.monitoringMode, properties.ipAddress, properties.osVersion, properties.osType",
      })
      .then((response) => setHostEntities(response.entities));
  }, []);

  const columns: TableColumn[] = [
    {
      header: "Host Name",
      accessor: "displayName",
      ratioWidth: 1,
    },
    {
      header: "IP Address",
      accessor: "properties.ipAddress[0]",
      ratioWidth: 1,
    },
    {
      header: "Monitoring Mode",
      accessor: "properties.monitoringMode",
      ratioWidth: 1,
    },
    {
      header: "Operating System",
      accessor: "properties.osType",
      ratioWidth: 1,
    },
    {
      header: "Operating Version",
      accessor: "properties.osVersion",
      ratioWidth: 1,
    },
  ];

  if (hostEntities === undefined) return <ProgressCircle />;
  return <DataTable columns={columns} data={hostEntities} />;
};