TsBannerHomePrimaryFullDynamic

<template>
  <div>
    <component
      is="div"
      :id="props.id || `product-banner-${random_id}`"
      :class="twMerge(
          'ts-banner relative w-full font-gilroy',
          (props.product?.enableRedirection || props.landingPageUrl) && 'inline-block'
      )"
    >
      <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 || '/banners/desktop/posters/banner-10.png'"
               class="w-full"
               playsinline
               autoplay muted loop>
          <source :src="props.background?.src || '/banners/desktop/banner-10.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-10.png'"
                 class="w-full" />
      </div>

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

      <div class="w-full h-full absolute top-0 left-0 pl-16 pt-10 pb-6 pr-0">
        <TsMedia>
          <TsMediaContent
            :append-class="twMerge('flex flex-col justify-center')">
          <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
              :class="twMerge('text-[36px] font-black text-[#FFBD16] 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.toUpperCase() : props.title?.text">
            </div>

            <div
              :class="twMerge('text-[20px] font-bold text-white leading-none line-clamp-2 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">
            <span class="text-[36px] font-bold ">
              {{ product_price }}
            </span>&nbsp;
              <span class="text-white font-semibold leading-none">
              {{ rootStore.isIncVat ? 'Inc.' : 'Excl.' }} VAT
            </span>
            </div>

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

          </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>
    </component>
  </div>

</template>

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

const rootStore = useRootStore();
const localePath=useLocalePath();
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 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: 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 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 getProductData = async (id) => {
  const data = await useAjaxEcom(
    '/products/getProducts',
    {
      method: 'post',
      params: {
        "products": [`${id}`]
      }
    }
  );

  return data?.data[0];
}

onMounted(async () => {
  random_id.value = useRandomUUID();
  if(props.product?.id) {
    product_data.value = await getProductData(product_id.value);
  }
});

watch(product_id, async () => {
  if(!props.product?.id) return;
  product_data.value = await getProductData(product_id.value);
})

</script>