import React from 'react';
import './ServerTable.css';
import { Tag } from '@therms/atalaya';
import { Card } from '@therms/atalaya';
import { Stack } from '@therms/atalaya';
import { Inline } from '@therms/atalaya';
import TimeAgo from 'react-timeago';

export const ServerTable = (props) => {
  return (
    <div>
      {Object.entries(props.serverList.serverByDisplayNameByHostName).map(
        ([displayName, hostName]) => (
          <Card key={displayName} className="m-3 py-3" background="surface">
            <div>
              <span className="font-bold text-lg ">
                {displayName.toUpperCase()}
              </span>
              <div>
                {Object.keys(hostName).map((server) => {
                  const severDetails =
                    props.serverList.serverByDisplayNameByHostName[displayName][
                      server
                    ][0];
                  return (
                    <div key={severDetails.ephemeralId}>
                      <Card className="my-3" background="surface-strong">
                        <Inline alignX="between">
                          <Stack
                            key={hostName}
                            className="host-name"
                            space="base"
                          >
                            <div className="font-bold">{server}</div>

                            <div>{severDetails.ephemeralId}</div>
                          </Stack>
                          <Stack space="base">
                            <Inline space="base">
                              <h3>Server Started:</h3>
                              <TimeAgo date={severDetails.startTime} />
                            </Inline>
                            <Inline space="base" alignX="end">
                              {severDetails.gatewayHttpServer && (
                                <div>
                                  <Tag variant="positive" value="HTTP" />
                                </div>
                              )}
                              {severDetails.gatewayWebSocketServer && (
                                <div>
                                  <Tag variant="main" value="WS" />
                                </div>
                              )}
                            </Inline>
                          </Stack>
                        </Inline>
                      </Card>
                    </div>
                  );
                })}
              </div>
            </div>
          </Card>
        ),
      )}
    </div>
  );
};