/**
 * Use in asyncData to handle slices resolving
 */
export async function usePrismicSlicesResolver(slices, prismic) {
  try {
    if (!slices) return []
    return await Promise.all(
      slices
        .filter((slice) => {
          return slice.primary || slice.items
        })
        .map(async (slice) => {
          const component = components[slice.slice_type]
          let payload = null
          if (component.resolve) {
            payload = await component.resolve(slice, prismic)
          }

          return {
            slice,
            payload,
          }
        })
    )
  } catch (e) {
    console.log('--------ERROR PRISMIC SLICES RESOLVER-------', e)
    showError({
      statusCode: 404,
      statusMessage: `Cannot found`,
    })
  }
}

/**
 * Use in asyncData to handle slices resolving
 */
export async function usePrismicSlicesResolver(slices, prismic) {
  try {
    if (!slices) return []
    return await Promise.all(
      slices
        .filter((slice) => {
          return slice.primary || slice.items
        })
        .map(async (slice) => {
          const component = components[slice.slice_type]
          let payload = null
          if (component.resolve) {
            payload = await component.resolve(slice, prismic)
          }

          return {
            slice,
            payload,
          }
        })
    )
  } catch (e) {
    console.log('--------ERROR PRISMIC SLICES RESOLVER-------', e)
    showError({
      statusCode: 404,
      statusMessage: `Cannot found`,
    })
  }
}

export function usePrismicSliceResolver(props, resolve, prismic) {
  const resolved = ref()
  const loaded = ref(!!props.payload)
  try {
    if (props.payload) {
      resolved.value = props.payload
    } else {
      onMounted(async () => {
        resolved.value = await resolve(props.slice, prismic)
        loaded.value = true
      })
    }
  } catch (e) {
    console.log('--------ERROR PRISMIC SLICE RESOLVER-------', e)
    showError({
      statusCode: 404,
      statusMessage: `Cannot found`,
    })
  }

  return {
    loaded,
    resolved,
  }
}

export function usePrismicSliceResolver(props, resolve, prismic) {
  const resolved = ref()
  const loaded = ref(!!props.payload)
  try {
    if (props.payload) {
      resolved.value = props.payload
    } else {
      onMounted(async () => {
        resolved.value = await resolve(props.slice, prismic)
        loaded.value = true
      })
    }
  } catch (e) {
    console.log('--------ERROR PRISMIC SLICE RESOLVER-------', e)
    showError({
      statusCode: 404,
      statusMessage: `Cannot found`,
    })
  }

  return {
    loaded,
    resolved,
  }
}

<template>
  <main class="pageSerie pb-48">
    <SerieFeaturedCover :document="serie"></SerieFeaturedCover>
    <SingleContainer :rows="serie.data.slices.length + 1">
      <SingleSidebar>
        <AtomDivider class="mt-0 mb-8 mobile background-[#303030]" />
        <AtomSidebarEntry
          :title="$t('serie.narrated')"
          v-if="serie.data.narrator_copyright"
        >
          {{ serie.data.narrator_copyright }}
        </AtomSidebarEntry>
        <AtomSidebarEntry
          :title="$t('serie.music')"
          v-if="serie.data.narrator_copyright"
        >
          {{ serie.data.music_copyright }}
        </AtomSidebarEntry>
        <AtomSidebarEntry
          :title="$t('serie.editing')"
          v-if="serie.data.narrator_copyright"
        >
          {{ serie.data.editing_copyright }}
        </AtomSidebarEntry>

        <AtomSidebarEntry
          class="mt-16"
          :title="$t('serie.watch')"
          v-if="
            serie.data.youtube_external.url! ||
            serie.data.vimeo_external.url ||
            serie.data.instagram_external.url
          "
        >
          <SerieWatchOnBar :document="serie" />
        </AtomSidebarEntry>
        <div>
          <AtomSidebarEntry title="Tags" v-if="tags.length">
            <div class="mt-8"></div>
            <AtomTags :tags="tags" />
          </AtomSidebarEntry>
        </div>
        <div>
          <AtomSidebarEntry :title="$t('serie.share')">
            <ShareActionBar class="mt-8" />
          </AtomSidebarEntry>
        </div>
      </SingleSidebar>
      <SliceZone :slices="serie.data.slices" :components="components" />
    </SingleContainer>
    <div class="container">
      <!-- TODO types -->
      <SliceZoneResolver :slices="data!.slices" />
    </div>
  </main>
</template>

<template>
  <main class="pageSerie pb-48">
    <SerieFeaturedCover :document="serie"></SerieFeaturedCover>
    <SingleContainer :rows="serie.data.slices.length + 1">
      <SingleSidebar>
        <AtomDivider class="mt-0 mb-8 mobile background-[#303030]" />
        <AtomSidebarEntry
          :title="$t('serie.narrated')"
          v-if="serie.data.narrator_copyright"
        >
          {{ serie.data.narrator_copyright }}
        </AtomSidebarEntry>
        <AtomSidebarEntry
          :title="$t('serie.music')"
          v-if="serie.data.narrator_copyright"
        >
          {{ serie.data.music_copyright }}
        </AtomSidebarEntry>
        <AtomSidebarEntry
          :title="$t('serie.editing')"
          v-if="serie.data.narrator_copyright"
        >
          {{ serie.data.editing_copyright }}
        </AtomSidebarEntry>

        <AtomSidebarEntry
          class="mt-16"
          :title="$t('serie.watch')"
          v-if="
            serie.data.youtube_external.url! ||
            serie.data.vimeo_external.url ||
            serie.data.instagram_external.url
          "
        >
          <SerieWatchOnBar :document="serie" />
        </AtomSidebarEntry>
        <div>
          <AtomSidebarEntry title="Tags" v-if="tags.length">
            <div class="mt-8"></div>
            <AtomTags :tags="tags" />
          </AtomSidebarEntry>
        </div>
        <div>
          <AtomSidebarEntry :title="$t('serie.share')">
            <ShareActionBar class="mt-8" />
          </AtomSidebarEntry>
        </div>
      </SingleSidebar>
      <SliceZone :slices="serie.data.slices" :components="components" />
    </SingleContainer>
    <div class="container">
      <!-- TODO types -->
      <SliceZoneResolver :slices="data!.slices" />
    </div>
  </main>
</template>