import React from "react"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableRow,
  Card,
  CardHeader,
  CardContent,
} from "@material-ui/core"

type Route = {
  pod: string
  pod_id: string
  start_time: string
  end_time?: string
}

type RoutesTableProps = {
  routes: Route[] | undefined
}

const getElapsedTime = (
  startTime: string,
  endTime: string | undefined
): string => {
  if (!startTime || !endTime) return "Process is still ongoing"

  const startDate = new Date(startTime)
  const endDate = new Date(endTime)

  return `${Math.floor(endDate.getTime() - startDate.getTime())} ms`
}

const RoutesTable = ({ routes }: RoutesTableProps) => {
  return (
    <Card>
      <CardHeader
        title="Routes (List of Pods)"
        titleTypographyProps={{ variant: "subtitle1" }}
      />
      {routes && routes?.length && (
        <CardContent>
          <Table>
            <TableHead>
              <TableRow>
                <TableCell>Pod</TableCell>
                <TableCell>Pod Id</TableCell>
                <TableCell>Start time</TableCell>
                <TableCell>End time</TableCell>
                <TableCell>Elapsed Time</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {routes.map((route) => {
                const { pod_id, pod, start_time, end_time } = route
                return (
                  <TableRow key={pod_id}>
                    <TableCell> {pod} </TableCell>
                    <TableCell>{pod_id}</TableCell>
                    <TableCell>{start_time}</TableCell>
                    <TableCell>{end_time}</TableCell>
                    <TableCell>
                      {getElapsedTime(start_time, end_time)}
                    </TableCell>
                  </TableRow>
                )
              })}
            </TableBody>
          </Table>
        </CardContent>
      )}
    </Card>
  )
}

export default RoutesTable