<template>
  <div v-if="config.slides.length > 0" class="app-banner" :class="classList">
    <Swiper
        :effect="slideEffect"
        class="mainpage-slider select-none"
        :slides-per-view="1"
        :space-between="config.space_between"
        :pagination="pagination"
        :lazy="true"
        :modules="modules"
        :scrollbar="scrollbar"
        :free-mode="config.free_mode"
        :loop="config.loop"
        :autoplay="autoplay"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
        @sliderMove="hapticScroll"
    >
      <SwiperSlide v-for="slide in config.slides" :key="slide.id">
        <RouterLink
            v-if="slide?.link?.type === 'category'"
            :to="{name: 'product.categories.show', params: {category_id: slide.link.value.category_id}}"
            @click="sliderClick(slide)"
        >
          <img :src="slide.image" :alt="slide.title" loading="lazy">
        </RouterLink>

        <RouterLink
            v-else-if="slide?.link?.type === 'product'"
            :to="{name: 'product.show', params: {id: slide.link.value.product_id}}"
            @click="sliderClick(slide)"
        >
          <img :src="slide.image" :alt="slide.title" loading="lazy">
        </RouterLink>

        <img
            v-else-if="slide?.link?.type === 'url'"
            :src="slide.image"
            :alt="slide.title"
            loading="lazy"
            @click="openExternalLink(slide.link.value.url, slide)"
        >

        <img v-else :src="slide.image" :alt="slide.title" loading="lazy"/>
      </SwiperSlide>
    </Swiper>
  </div>

  <div v-else>
    <div role="alert" class="alert alert-warning">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
      </svg>
      <span>У слайдера не загружены изображения.</span>
    </div>
  </div>
</template>

<script setup>
import {Swiper, SwiperSlide} from 'swiper/vue';
import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
import {Autoplay, EffectCards, EffectCoverflow, EffectCube, EffectFlip, Scrollbar} from 'swiper/modules';
import {computed, onMounted} from "vue";
import {useHapticScroll} from "@/composables/useHapticScroll.js";

const props = defineProps({
  config: {
    type: Object,
    required: true,
  },

  goalName: {
    type: String,
    default: null,
  }
});

const hapticScroll = useHapticScroll();
const yaMetrika = useYaMetrikaStore();
const modules = [
  Autoplay,
  EffectCards,
  EffectFlip,
  EffectCube,
  Scrollbar,
  EffectCoverflow,
];

const classList = computed(() => {
  if (props.config.effect === 'cards') {
    return ['px-8'];
  }

  if (props.config.effect === 'flip') {
    return ['px-4', 'pb-4', 'pt-4'];
  }

  if (props.config.effect === 'cube') {
    return ['px-4', 'pb-10'];
  }

  return ['px-4'];
});

const onSwiper = (swiper) => {

};
const onSlideChange = () => {

};

const slideEffect = computed(() => {
  if (props.config.effect === 'slide') {
    return null;
  }

  return props.config.effect;
});

const pagination = computed(() => {
  if (props.config.pagination) {
    return {
      clickable: true, dynamicBullets: false,
    };
  }
  return false;
});

const scrollbar = computed(() => {
  if (props.config.scrollbar) {
    return {
      hide: true,
    };
  }
  return false;
});

const autoplay = computed(() => {
  if (props.config.autoplay) {
    return {
      delay: 3000,
      reverseDirection: false,
    };
  }

  return false;
});

function sliderClick(slide) {
  if (props.goalName) {
    yaMetrika.reachGoal(props.goalName, {
      banner: slide.title,
    });
  }
}

function openExternalLink(link, slide) {
  if (!link) {
    return;
  }

  yaMetrika.reachGoal(YA_METRIKA_GOAL.SLIDER_HOME_CLICK, {
    banner: slide.title,
  });

  window.Telegram.WebApp.openLink(link, {try_instant_view: false});
}

onMounted(() => {
  console.debug('[Mainpage Slider] Init with config: ', props.config);
});
</script>

<style>
.app-banner {
  aspect-ratio: 740 / 400;
}

.app-banner .swiper {
  overflow: visible;
}

.app-banner .swiper-horizontal > .swiper-pagination-bullets {
  bottom: -20px;
}

.app-banner .swiper-horizontal .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-banner .swiper-horizontal .swiper-slide img {
  border-radius: var(--radius-box);
}


.app-banner .mainpage-slider .swiper-pagination-bullet {
  background-color: var(--color-neutral-content); /* неактивные точки */
  opacity: 0.6; /* чуть прозрачнее, чтобы не отвлекали */
}

.app-banner .mainpage-slider .swiper-pagination-bullet-active {
  background-color: var(--color-primary); /* активная точка */
  opacity: 1;
}
</style>