TsBannerHomeDealsAndOffers

<template>
  <component
      v-if="props.product && props.product.enableRedirection"
      :is="props.product.enableRedirection || props.landingPageUrl ? NuxtLink : 'div'"
      v-bind="nuxt_link_attrs"
      :id="props.id || `product-banner-${random_id}`"
      :class="twMerge(
          'ts-banner h-full relative font-gilroy rounded-lg overflow-hidden max-w-max bg-primary',
          (props.product?.enableRedirection || props.landingPageUrl) && 'inline-block'
      )"
      :style="root_styles"
  >
    <div ref="bannerHomeDealsAndOfferRef" class="w-full h-full flex flex-col p-4 pt-14 relative max-w-[320px] md:max-w-[300px] min-w-[320px] md:min-w-[300px]">

      <div v-if="props.image && props.image.src" class="w-full relative flex justify-center mb-4">
        <div
            v-if="product_data && product_data.prices && product_data.prices.formatted"
          :class="twMerge(
            'absolute top-0 text-center text-idle-white mt-3 px-2 flex flex-col',
            !rootStore.isIncVat && 'flex-col-reverse'
        )">
          <div :class="twMerge(rootStore.isIncVat ? 'text-sm' : 'text-xs')">{{useTranslation("nowAt","Nu bij")}} <span :class="twMerge(rootStore.isIncVat && 'text-base font-bold')">{{ product_data.prices.formatted.gross }}</span></div>
          <div :class="twMerge(rootStore.isIncVat ? 'text-xs' : 'text-sm')">Excl. {{useTranslation("vat","BTW")}} <span :class="twMerge(!rootStore.isIncVat && 'text-base font-bold')">{{ product_data.prices.formatted.net }}</span></div>
        </div>
        <NuxtImg class="mt-auto"
                 :src="props.image.src"
                 width="147"
        />
      </div>

      <div class="mt-auto">
        <div
            :class="twMerge('text-[14px] text-idle-white leading-tight')"
            :style="sub_title_styles"
            v-html="props.subTitle && props.subTitle.text">
        </div>

        <div
            :class="twMerge('text-[20px] font-bold text-idle-white leading-tight mb-3')"
            :style="title_styles"
            v-html="(props.product && props.product.enableTitle && product_data && product_data?.full_name) ? product_data?.full_name : props.title?.text">
        </div>

        <div
            :class="twMerge('text-[14px] text-white leading-none')"
            :style="description_styles"
            v-html="(props.product && props.product.enableDescription && product_data && product_data?.description
) ? product_data?.description
 : props.description?.text">
        </div>
      </div>
    </div>
  </component>
</template>

<script setup lang="ts">
import {defineProps, onMounted, ref, withDefaults} from "vue";
import { twMerge } from "tailwind-merge";

const rootStore = useRootStore();
const productStore = useProductStore();
type Props = {
  id?: string;
  dataTestid?: string;
  landingPageUrl?: string;
  product?: object;
  image?: object;
  subTitle?: object;
  title?: object;
  description?: object;
  backgroundColor?: object;
}

const bannerHomeDealsAndOfferRef = ref('')

let observer;

const observeElement = (element) => {
  observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      fetchProduct()
    }
  })
  observer.observe(element)
};

const fetchProduct = async () => {
  // Replace with your actual fetch request
  if(props.product?.id) {
    product_data.value = await productStore.getProductById(product_id.value);
  }
  if (observer && bannerHomeDealsAndOfferRef.value) {
    observer.unobserve(bannerHomeDealsAndOfferRef.value)
  }
}

const props = withDefaults(defineProps<Props>(), {
  dataTestid: 'highlights',
  image: () => ({
    src: '/banners/desktop/images/banner-deals-and-offers-1.png'
  }),
  subTitle: () => ({
    text: 'Tool Up for Savings'
  }),
  title: () => ({
    text: 'Grab Your Gear Now!'
  }),
  description: () => ({
    text: 'Triton JOF001 router 1,010W 6-12mm'
  })
})

const random_id = ref('');
const product_id = computed(() => props.product?.id);
const product_data = ref(null);
const product_price = computed(() => {
  return rootStore.isIncVat ? product_data.value?.prices?.formatted?.gross : product_data.value?.prices?.formatted?.net;
})

const NuxtLink = resolveComponent('NuxtLink');
const localePath=useLocalePath();
const nuxt_link_attrs = computed(() => ({
  ...(props.landingPageUrl && {to: props.landingPageUrl}),
  ...(props.product?.enableRedirection && product_data.value && {to:localePath( `/product/${product_data.value.slug}-${product_data.value.code}`)}),
}))

const sub_title_styles = computed(() => ({
  ...(props.subTitle?.color && {color: props.subTitle?.color}),
  ...(props.subTitle?.fontSize && {fontSize: props.subTitle?.fontSize})
}))

const title_styles = computed(() => ({
  ...(props.title?.color && {color: props.title?.color}),
  ...(props.title?.fontSize && {fontSize: props.title?.fontSize})
}))

const description_styles = computed(() => ({
  ...(props.description?.color && {color: props.description?.color}),
  ...(props.description?.fontSize && {fontSize: props.description?.fontSize}),
}))

const root_styles = computed(() => ({
  ...(props.backgroundColor?.color && {backgroundColor: props.backgroundColor.color }),
  ...(props.backgroundColor?.custom && {backgroundColor: props.backgroundColor.custom }),
}))

onMounted(async () => {
  random_id.value = useRandomUUID();
  if (bannerHomeDealsAndOfferRef.value) {
    observeElement(bannerHomeDealsAndOfferRef.value)
  }
});

onUnmounted(() => {
  if (observer && bannerHomeDealsAndOfferRef.value) {
    observer.unobserve(bannerHomeDealsAndOfferRef.value)
  }
})

watch(product_id, async () => {
  await fetchProduct();
})

</script>

<style scoped>

</style>