import { useStore } from './store'
import type {
  Country,
  Currency,
  FrontMenu,
  GenericResponse,
  GenericResponseItems,
  Language,
  UIFrontMenu,
} from '~/types'
import { useMyFetch } from '#imports'

function buildTreeRecursive(
  data: (FrontMenu | UIFrontMenu)[],
  parentId: number,
): UIFrontMenu[] {
  const children = data.filter(
    (item): item is UIFrontMenu =>
      item.id_parent === parentId && !item.is_default,
  )

  return children.map(item => ({
    ...item,
    children: buildTreeRecursive(data, item.id),
  }))
}

export const useMenuStore = defineStore('menuStore', () => {
  const store = useStore()
  const { $i18n } = useNuxtApp()
  // const session = useSession();
  const { $session } = useNuxtApp()
  const router = useRouter()
  const route = useRoute()

  const openMenu = ref(false)
  const openDropDown = ref(false)

  const defaultMenu = ref()

  const menu = ref([] as UIFrontMenu[])
  const menuItems = ref([] as FrontMenu[])

  // curr/country
  const selectedCountry = ref({} as Country)
  const selectedPhoneCountry = ref({} as Country)
  const selectedCurrency = ref({} as Currency)
  const selectedLanguage = ref({} as Language)

  const countries = ref([] as Country[])
  const currencies = ref([] as Currency[])
  const languages = ref([] as Language[])

  const getLocales = async () => {
    const { data: countriesList } = await useMyFetch<
      GenericResponse<Country[]>
    >(`/api/public/country/list`)
    countries.value = countriesList
    selectedCountry.value = countriesList.find(
      country => country.iso_code === $session.currentCountryIso.value,
    ) as Country
    selectedPhoneCountry.value = countriesList.find(
      country => country.iso_code === $session.currentCountryIso.value,
    ) as Country

    const { data: currenciesList } = await useMyFetch<
      GenericResponseItems<Currency[]>
    >(`/api/public/currencies`)
    currencies.value = currenciesList.items
    selectedCurrency.value = currenciesList.items.find(
      currency => currency.iso_code === $session.currentCurrencyIso.value,
    ) as Currency

    const { data: languagesList } = await useMyFetch<
      GenericResponseItems<Language[]>
    >(`/api/public/languages`)
    languages.value = languagesList.items
    selectedLanguage.value = languagesList.items.find(
      language => language.iso_code === $session.currentLanguageIso.value,
    ) as Language
  }

  const loadMenu = async () => {
    try {
      const { data } = await useMyFetch<GenericResponse<FrontMenu[]>>(
        `/api/public/front/menu`,
        {
          onErrorOccured: (err, status) => {
            console.log(err, status)
          },
        },
      )

      menuItems.value = data

      const root = data.find(item => item.is_root) as UIFrontMenu
      defaultMenu.value = data.find(item => item.is_default)
      if (root) {
        menu.value = buildTreeRecursive(data, root.id)
      }
      else {
        console.warn('Root menu item not found')
        menu.value = []
      }
    }
    catch (error) {
      console.log(error)
    }
  }

  const navigateToItem = (item?: UIFrontMenu) => {
    if (item) {
      router.push({
        params: { slug: item.front_menu_lang[0].link_rewrite, id: item.id },
        name: `id-slug___${$i18n.locale.value}`,
      })
      openDropDown.value = false
    }
    else {
      router.push({
        params: {
          slug: defaultMenu.value.front_menu_lang[0].link_rewrite,
          id: defaultMenu.value.id,
        },
        name: `id-slug___${$i18n.locale.value}`,
      })
    }
  }

  function navigateToShop() {
    navigateToItem(menuItems.value?.find(item => item.id === 5))
  }

  function getProductMenu() {
    return menuItems.value?.find(item => item.id === 13)
  }

  const getFirstImage = (size: 'l' | 'm' | 's' = 'm', needbaseurl: boolean) => {
    const req = useRequestEvent()
    const url = useRequestURL()
    // let img = "";
    const img: string[] = []
    for (const s in store.components) {
      if (store.components[s].front_section.img.length === 0) continue
      img.push(
        `/api/public/file/${store.components[s].front_section.img[0]}_${size}.webp`,
      )
      if (img.length > 0) break
    }
    if (img.length > 0) {
      if (needbaseurl) {
        return `${req?.headers.get('x-forwarded-proto') || url.protocol}://${req?.headers.get('x-forwarded-host') || url.host || req?.headers.get('host')}${img[0]}`
      }
      return img[0]
    }
    return ''
  }

  const headMeta = computed(() => {
    const item = menuItems.value?.find(
      item => item.id.toString() === route.params.id,
    )

    const meta = {
      title: item?.front_menu_lang[0].meta_title,
      htmlAttrs: {
        lang: $i18n.locale.value,
      },
      link: [
        // { rel: "manifest", href: "/api/manifest.json" }
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.png' },
      ],
      script: [
        {
          src: 'https://leiadmin.com/leitag.js?lei=894500UT83EISNNA8D04&color=dark',
          defer: true,
        },
      ],
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: item?.front_menu_lang[0].meta_description,
        },
        {
          property: 'og:title',
          content: item?.front_menu_lang[0].meta_title,
        },
        {
          property: 'og:description',
          content: item?.front_menu_lang[0].meta_description,
        },
        {
          property: 'og:image',
          content: getFirstImage('m', true),
        },
        {
          property: 'twitter:title',
          content: item?.front_menu_lang[0].meta_title,
        },
        {
          property: 'twitter:description',
          content: item?.front_menu_lang[0].meta_description,
        },
        {
          property: 'twitter:image',
          content: getFirstImage('m', true),
        },
      ],
    }

    const preload = getFirstImage('l', false)
    if (preload) {
      meta.link.push({ rel: 'preload', as: 'image', href: preload } as never)
    }

    return meta
  })

  // watches
  watch(
    () => $session.cookieData,
    async () => {
      await getLocales()
      await loadMenu()
      await store.getMinValue()
      await store.getCalculator()
    },
    { deep: true },
  )

  return {
    menu,
    menuItems,
    openMenu,
    openDropDown,
    currencies,
    languages,
    countries,
    selectedCountry,
    selectedCurrency,
    selectedPhoneCountry,
    selectedLanguage,
    defaultMenu,
    headMeta,
    navigateToShop,
    loadMenu,
    navigateToItem,
    getLocales,
    getProductMenu,
  }
})