TsBannerNewLaunch

<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 font-gilroy',
          (props.product?.enableRedirection || props.landingPageUrl) && 'inline-block'
      )"
  >
    <TsNuxtCard data-testid="home-new-launch-main" append-class="p-0 relative bg-white sm:h-full max-w-[505px]">
      <div ref="bannerNewLaunchRef" class="absolute top-6 left-6  z-10">
                <span
                  v-if="props.tag?.label?.text"
                  class="inline-block max-w-max text-xs mb-4 px-3 py-1 bg-transparent text-white border-idle-white border rounded-full"
                  :style="tag_styles"
                >
                {{ props.tag.label.text }}
              </span>
        <div
          v-if="props.title?.text || (props.product?.enableTitle && product_data && product_data?.full_name)"
          :class="twMerge('text-[24px] font-semibold text-[#ffffff] leading-none line-clamp-3 mb-2')"
          :style="title_styles"
          v-html="(props.product?.enableTitle && product_data && product_data?.full_name) ? product_data?.full_name : props.title?.text">
        </div>

        <div
          v-if="props.description?.text || (props.product?.enableDescription && product_data && product_data?.description)"
          :class="twMerge('text-[20px] font-bold text-white line-clamp-3 mb-2')"
          :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" :style="price_styles">
            <span class="text-2xl lg:text-[36px] font-bold ">
              {{ product_price }}
            </span>&nbsp;
          <br class="hidden lg:block" />
          <span class="font-semibold leading-none">
              {{ rootStore.isIncVat ? 'Inc.' : 'Excl.' }} {{useTranslation("vat","BTW")}}
            </span>
        </div>

        <!--      <div class="flex items-center space-x-2">-->
        <!--        <NuxtImg src="/images/logos/pause.svg" width="32"/>-->
        <!--        <NuxtImg src="/images/logos/line.svg" width="128" height="6"/>-->
        <!--      </div>-->

      </div>
      <div class="rounded-xl 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 || '/banners/desktop/new-launch-banner-1.mp4'"
               class="w-full"
               playsinline
               autoplay muted loop>
          <source :src="props.background?.src || '/banners/desktop/new-launch-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/new-launch-dewalt-cordless-desktop.png'"
                 class="w-full" :width="isMobile ? '360' : '496'"/>
      </div>
      <!--    <NuxtImg-->
      <!--        :src="isMobile ? '/images/new-launch-dewalt-cordless.png' : props.desktopImage"-->
      <!--        :width="isMobile ? '360' : '496'" :height="isMobile ? '303' : '380'" class="w-full sm:h-full"/>-->
    </TsNuxtCard>
  </component>
</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;
  tag?: object;
  title?: object;
  description?: object;
  price?: object;
}

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

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

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

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

</script>