import { useApiFetch } from '#lib/composables/service/use-api-fetch'
import { useAsyncData, useNuxtData } from 'nuxt/app'
import { useHead } from '#imports'
import { AppDataEnum } from '#lib/enums'
import type { SEO } from '#lib/types/seo'

export function useSEO() {
  const { request } = useApiFetch()

  const { data: SEOData } = useNuxtData<SEO>(AppDataEnum.SEO)

  /**
   * UsageExample:
   * ```javascript
   *  const { fetchSEOData } = useSEO()
      fetchSEOData('the-thao')
   * ```
   * ResponseExample: 
   * ```javascipt
   * {
        title: 'mock title',
        description: 'mock descript',
        author: 'mock auwth',
        keywords: 'mock keywords',
        copyright: 'mock copy',
        canonical: 'mock canonical',
        'og:description': 'mock og descript',
        'og:image': 'mock og image',
        'og:title': 'mock og title',
        'og:type': 'website',
        'og:url': 'mock og url',
        'twitter:card': 'summary_large_image',
        'twitter:description': 'mock twitter descript',
        'twitter:image': 'mock twitter image',
        'twitter:title': 'mock twitter title',
        schema: JSON.stringify([{
          '@context': 'https://schema.org',
          '@graph': [
            {
              '@type': 'Organization',
              '@id': 'https://red88.us/#schema-publishing-organization',
              url: 'https://red88.us',
              name: 'RED88',
            },
            {
              '@type': 'WebSite',
              '@id': 'https://red88.us/#schema-website',
              url: 'https://red88.us',
              name: 'RED88',
              encoding: 'UTF-8',
              potentialAction: {
                '@type': 'SearchAction',
                target: 'https://red88.us/search/{search_term_string}',
                'query-input': 'required name=search_term_string',
              },
            },
            {
              '@type': 'WebPage',
              '@id': 'https://red88.us/lo-de/#schema-webpage',
              isPartOf: {
                '@id': 'https://red88.us/#schema-website',
              },
              publisher: {
                '@id': 'https://red88.us/#schema-publishing-organization',
              },
              url: 'https://red88.us/lo-de',
            },
            {
              '@type': 'Article',
              mainEntityOfPage: {
                '@id': 'https://red88.us/lo-de/#schema-webpage',
              },
              author: {
                '@type': 'Person',
                '@id': 'https://red88.us/author/admin/#schema-author',
                name: 'admin',
                url: 'https://red88.us/author/admin',
              },
              publisher: {
                '@id': 'https://red88.us/#schema-publishing-organization',
              },
              dateModified: '2020-07-21T11:02:49',
              datePublished: '2019-11-24T09:36:57',
              headline:
                'Lô đề uy tín 2020 - Cách chơi đánh đề online thắng lớn tại Red88',
              description:
                'Tổng hợp các chơi đánh đề online tỷ lệ thắng cực cao tại Red88, Mẹo chơi thủ thuật Lô đề mới nhất.',
              name: 'Lo De',
            },
          ],
        }]),
      }
   * ```
   * @param slug
   */
  const fetchSEOData = async (slug: string): Promise<void> => {
    await useAsyncData(AppDataEnum.SEO, async () => {
      const { data } = await request<void, SEO>(`/seo?slug=${slug}`)
      applySeo(data)
      return data
    })
  }

  const applySeo = (data: SEO) => {
    useHead({
      title: data?.title,
      link: [
        {
          rel: 'canonical',
          href: data?.canonical,
        },
      ],
      script: [
        {
          type: 'application/ld+json',
          children: data?.schema,
        },
      ],
      meta: [
        {
          name: 'title',
          content: data?.title,
        },
        {
          name: 'description',
          content: data?.description,
        },
        {
          name: 'author',
          content: data?.author,
        },
        {
          name: 'keywords',
          content: data?.keywords,
        },
        {
          property: 'copyright',
          content: data?.author,
        },
        {
          property: 'og:description',
          content: data?.['og:description'],
        },
        {
          property: 'og:image',
          content: data?.['og:image'],
        },
        {
          property: 'og:title',
          content: data?.['og:title'],
        },
        {
          property: 'og:type',
          content: data?.['og:type'],
        },
        {
          property: 'og:url',
          content: data?.['og:url'],
        },
        {
          property: 'twitter:card',
          content: data?.['twitter:card'],
        },
        {
          property: 'twitter:description',
          content: data?.['twitter:description'],
        },
        {
          property: 'twitter:image',
          content: data?.['twitter:image'],
        },
        {
          property: 'twitter:title',
          content: data?.['twitter:title'],
        },
      ],
    })
  }

  return {
    SEOData,
    fetchSEOData,
  }
}