import { APIError, APIV2Error } from "#lib/api";
import { HTTP_STATUS } from "#lib/http";
import { DescriptionList, DescriptionSection } from "#components/lists";

interface IAPIErrorViewProps {
  routePathPattern: string;
  error: APIError;
}

interface IAPIV2ErrorViewProps {
  routePathPattern: string;
  error: APIV2Error;
}

export function APIErrorView({ routePathPattern, error }: IAPIErrorViewProps) {
  const { name, message, request, response } = error;
  const { status } = response;
  const errorOrigin =
    status >= HTTP_STATUS.INTERNAL_SERVER_ERROR
      ? status === HTTP_STATUS.SERVICE_UNAVAILABLE
        ? "Server (no need to report since owner should be aware of it)"
        : "Server"
      : "Client (this browser and/or this site's scripts and/or client's network)";

  return (
    <DescriptionList>
      <DescriptionSection
        dKey="Originated from"
        dValue={errorOrigin}
        isValuePreformatted
      />

      <DescriptionSection
        dKey="Page"
        dValue={routePathPattern}
        isValuePreformatted
      />

      <DescriptionSection
        dKey="Name"
        dValue={name}
        isHorizontal
        isValuePreformatted
      />

      <DescriptionSection dKey="Message" dValue={message} isValuePreformatted />

      <DescriptionSection
        dKey="Request"
        dValue={
          <DescriptionList>
            <DescriptionSection
              dKey="URL"
              dValue={request.url}
              isValuePreformatted
            />

            <DescriptionSection
              dKey="Method"
              dValue={request.method}
              isHorizontal
              isValuePreformatted
            />
          </DescriptionList>
        }
      />

      <DescriptionSection
        dKey="Response"
        dValue={
          <DescriptionList>
            {request.url !== response.url && (
              <DescriptionSection
                dKey="URL"
                dValue={response.url}
                isValuePreformatted
              />
            )}

            <DescriptionSection
              dKey="Status code"
              dValue={response.status}
              isHorizontal
              isValuePreformatted
            />

            {response.statusText && (
              <DescriptionSection
                dKey="Status text"
                dValue={response.statusText}
                isValuePreformatted
              />
            )}

            <DescriptionSection
              dKey="Type"
              dValue={response.type}
              isHorizontal
              isValuePreformatted
            />
          </DescriptionList>
        }
      />
    </DescriptionList>
  );
}

export function APIV2ErrorView({
  routePathPattern,
  error,
}: IAPIV2ErrorViewProps) {
  const {
    name,
    message,
    request,
    response,
    pathSpec,
    error: responseError,
  } = error;
  const { status } = response;
  const errorOrigin =
    status >= HTTP_STATUS.INTERNAL_SERVER_ERROR
      ? status === HTTP_STATUS.SERVICE_UNAVAILABLE
        ? "Server (no need to report since owner should be aware of it)"
        : "Server"
      : "Client (this browser and/or this site's scripts and/or client's network)";

  return (
    <DescriptionList>
      <DescriptionSection
        dKey="Originated from"
        dValue={errorOrigin}
        isValuePreformatted
      />

      <DescriptionSection
        dKey="Page"
        dValue={routePathPattern}
        isValuePreformatted
      />

      <DescriptionSection
        dKey="API version"
        dValue={2}
        isHorizontal
        isValuePreformatted
      />

      <DescriptionSection dKey="Route" dValue={pathSpec} isValuePreformatted />

      <DescriptionSection
        dKey="Method"
        dValue={request.method}
        isHorizontal
        isValuePreformatted
      />

      <DescriptionSection
        dKey="Response status code"
        dValue={response.status}
        isHorizontal
        isValuePreformatted
      />

      <DescriptionSection
        dKey="Name"
        dValue={responseError?.type ? responseError?.type : name}
        isHorizontal
        isValuePreformatted
      />

      <DescriptionSection
        dKey="Message"
        dValue={
          responseError?.message
            ? `${message}\n${responseError.message}`
            : message
        }
        isValuePreformatted
      />
    </DescriptionList>
  );
}
