import { APIError } from "#lib/api";
import { DescriptionList, DescriptionSection } from "#components/lists";
import { Preformatted } from "#components/formatting";

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

export function APIErrorView({ routePathPattern, error }: IProps) {
  const { name, message, request, response } = error;

  return (
    <DescriptionList>
      <DescriptionSection
        dKey="Route"
        dValue={<Preformatted>{routePathPattern}</Preformatted>}
      />

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

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

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

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

      <DescriptionSection
        dKey="Response"
        dValue={
          <DescriptionList>
            <DescriptionSection
              dKey="URL"
              dValue={<Preformatted>{response.url}</Preformatted>}
            />

            <DescriptionSection
              dKey="Is okay?"
              dValue={!response.ok ? <>No</> : <>Yes</>}
            />

            <DescriptionSection
              dKey="Status"
              dValue={<Preformatted>{response.status}</Preformatted>}
            />

            <DescriptionSection
              dKey="Status text"
              dValue={<Preformatted>{response.statusText}</Preformatted>}
            />

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