contentstack-imagevault/remix/app/components/ImageVaultDAM.tsx

import { useCallback, useEffect, useState } from "react"
import { flushSync } from "react-dom"

import {
  AssetCardVertical,
  Button,
  FieldLabel,
  cbModal,
} from "@contentstack/venus-components"
import ImageEditModal from "./ImageEditModal"
import FullSizeImage from "./FullSizeImage"
import { isInsertResponse, openImageVault } from "~/utils/imagevault"

import type { CbModalProps } from "@contentstack/venus-components/build/components/Modal/Modal"
import type UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
import type { InsertResponse } from "~/types/imagevault"
import type {
  EntryDataPublishDetails,
  ImageVaultDAMConfig,
} from "~/utils/imagevault"
import type { Lang } from "~/types/lang"

export type ImageVaultDAMProps = {
  sdk: UiLocation
  config: ImageVaultDAMConfig
  initialData: InsertResponse | null
}

type DAMButtonProps = {
  onClick: () => void
}

function DAMButton({ onClick }: DAMButtonProps) {
  return (
    <div style={{ padding: 2 }}>
      <Button
        onClick={onClick}
        buttonType="link"
        version="v2"
        icon="v2-Assets"
        iconAlignment="left"
        size="small"
        id="imagevaultpicker"
      >
        Choose a file
      </Button>
    </div>
  )
}

type MediaProps = {
  media: InsertResponse
  onDelete: () => void
  onEdit: () => void
}

function Media({ media, onDelete, onEdit }: MediaProps) {
  // MediaConversions is an array but will only contain one object
  const { Url, Height, FormatHeight, Width, FormatWidth, Name, AspectRatio } =
    media.MediaConversions[0]

  const assetUrl = Url
  const title = media.Name
  const width = FormatWidth || Width
  const height = FormatHeight || Height
  const alt =
    media.Metadata?.find((meta) => meta.Name.includes("AltText_"))?.Value ||
    Name

  return (
    <div key={Url} style={{ fontFamily: "Inter" }}>
      <AssetCardVertical
        assetType="image"
        assetUrl={assetUrl}
        title={title}
        version="v2"
        width={width}
        height={height}
        onDeleteClick={onDelete}
        onEditClick={onEdit}
        onFullScreenClick={() => {
          const cbModalProps: CbModalProps = {
            // @ts-expect-error: Component is badly typed
            component: (props) => {
              return (
                <FullSizeImage
                  // eslint-disable-next-line react/prop-types
                  onClose={props.closeModal}
                  imageUrl={Url}
                  alt={alt}
                  title={Name}
                  aspectRatio={AspectRatio}
                />
              )
            },
            modalProps: {
              size: "max",
              style: {
                content: {
                  display: "grid",
                  width: "90dvw",
                  height: "90dvh",
                  maxHeight: "100%",
                  gridTemplateRows: "auto 1fr",
                },
                overlay: {},
              },
            },
          }
          cbModal(cbModalProps)
        }}
      />
    </div>
  )
}

export default function ImageVaultDAM({
  sdk,
  config,
  initialData,
}: ImageVaultDAMProps) {
  const [media, setMedia] = useState<InsertResponse | null>(initialData)

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

  const updateFrameHeight = useCallback(() => {
    if (frame?.updateHeight) {
      // We need to recalculate the height of the iframe when an image is added.
      // Cannot use flushSync inside useEffect.
      setTimeout(() => frame.updateHeight(document.body.scrollHeight), 0)
    }
  }, [frame])

  const handleMedia = useCallback(
    (result?: InsertResponse) => {
      if (field && result) {
        flushSync(() => {
          setMedia(result)
          field.setData(result)
          document.body.style.overflow = "hidden"
        })
      }

      updateFrameHeight()
    },
    [field, updateFrameHeight]
  )

  useEffect(() => {
    updateFrameHeight()
  }, [updateFrameHeight])

  const handleEdit = useCallback(() => {
    const fieldData = field?.getData() as InsertResponse
    if (isInsertResponse(fieldData)) {
      cbModal({
        // @ts-expect-error: Component is badly typed
        component: (compProps) => (
          <ImageEditModal
            fieldData={fieldData}
            setData={handleMedia}
            {...compProps}
          />
        ),
        modalProps: {
          size: "max",
        },
      })
    }
  }, [field, handleMedia])

  if (!field || !frame || !entry || !stack) {
    return <p>Initializing custom field...</p>
  }

  const entryData: EntryDataPublishDetails = {
    //TODO: Add support for branches
    branch: "main",
    contentTypeUid: entry.content_type.uid,
    locale: entry.locale as Lang,
    stackApiKey: stack._data.api_key,
    title:
      entry.getField("title").getData().toString() ||
      `Untitled (${entry.content_type.uid})`,
    uid: entry._data.uid,
  }

  return (
    <div>
      <div>
        <FieldLabel htmlFor="imagevaultpicker" version="v2">
          ImageVault Asset
        </FieldLabel>
      </div>

      {media ? (
        <Media
          media={media}
          onDelete={() => {
            setMedia(null)
            handleMedia()
          }}
          onEdit={handleEdit}
        />
      ) : (
        <DAMButton
          onClick={() => {
            openImageVault({
              config,
              entryData,
              onSuccess: handleMedia,
            })
          }}
        />
      )}
    </div>
  )
}