TsBannerHomeRightDynamic

<template>
  <component
    :is="props.product.enableRedirection || props.landingPageUrl ? NuxtLink : 'div'"
    v-bind="nuxt_link_attrs"
    :id="props.id || `product-banner-${random_id}`"
    :class="twMerge(
          'ts-banner relative max-w-max font-gilroy',
          (props.product.enableRedirection || props.landingPageUrl) && 'inline-block'
      )"
  >
    <div class="rounded-xl overflow-hidden w-[510px] h-[192px] relative">
      <div class="overlay absolute top-0 right-0 bottom-0 left-0" :style="overlay_styles"></div>
      <video v-if="props.background.type === 'video' || !props.background?.src"
             :poster="props.background.poster"
             class="w-full"
             playsinline
             autoplay muted loop>
        <source :src="props.background.src || '/banners/desktop/banner-3.mp4'"
                type="video/mp4" />Your browser does not support the video tag.</video>
      <NuxtImg v-else-if="props.background && props.background.src && props.background?.type === 'image'"
               :src="props.background.src"
               class="w-full"
               width="510"
      />
    </div>

    <div ref="bannerHomeRightDynamicRef" class="w-full h-full absolute top-0 left-0 right-0 bottom-0 pl-5 pb-6">
      <TsMedia :append-class="twMerge('h-full w-full')">
        <TsMediaContent
          :append-class="twMerge('flex flex-col justify-center')">
          <div></div>

          <div
            :class="twMerge('text-[22px] font-black break-words text-white leading-none line-clamp-2 mb-2')"
            :style="title_styles"
            v-html="(props.product.enableTitle && product_data && product_data?.full_name) ? product_data?.full_name.toUpperCase() : props.title.text">
          </div>

          <div
            :class="twMerge('text-[14px] font-bold break-words bg-transparent text-white leading-tight line-clamp-1 mb-1')"
            :style="description_styles"
            v-html="(props.product.enableDescription && product_data && product_data?.description
) ? product_data?.description
 : props.description.text">
          </div>

          <div v-if="product_price && props.product?.enablePrice" class="text-white mb-1" :style="price_styles">
            <span class="text-normal font-bold ">
              {{ product_price }}
            </span>&nbsp;
            <span class="text-xs font-semibold leading-none">
              {{ rootStore.isIncVat ? 'Inc.' : 'Excl.' }} VAT
            </span>
          </div>

          <button
            v-if="props.button.label.text"
            class="bg-white text-primary text-sm font-semibold max-w-max rounded-lg px-5 py-2.5"
            :style="button_styles"
          >
            {{props.button.label.text}}
          </button>

        </TsMediaContent>
        <TsMediaEnd
          append-class="flex">
          <NuxtImg v-if="props.foregroundImage && props.foregroundImage.src" class="mt-auto relative -bottom-4"
                   :src="props.foregroundImage.src"
                   width="230"
          />
        </TsMediaEnd>
      </TsMedia>
    </div>
  </component>
</template>

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

const rootStore = useRootStore();
const localePath=useLocalePath();
const productStore = useProductStore();

type Props = {
  id?: string;
  landingPageUrl?: string;
  product?: object;
  background?: object;
  overlay?: string;
  foregroundImage?: object;
  brandLogo?: object;
  tag?: object;
  title?: object;
  description?: object;
  price?: object;
  button?: object;
}

const props = withDefaults(defineProps<Props>(), {
  background: () => ({
    type: 'image',
    src: '/images/home-banner-background-top-right.png'
  }),
  foregroundImage: () => ({
    src: '/images/home-banner-foreground-top-right.png'
  }),
  title: () => ({
    text: 'win a trip to Barcelona fc'
  }),
  description: () => ({
    text: 'Buy Stanley Products starting at €40*'
  }),
  button: () => ({
    label: 'Know More'
  })
})

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 nuxt_link_attrs = computed(() => ({
  ...(props.landingPageUrl && {to:localePath(props.landingPageUrl)}),
  ...(props.product?.enableRedirection && product_data.value && {to: localePath(`/product/${product_data.value.slug}-${product_data.value.code}`)}),
}))

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 price_styles = computed(() => ({
  ...(props.price?.color && {color: props.price?.color}),
  ...(props.price?.custom && {color: props.price?.custom}),
}))

const button_styles = computed(() => ({
  ...(props.button.label?.color && {color: props.button?.label?.color}),
  ...(props.button.label?.custom && {color: props.button?.label?.custom}),
  ...(props.button.label?.fontSize && {fontSize: props.button?.label?.fontSize}),
  ...(props.button.background?.color && {backgroundColor: props.button?.background?.color}),
  ...(props.button.background?.custom && {backgroundColor: props.button?.background?.custom}),
  ...((props.button?.marginTop || props.button?.marginTop === 0) && {marginTop: `${props.button.marginTop}px`}),
}))

const overlay_styles = computed(() => ({
  ...(props.overlay && {backgroundColor: props.overlay})
}))

const bannerHomeRightDynamicRef = 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 && bannerHomeRightDynamicRef.value) {
    observer.unobserve(bannerHomeRightDynamicRef.value)
  }
}

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

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

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

</script>