import React, { useState, useEffect, useMemo } from 'react';
import './index.css';
import { ServerTable } from './components/ServerTable';
import axios from 'axios';
import urlJoin from "url-join";

const ServerIndex = () => {
  const [heartbeats, setHeartbeats] = useState([]);

  useEffect(async () => {
    try {
      const response = await axios.get(
        urlJoin(window.TELEMETRY_SERVER_URL || '/', '/heartbeats'),
      );
      setHeartbeats(response.data);
    } catch (error) {
      alert('No servers found, please refresh the page and try again.');
      console.log(error);
    }
  }, []);

  const serverList = useMemo(() => {
    return heartbeats.reduce(
      function (acc, obj) {
        if (!acc.serverByDisplayName[obj.displayName]) {
          acc.serverByDisplayName[obj.displayName] = [];
          acc.serverByDisplayNameByHostName[obj.displayName] = [];
        }
        if (!acc.serverByDisplayNameByHostName[obj.displayName][obj.hostName]) {
          acc.serverByDisplayNameByHostName[obj.displayName][obj.hostName] = [];
        }
        if (!acc.serverByDisplayName[obj.displayName][obj.hostName]) {
          acc.serverByDisplayName[obj.displayName].push(obj);
          acc.serverByDisplayNameByHostName[obj.displayName][obj.hostName].push(
            obj,
          );
        }

        return acc;
      },
      {
        serverByDisplayName: {},
        serverByDisplayNameByHostName: {},
      },
    );
  }, [heartbeats]);

  return (
    <div className="network-container">
      <div className="">
        <h1 className="text-gray-500 ml-4 text-2xl p-3">Servers</h1>
        <ServerTable heartbeats={heartbeats} serverList={serverList} />
      </div>
    </div>
  );
};

ServerIndex.propTypes = {};

export { ServerIndex };