web/packages/design-system/lib/components/JsonToHtml/insertResponseToImageVaultAsset.ts

export type ImageVaultAsset = {
  id: number
  title: string
  url: string
  dimensions: {
    width: number
    height: number
    aspectRatio: number
  }
  meta: { alt: string | undefined | null; caption: string | undefined | null }
  focalPoint: { x: number; y: number }
}

type ImageVaultAssetResponse = {
  Id: number
  Name: string
  FocalPoint: { x: number; y: number }
  Metadata: Array<{ Name: string; Value: string }>
  MediaConversions: Array<{
    Url: string
    Width: number
    Height: number
    AspectRatio: number
    FormatAspectRatio: number
  }>
}

export function insertResponseToImageVaultAsset(
  response: ImageVaultAssetResponse
): ImageVaultAsset {
  const alt = response.Metadata?.find((meta) =>
    meta.Name.includes('AltText_')
  )?.Value

  const caption = response.Metadata?.find((meta) =>
    meta.Name.includes('Title_')
  )?.Value

  const mediaConversion = response.MediaConversions[0]
  const aspectRatio =
    mediaConversion.FormatAspectRatio ||
    mediaConversion.AspectRatio ||
    mediaConversion.Width / mediaConversion.Height

  return {
    url: mediaConversion.Url,
    id: response.Id,
    meta: {
      alt,
      caption,
    },
    title: response.Name,
    dimensions: {
      width: mediaConversion.Width,
      height: mediaConversion.Height,
      aspectRatio,
    },
    focalPoint: response.FocalPoint || { x: 50, y: 50 },
  }
}