import {
  getPostBodyPreviewThumbnailUrl,
  getPostBodyThumbnailUrl,
  getPostLightboxThumbnailUrl,
  withGeneratedImageCacheVersion
} from './post-card-thumbnail-url.js'

/**
 * 게시물 본문 표시용 이미지 URL을 조회한다.
 * @param {string|null|undefined} imageUrl - 원본 이미지 URL
 * @returns {string} 표시용 이미지 URL
 */
export const getContentDisplayImageUrl = (imageUrl) => {
  const bodyThumbnailUrl = getPostBodyThumbnailUrl(imageUrl)

  return bodyThumbnailUrl
    ? withGeneratedImageCacheVersion(bodyThumbnailUrl)
    : imageUrl || ''
}

/**
 * 게시물 라이트박스용 이미지 URL을 조회한다.
 * @param {string|null|undefined} imageUrl - 원본 이미지 URL
 * @returns {string} 라이트박스용 이미지 URL
 */
export const getContentLightboxImageUrl = (imageUrl) => {
  const lightboxThumbnailUrl = getPostLightboxThumbnailUrl(imageUrl)

  return lightboxThumbnailUrl
    ? withGeneratedImageCacheVersion(lightboxThumbnailUrl)
    : imageUrl || ''
}

/**
 * 게시물 본문 이미지의 반응형 srcset을 만든다.
 * @param {string|null|undefined} imageUrl - 원본 이미지 URL
 * @returns {string} srcset 문자열
 */
export const getContentDisplayImageSrcset = (imageUrl) => {
  const previewUrl = getPostBodyPreviewThumbnailUrl(imageUrl)
  const bodyUrl = getPostBodyThumbnailUrl(imageUrl)

  return [
    previewUrl ? `${withGeneratedImageCacheVersion(previewUrl)} 720w` : '',
    bodyUrl ? `${withGeneratedImageCacheVersion(bodyUrl)} 1600w` : ''
  ].filter(Boolean).join(', ')
}

/**
 * 갤러리 표시용 이미지 sizes 값을 만든다.
 * @param {number} rowLength - 갤러리 행 이미지 개수
 * @returns {string} sizes 속성
 */
export const getGalleryImageSizes = (rowLength) => {
  const columnWidth = rowLength >= 3 ? '33vw' : rowLength === 2 ? '50vw' : '100vw'

  return `(max-width: 768px) 100vw, ${columnWidth}`
}