<template>

    <div
            class="productListWrap"
            :class="[loading ? 'isLoading' : '', ...parentClass]"
            :id="parentId"
    >

        <template v-if="slider">


            <Swiper
                    :spaceBetween="sliderOptions.spaceBetween"
                    :loop="sliderOptions.loop"
                    :pagination="sliderOptions.pagination"
                    :navigation="sliderOptions.navigation"
                    :width="sliderOptions.width"
                    :slidesPerGroup="sliderOptions.slidesPerGroup"
                    :breakpoints="sliderOptions.breakpoints"
                    ref="productSlider"
                    :class="[products.length < 4 ? 'hideArrows' : '']"
            >

                <SwiperSlide
                        v-for="product in products"
                        :key="'img' + product.id"
                >

                    <product-card
                            :product="product"
                            :in-stock="product.in_stock"
                            :from-price="product.from_price"
                            :product-url="product.url"
                            :product-image="product.image"
                            :basket-button-data="product.basket_button_data"
                            :category="product.main_category"
                            :preview-only="cardPreviews"
                            :slideshow="false"
                            :minimal="minimal"
                            :class="[...cardClass]"
                            :use-trustpilot="true"
                    ></product-card>

                </SwiperSlide>

            </Swiper>


        </template>

        <template v-else>

            <ul
                    class="productList"
                    :class="[...listClass]"
                    v-if="hasProducts(products)"
            >

                <template v-for="product in products">

                    <li>

                        <product-card
                                :product="product"
                                :in-stock="product.in_stock"
                                :from-price="product.from_price"
                                :product-url="product.url"
                                :product-image="product.image"
                                :basket-button-data="product.basket_button_data"
                                :category="product.main_category"
                                :preview-only="cardPreviews"
                                :slideshow="false"
                                :minimal="minimal"
                                :class="[...cardClass]"
                                :use-trustpilot="true"
                        ></product-card>

                    </li>

                </template>

            </ul>

        </template>


        <div class="noProducts" v-else>
            <h4 class="noProductsTitle">No products found</h4>
        </div> <!-- .noProducts -->

    </div> <!-- .browseProducts -->


</template>

<script>

import Swiper from '@site/js/components/swiper/Swiper.vue';
import SwiperSlide from '@site/js/components/swiper/SwiperSlide.vue';

export default {
    name: "ProductList",
    components: {
        Swiper,
        SwiperSlide
    },
    props: {
        slider: {
            type: [Boolean],
            default (rawProps) {
                return false;
            }
        },
        parentId: {
            type: [String],
            default (rawProps) {
                return '';
            }
        },
        parentClass: {
            type: [Array],
            default (rawProps) {
                return [];
            }
        },
        listClass: {
            type: [Array],
            default (rawProps) {
                return [];
            }
        },
        cardClass: {
            type: [Array],
            default (rawProps) {
                return [];
            }
        },
        products: {
            type: [Object, Array, Boolean],
            default (rawProps) {
                return [];
            }
        },
        loading: {
            type: [Boolean],
            default (rawProps) {
                return false;
            }
        },
        minimal: {
            type: [Boolean],
            default (rawProps) {
                return false;
            }
        },
        cardPreviews: {
            type: [Boolean],
            default (rawProps) {
                return false;
            }
        },
    },
    data() {
        return {
            sliderOptions: {
                spaceBetween: 40,
                loop: false,
                pagination: false,
                navigation: true,
                width: 385,
                slidesPerGroup: 1,
                breakpoints: {
                    640: {
                        width: 282,
                        slidesPerGroup: 1,
                        spaceBetween: 16
                    }
                }
            },
        }
    },
    methods: {

        hasProducts(products) {

            if(typeof products != 'undefined') {
                return products.length;
            }

            return false;

        }

    }
}
</script>
