import React, {useEffect, useState} from 'react'
import BrowserOnly from '@docusaurus/BrowserOnly'
import { useLocation } from '@docusaurus/router'

import DownloadLabel from '@components/DownloadLabel'
import VersionSelect from '@components/VersionSelect'
import useVersion from '@lib/utils/useVersion'

const SCHEMA_BASE_URL = 'https://schema.fitko.de/fit-connect'

export default function ApiSpec(props) {
  const {artifact, path, gitlabProjectId, includePrerelease, includePrereleaseVersion} = props
  let { version } = props
  const search = useLocation().search;
  const queryVersion = new URLSearchParams(search).get('version');
  const [versionList, selectedVersion, setSelectedVersion] =
    useVersion(version, queryVersion, gitlabProjectId, includePrerelease, includePrereleaseVersion)

  return (
    <BrowserOnly fallback={<div>Lädt...</div>}>
      {() => {
        import('rapidoc')

        return (
          <div>
            <p> Diese API-Spezifikation {selectedVersion &&
              <DownloadLabel baseURL={`${SCHEMA_BASE_URL}/${path}`} version={selectedVersion} artifact={artifact} label="OpenAPI"/>}.
            </p>

            {selectedVersion && <VersionSelect
              versions={versionList}
              version={selectedVersion}
              setVersion={setSelectedVersion}
              gitlabId={gitlabProjectId}
              includePrerelease={includePrerelease}
            />}
            <br />

            {!selectedVersion.includes('*') && <rapi-doc
              render-style="view"
              layout="column"
              spec-url={`${SCHEMA_BASE_URL}/${path}/${selectedVersion}/${artifact}`}
              theme="light"
              schema-description-expanded="true"
              show-info="false"
              show-header="false"
              show-components="false"
              allow-spec-file-load="false"
              allow-authentication={props.allowAuthentication || "true"}
              info-description-headings-in-navbar="false"
              allow-try={props.allowTry || "false"}
              primary-color="#11171a"
              allow-server-selection="false"
              server-url=""
            />}

            {status === 'error' && <p>Die API-Spezifikation konnte leider nicht geladen werden.</p>}
          </div>
        )
      }}
    </BrowserOnly>
  )
}