import { RequestResponse } from "~hooks/useRequests";
import * as React from "react";
import classNames from "classnames";

import { Badge, Card, Col, Row } from "react-bootstrap";

interface RequestSummaryProps {
  selected?: boolean;
  requestResponse: RequestResponse;
}

function isBetween(value: number, min: number, max: number) {
  return value >= min && value <= max;
}

function calcBadgeVariant(statusCode: number | undefined): string {
  if (statusCode === undefined) {
    return "secondary";
  } else if (isBetween(statusCode, 100, 199)) {
    return "info";
  } else if (isBetween(statusCode, 200, 299)) {
    return "success";
  } else if (isBetween(statusCode, 300, 399)) {
    return "primary";
  } else if (isBetween(statusCode, 400, 499)) {
    return "danger";
  } else if (isBetween(statusCode, 500, 599)) {
    return "warning";
  }
}

export default function RequestSummary({
  requestResponse: { request, response },
  selected = false,
}: RequestSummaryProps) {
  return (
    <Row>
      <Col className="flex-grow-0 d-flex align-items-center">
        {request.method}
      </Col>
      <Col className="flex-grow-1">{request.path}</Col>
      <Col className="flex-grow-0 d-flex align-items-center">
        <Badge
          className={classNames({
            border: selected,
          })}
          bg={calcBadgeVariant(response?.status)}
        >
          {response?.status ?? "Loading..."}
        </Badge>
      </Col>
    </Row>
  );
}