<template>
    <!-- Testimonial Thumbs 1 -->
    <div ref="testimonialThumbs1" class="testimonial-thumbs1" data-thumb1-slide="3" data-tablet="2" data-mobile="2"
        data-mobile-sm="1" :data-center="dataCenter">
        <div v-for="(image, index) in testimonialImages" :key="index" class="text-center justify-content-center d-flex">
            <img alt="image-testimonial" :src="generateImgPath(image)" />
        </div>
    </div>

    <!-- Testimonial Descriptions -->
    <div class="testimonial-top">
        <div :class="`${textDesc}`">
            <p :class="`testimonial-desc ${FontSize} fw-normal ${textCenter === true ? 'text-center' : ''} fst-italic`">
                Velocity is crucial in marketing. The campaigns we can put together, the more pages we can
                create, the bigger we feel, and the more touch points we have with customers.
            </p>
        </div>
        <div :class="`${textDesc}`">
            <p :class="`testimonial-desc ${FontSize} fw-normal ${textCenter === true ? 'text-center' : ''} fst-italic`">
                Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s
                standard dummy text ever since the 1500s, when an unknown printer took a galley.
            </p>
        </div>
        <div :class="`${textDesc}`">
            <p :class="`testimonial-desc ${FontSize} fw-normal ${textCenter === true ? 'text-center' : ''} fst-italic`">
                Simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard
                dummy text ever since the 1500s, when an unknown printer took a galley.</p>
        </div>
        <div :class="`${textDesc}`">
            <p :class="`testimonial-desc ${FontSize} fw-normal ${textCenter === true ? 'text-center' : ''} fst-italic`">
                Dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
                text ever since the 1500s, when an unknown.</p>
        </div>
        <div :class="`${textDesc}`">
            <p :class="`testimonial-desc ${FontSize} fw-normal ${textCenter === true ? 'text-center' : ''} fst-italic`">
                Text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text
                ever since the 1500s, when an unknown printer took a gallery .</p>
        </div>
        <div :class="`${textDesc}`">
            <p :class="`testimonial-desc ${FontSize} fw-normal ${textCenter === true ? 'text-center' : ''} fst-italic`">
                Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
                standard dummy text ever since the 1500s, when an unknown printer.</p>
        </div>
    </div>

    <!-- Testimonial Thumbs 2 -->
    <div v-if="mediaServices" ref="testimonialThumbs2" class="testimonial-thumbs2 testimonial-dots"
        data-thumb2-slide="1" data-tablet="1" data-mobile="1" data-mobile-sm="1">
        <div v-for="(author, index) in testimonialAuthors" :key="index" class="slick-slide">
            <div class="testimonial-avtar d-flex gap-3">
                <img alt="img-testimonial" class="img-fluid center-block img-testimonial-1"
                    :src="generateImgPath(author.image)" />
                <div class="author">
                    <h5 class="title mb-2"></h5>
                    <span class="designation"></span>
                </div>
            </div>
        </div>
    </div>
    <div v-else ref="testimonialThumbs2" class="testimonial-thumbs2" data-thumb2-slide="5" data-tablet="2"
        data-mobile="2" data-mobile-sm="1">
        <div v-for="(author, index) in testimonialAuthors" :key="index" class="slick-slide">
            <div class="testimonial-avtar d-flex justify-content-center gap-3">
                <img alt="img-testimonial" class="img-fluid center-block img-testimonial"
                    :src="generateImgPath(author.image)" />
                <div class="author">
                    <h5 class="title mb-2"></h5>
                    <span class="designation"></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import $ from 'jquery';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import 'slick-carousel';

const generateImgPath = (path) => {
    return window.origin + import.meta.env.BASE_URL + path;
};


const props = defineProps({
    dataCenter: { type: Boolean, default: true },
    textDesc: { type: String, default: '' },
    FontSize: { type: String, default: '' },
    textCenter: { type: Boolean, default: false },
    mediaServices: { type: Boolean, default: false }
})

const testimonialImages = ref([
    '/assets/images/testimonial/testi-icon-05.png',
    '/assets/images/testimonial/testi-icon-03.png',
    '/assets/images/testimonial/testi-icon-04.png',
    '/assets/images/testimonial/testi-icon-02.png',
    '/assets/images/testimonial/testi-icon-01.png',
    '/assets/images/testimonial/testi-icon-07.png',
]);

const testimonialAuthors = ref([
    { name: 'Jason Roger', designation: 'Designer', image: '/assets/images/testimonial/author-5.png' },
    { name: 'Jennifer Walker', designation: 'Designer', image: '/assets/images/testimonial/author-1.png' },
    { name: 'JD Scot', designation: 'Designer', image: '/assets/images/testimonial/author-4.png' },
    { name: 'Fitt Morgan', designation: 'Designer', image: '/assets/images/testimonial/author-3.png' },
    { name: 'Nik Jorden', designation: 'Designer', image: '/assets/images/testimonial/author-2.png' },
    { name: 'Julia Cooper', designation: 'Designer', image: '/assets/images/testimonial/author-6.png' },
]);

const testimonialThumbs1 = ref(null);
const testimonialThumbs2 = ref(null);


function callTestimonialSlick() {
    // Testimonial Thumbs 1
    $(testimonialThumbs1.value).slick({
        slidesToShow: $(testimonialThumbs1.value).data("thumb1-slide"),
        slidesToScroll: 1,
        centerMode: $(testimonialThumbs1.value).data("center"),
        infinite: true,
        vertical: false,
        arrows: false,
        asNavFor: ".testimonial-top, .testimonial-thumbs2",
        focusOnSelect: true,
        draggable: true,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    vertical: false,
                    centerMode: false,
                    slidesToShow: $(testimonialThumbs1.value).data("tablet"),
                },
            },
            {
                breakpoint: 767,
                settings: {
                    vertical: false,
                    centerMode: false,
                    slidesToShow: $(testimonialThumbs1.value).data("mobile"),
                },
            },
            {
                breakpoint: 479,
                settings: {
                    vertical: false,
                    slidesPerRow: 1,
                    centerMode: false,
                    slidesToShow: $(testimonialThumbs1.value).data("mobile-sm"),
                },
            },
        ],
    });

    // Testimonial Thumbs 2
    $(testimonialThumbs2.value).slick({
        slidesToShow: $(testimonialThumbs2.value).data("thumb2-slide"),
        slidesToScroll: 1,
        centerMode: true,
        arrows: false,
        dots: true,
        draggable: true,
        infinite: true,
        asNavFor: ".testimonial-top, .testimonial-thumbs1",
        focusOnSelect: true,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    vertical: false,
                    centerMode: false,
                    slidesToShow: $(testimonialThumbs2.value).data("tablet"),
                },
            },
            {
                breakpoint: 767,
                settings: {
                    vertical: false,
                    centerMode: false,
                    slidesToShow: $(testimonialThumbs2.value).data("mobile"),
                },
            },
            {
                breakpoint: 479,
                settings: {
                    vertical: false,
                    slidesPerRow: 1,
                    centerMode: false,
                    slidesToShow: $(testimonialThumbs2.value).data("mobile-sm"),
                },
            },
        ],
    });

    // Testimonial Top
    $(".testimonial-top").slick({
        autoplay: false,
        slidesPerRow: 1,
        slidesToShow: 1,
        asNavFor: ".testimonial-thumbs1, .testimonial-thumbs2",
        arrows: false,
        draggable: true,
        responsive: [
            {
                breakpoint: 767,
                settings: {
                    vertical: false,
                    fade: true,
                },
            },
        ],
    });
}

onMounted(() => {
    callTestimonialSlick();
});
</script>