<template>
  <div class="row container">
    <ClientOnly placerholder="Loading...">
      <!-- <div class="arrow-left-wrapper col-2 col-sm-1">
        <img
          class="arrow"
          src="@/assets/img/categories-row-arrow-left.svg"
          alt=""
          @click="slideCarousel('prev')"
        />
      </div> -->
      <Carousel
        ref="productDetails"
        class="carousel"
        :items-to-show="4"
        :gap="1"
        :pagination-enabled="false"
        :wrap-around="false"
        :mouse-wheel="true"
        :breakpoints-enabled="true"
      >
        <Slide v-for="item in items" :key="item.id" class="slide-container">
          <NuxtLink :to="formattedItem(item).url" class="slide">
            <div class="image-container">
              <img class="image" :src="formattedItem(item).image" alt="" />
            </div>
            <div class="details-container">
              <p>{{ formattedItem(item).name }}</p>
            </div>
          </NuxtLink>
        </Slide>
        <template #addons>
          <Navigation />
        </template>
      </Carousel>

      <!-- <div class="arrow-right-wrapper col-2 col-sm-1">
        <img
          class="arrow"
          src="@/assets/img/categories-row-arrow-right.svg"
          alt=""
          @click="slideCarousel('next')"
        />
      </div> -->
    </ClientOnly>
  </div>
</template>

<script>
import { Carousel, Slide, Navigation } from 'vue3-carousel'
import 'vue3-carousel/dist/carousel.css'
import defaultImage from '@/assets/img/latienda-product-default.png'

export default {
  components: {
    Carousel,
    Slide,
    Navigation
  },
  props: {
    type: {
      type: String,
      required: true,
    },
    items: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      defaultImage,
      config: {
        height: 200,
        breakpointMode: 'carousel', // o 'viewport'
        breakpoints: {
          300: {
            itemsToShow: 2,
            snapAlign: 'center',
          },
          400: {
            itemsToShow: 3,
            snapAlign: 'start',
          },
          500: {
            itemsToShow: 4,
            snapAlign: 'start',
          },
        },
      }
    }
  },
  methods: {
    formattedItem(item) {
      if (this.type === 'product') {
        return {
          name: item.name,
          image:
            item.image || this.defaultImage,
          url: `/productos/${item.id}`,
        }
      }
      if (this.type === 'company') {
        return {
          name: item.company_name,
          image:
            item.logo || this.defaultImage,
          url: `/c/${item.id}`,
        }
      }
      if (this.type === 'category') {
        return {
          name: item.name,
          image:
            item.image || this.defaultImage,
          url: `/busqueda?category=${item.name}`,
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.row {
  padding: 0 4rem;
  display: flex;
  align-items: center;
  justify-content: center
}

.slide-container {
  padding: 0.5rem;
}

a {
  text-decoration: none;
  color: $color-primary;
}

.slide {
  width: 237px;
  height: 316px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: stretch;
  padding: 0.5rem;
  background-color: #FDFCFB;
  border: 5px solid white;
  border-radius: 24px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
  text-decoration: none;
  p {
    text-align: center;
    display: -webkit-box;
    --webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    font-weight: $medium;
    font-size: $m;
  }
}

.image-container {
  width: 100%;
  height: 11rem;
  flex-shrink: 0;
  align-self: stretch;
  border-radius: 24px 24px 0 0;
  @include mobile {
    max-height: 10rem;
    max-width: 10rem;
  }
  .image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 24px 24px 0 0;
  }
}

.details-container {
  width: 100%;
  height: 100%;
  padding: 0.5rem;
  text-align: center;
  border-radius: 0 0 24px 24px;
  
}
</style>
