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>
  );
}