/**
 * Vue 3 composable that resolves responsive image variants for DCS CDN-hosted assets.
 *
 * Wraps the framework-agnostic `resolveResponsiveImage` from `@duffcloudservices/cms-core`
 * with reactive Vue refs so it can be used directly in `<script setup>` blocks.
 *
 * @example
 * ```vue
 * <script setup lang="ts">
 * import { useResponsiveImage } from '@duffcloudservices/cms'
 *
 * const hero = useResponsiveImage({
 *   src: 'https://files.duffcloudservices.com/kept/assets/hero/abc-123.jpg',
 *   alt: 'Hero image',
 *   context: 'hero',
 * })
 * </script>
 *
 * <template>
 *   <picture v-if="hero.hasVariants">
 *     <source
 *       v-for="source in hero.sources"
 *       :key="source.type"
 *       :srcset="source.srcset"
 *       :type="source.type"
 *       :sizes="source.sizes"
 *     />
 *     <img v-bind="hero.imgProps" class="w-full h-full object-cover" />
 *   </picture>
 *   <img v-else v-bind="hero.imgProps" class="w-full h-full object-cover" />
 * </template>
 * ```
 */

import { computed, type MaybeRefOrGetter, toValue } from 'vue'
import {
  resolveResponsiveImage,
  type ImageContext,
  type ResponsiveImageResult,
} from '@duffcloudservices/cms-core'

export interface UseResponsiveImageOptions {
  /** Source URL — can be a reactive ref, getter, or plain string. */
  src: MaybeRefOrGetter<string>
  /** Alt text — can be a reactive ref, getter, or plain string. */
  alt: MaybeRefOrGetter<string>
  /** Sizing context — determines which variants to include. */
  context?: MaybeRefOrGetter<ImageContext | undefined>
  /** Optional `sizes` attribute override. */
  sizes?: MaybeRefOrGetter<string | undefined>
  /** Skip variant resolution and use the original URL only. */
  original?: MaybeRefOrGetter<boolean | undefined>
  /** Intrinsic width — emitted as a layout-shift hint when paired with `height`. */
  width?: MaybeRefOrGetter<number | undefined>
  /** Intrinsic height — emitted as a layout-shift hint when paired with `width`. */
  height?: MaybeRefOrGetter<number | undefined>
}

/**
 * Reactively resolves responsive image metadata for a DCS CDN URL.
 *
 * The returned object is a computed ref that recomputes whenever any
 * of the input refs change. Spread `imgProps` onto an `<img>` or
 * combine with `sources` inside a `<picture>` element.
 */
export function useResponsiveImage(options: UseResponsiveImageOptions): ResponsiveImageResult {
  const result = computed(() =>
    resolveResponsiveImage({
      src: toValue(options.src),
      alt: toValue(options.alt),
      context: toValue(options.context),
      sizes: toValue(options.sizes),
      original: toValue(options.original) ?? undefined,
      width: toValue(options.width) ?? undefined,
      height: toValue(options.height) ?? undefined,
    }),
  )

  // Return a reactive proxy that delegates to the computed
  return {
    get imgProps() {
      return result.value.imgProps
    },
    get sources() {
      return result.value.sources
    },
    get hasVariants() {
      return result.value.hasVariants
    },
  }
}