import { Suspense, lazy } from "react"
import useApp from "~/hooks/useApp"

const ConfigForm = lazy(() => import("~/components/ConfigForm"))

export default function ConfigPage() {
  const { sdk, config } = useApp()

  const appConfigWidget = sdk?.location.AppConfigWidget

  const setInstallationData = appConfigWidget?.installation.setInstallationData

  if (!config) {
    return (
      <div>
        <p>
          Could not fetch the current configuration, please try again later!
        </p>
      </div>
    )
  }

  if (!setInstallationData) {
    return (
      <div>
        <p>
          THe configuration cannot be updated right now, please try again later!
        </p>
      </div>
    )
  }

  return (
    <Suspense fallback={<p>Loading config form...</p>}>
      <ConfigForm values={config} setInstallationData={setInstallationData} />
    </Suspense>
  )
}