TsBannerHomeHeroMobile

<template>
  <div>
    <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 font-gilroy',
          (props.product?.enableRedirection || props.landingPageUrl) && 'inline-block'
      )"
    >
      <div class="max-sm:min-w-[320px] max-sm:max-w-[320px]">
        <div class="rounded-xl w-full overflow-hidden 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/mobile/banner-1.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 || '/banners/desktop/images/banner-1.gif'"
                   class="w-full"
                   width="720"
          />
        </div>

        <div v-if="props.brandLogo && props.brandLogo.src"
             :class="twMerge('absolute top-0 right-0 p-5')"
        >
          <NuxtImg :src="props.brandLogo.src"
                   width="120"
          />
        </div>

        <div ref="bannerHomeHeroMobileRef" class="w-full absolute top-0 left-0 pl-5 py-5 pr-0">
          <TsMedia :append-class="twMerge('h-full')">
            <TsMediaContent
                :append-class="twMerge('flex flex-col justify-center')">
              <div class="h-[24px] mb-2">
            <span
                v-if="props.tag?.label?.text"
                class="inline-block max-w-max text-xs px-2 py-0.5 bg-transparent text-white border-idle-white border rounded-full"
                :style="tag_styles"
            >
            {{ props.tag?.label?.text }}
          </span>
              </div>

              <div
                  v-if="props.title?.text || (product_data && product_data?.full_name)"
                  :class="twMerge('text-[22px] font-black text-[#FFBD16] leading-none 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
                  v-if="props.description?.text || (product_data && product_data?.description)"
                  :class="twMerge('text-[14px] font-bold text-white leading-none line-clamp-2 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">
            <span class="text-[28px] lg:text-[36px] font-bold ">
              {{ product_price }}
            </span>&nbsp;
                <br />
                <span class="text-white font-semibold leading-none">
              {{ rootStore.isIncVat ? 'Inc.' : 'Excl.' }} VAT
            </span>
              </div>

              <button
                  v-if="props.button?.label?.text"
                  class="bg-primary text-white text-[16px] leading-[24px] font-semibold max-w-max rounded-lg    px-5 py-2 mt-2"
                  :style="button_styles"
              >
                {{props.button?.label?.text}}
              </button>

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

</template>

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

const rootStore = useRootStore();
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;
  button?: object;
}

const bannerHomeHeroMobileRef = ref('')

let observer;

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

const props = withDefaults(defineProps<Props>(), {
  tag: () => ({
    label: {
      text: 'New'
    }
  }),
  title: () => ({
    text: 'PERFORM TO A NEW STANDARD'
  }),
  description: () => ({
    text: 'Essential Tools Unleashed!'
  }),
  button: () => ({
    label: 'Know More'
  })
})

const { isMobile } = useDevice();
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 is_video = computed(() => {
  const allowed_videos_extensions = [".mp4", ".webm"];
  const allowed_images_extensions = [".jpg", "jpeg", ".png", ".gif", ".svg", ".webp"];

  if(props.background?.src && props.background.src) return true;

  return false;
})

const NuxtLink = resolveComponent('NuxtLink');
const nuxt_link_attrs = computed(() => ({
  ...(props.landingPageUrl && {to: props.landingPageUrl}),
  ...(props.product?.enableRedirection && product_data.value && {to: `/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 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 tag_styles = computed(() => ({
  ...(props.tag?.label?.color && {color: props.tag?.label?.color}),
  ...(props.tag?.label?.custom && {color: props.tag?.label?.custom}),
  ...(props.tag?.label?.fontSize && {fontSize: props.tag?.label?.fontSize}),
  ...(props.tag?.borderColor?.color && {border: `1px solid ${props.tag?.borderColor?.color}`}),
  ...(props.tag?.borderColor?.custom && {border: `1px solid ${props.tag?.borderColor?.custom}`}),
  ...((props.tag?.marginBottom || props.tag?.marginBottom === 0) && {marginBottom: `${props.tag.marginBottom}px`}),
}))

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

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

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

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

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

</script>