import { Suspense, lazy, useEffect, useState } from "react"
import { useScript } from "usehooks-ts"
import useApp from "~/hooks/useApp"

import Disclaimer from "~/components/Disclaimer"
import InvalidConfig from "~/components/InvalidConfig"

import { isImageVaultDAMConfig } from "~/utils/imagevault"
import type { InsertResponse } from "~/types/imagevault"

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

export default function Field() {
  const { sdk, config } = useApp()
  const ivStatus = useScript(
    "/scripts/imagevault-insert-media/insertmediawindow.min.js"
  )

  const [showDisclaimer, setShowDisclaimer] = useState(false)
  const [fieldData, setFieldData] = useState<InsertResponse>()

  const entry = sdk?.location.CustomField?.entry
  const field = sdk?.location.CustomField?.field

  useEffect(() => {
    // If we can get field data from the SDK that means the entry has been
    // saved at least once. If this is true, we are guaranteed entry UID.
    // Entry that has not been saved does not have a entry UID and therefore
    // cannot be referred to by ImageVault. Entry title is also required by us.
    try {
      if (field && entry) {
        const data = field.getData()
        const title = entry.getField("title").getData().toString()
        if (data && title) {
          setFieldData(data as InsertResponse)
        } else {
          throw new Error("Missing data or title for entry")
        }
      }
    } catch (e) {
      setShowDisclaimer(true)
    }
  }, [entry, field])

  if (showDisclaimer) {
    return <Disclaimer />
  }

  const loaded = !!(fieldData && ivStatus === "ready" && sdk && config)

  const initialData =
    fieldData && Object.keys(fieldData).length > 0 ? fieldData : null

  if (!loaded) {
    return <p style={{ fontFamily: "Inter" }}> Loading dependecies...</p>
  }

  return (
    <div id="field">
      {isImageVaultDAMConfig(config) ? (
        <Suspense fallback={<p>Loading field...</p>}>
          <ImageVaultDAM config={config} sdk={sdk} initialData={initialData} />
        </Suspense>
      ) : (
        <InvalidConfig />
      )}
    </div>
  )
}