import { computed } from 'vue'
import { useResolvedPage } from '~/content/pages'
import { buildResolvedPageSeo } from '~/content/utils'

export function buildAboutPageSeo(page, origin = '') {
  return buildResolvedPageSeo(page, origin, {
    ogImage: page?.heroImage || page?.featuredImage || page?.structuredContent?.media?.heroImage || '',
  })
}

export function useAboutContent() {
  const aboutContentPage = useResolvedPage('about')

  const aboutUi = computed(() => ({
    heroEyebrow: aboutContentPage.value?.structuredContent?.ui?.heroEyebrow,
    storyHeading: aboutContentPage.value?.structuredContent?.ui?.storyHeading,
    valuesHeading: aboutContentPage.value?.structuredContent?.ui?.valuesHeading,
    valuesDescription: aboutContentPage.value?.structuredContent?.ui?.valuesDescription,
  }))

  const aboutHeroBackground = computed(() => aboutContentPage.value?.heroImage
    || aboutContentPage.value?.featuredImage
    || aboutContentPage.value?.structuredContent?.media?.heroImage
    || null)

  const aboutHeroBackgroundAlt = computed(() => aboutContentPage.value?.structuredContent?.media?.heroImageAlt
    || aboutContentPage.value?.title
    || '')

  const aboutStoryMedia = computed(() => ({
    image: aboutContentPage.value?.structuredContent?.media?.storyImage
      || aboutContentPage.value?.structuredContent?.media?.heroImage
      || aboutHeroBackground.value
      || null,
    alt: aboutContentPage.value?.structuredContent?.media?.storyImageAlt
      || aboutContentPage.value?.title
      || '',
  }))

  const aboutStats = computed(() => [...(aboutContentPage.value?.structuredContent?.stats || [])]
    .sort((left, right) => (left.sortOrder || 0) - (right.sortOrder || 0)))

  const aboutStoryParagraphs = computed(() => [...(aboutContentPage.value?.structuredContent?.story?.paragraphs || [])])

  const aboutValues = computed(() => [...(aboutContentPage.value?.structuredContent?.values || [])]
    .sort((left, right) => (left.sortOrder || 0) - (right.sortOrder || 0)))

  return {
    aboutContentPage,
    aboutHeroBackground,
    aboutHeroBackgroundAlt,
    aboutStats,
    aboutStoryMedia,
    aboutStoryParagraphs,
    aboutUi,
    aboutValues,
  }
}
