<template lang="pug">
.o-slider.o-testimonial
	.slick-slider.o-slider__slider(
		ref="slider"
		data-module="slickjs",
		:data-module-options="JSON.stringify(returnSlickOptions())"
	)
		//@slot Each element placed here will be a slide
		slot
			.slick-slide.relative.o-slider__slide.w-full(
				v-for="item in items"
				:key="`slide${item.id}`"
				:ref="`slide${item.id}`"
			)
				.o-testimonial__background.relative.w-full.h-0.bg-contain.bg-no-repeat.w-full(
					:style="returnStyleObj(item.bgImgSrc)"
				)
				.o-testimonial__content.absolute.flex.flex-col.justify-between.top-0.w-full.h-full.p-10.text-white
					.o-testimonial__quote.relative.top-0.w-full
						p.o-testimonial__quote__text.text-3xxl {{ item.quote }}
						a(href="item.link").text-white.font-700.hover-text-white {{ item.linkText }}
							//@slot Each element placed here will be a slide
							slot
								Icon(name="chevron-right24", path="/spritemap.svg")
					.o-testimonial__footer
						p.o-testimonial__name {{ item.name }}
						p.o-testimonial__details {{ item.details }}
						p.o-testimonial__company {{ item.companyDetails }}

</template>

<script>
import $ from 'jquery'
import { addInitialPluginsAndHydrate } from '@/utils/conditioner'
import Icon from './Icon'

export default {
	components: {
		Icon,
	},
	props: {
		/** Array of the testimonials items */
		items: {
			type: Array,
			default: () => [],
		},
		/** Slick options that will be passed to $.slick() - Ref: https://kenwheeler.github.io/slick/#settings */
		slickOptions: {
			type: Object,
			default: () => {},
		},
		/** Slick options that are not string can be put here */
		slickOptionsHidden: {
			type: Object,
			default: () => {},
		},
		/** Set the width:height ratio of the slider */
		sliderHeightPercentage: {
			type: String,
			default: '66%',
		},
	},
	mounted() {
		const { $refs, slickOptionsHidden } = this
		$(this.$refs.slider).data('moduleOptionsHidden', {
			onAfterChange: () => {},
			...slickOptionsHidden,
		})

		addInitialPluginsAndHydrate(this.$el)
	},
	methods: {
		returnStyleObj(imgSrc) {
			return {
				backgroundImage: `url(${imgSrc})`,
				paddingTop: this.sliderHeightPercentage,
			}
		},
		returnSlickOptions() {
			return {
				...this.slickOptions,
				prevArrow:
					'<button type="button" class="arrow-prev"><svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.9429 1.05898C11.4636 1.57968 11.4636 2.4239 10.9429 2.9446L3.8857 10.0018L10.9429 17.059C11.4636 17.5797 11.4636 18.4239 10.9429 18.9446C10.4222 19.4653 9.57797 19.4653 9.05727 18.9446L1.05727 10.9446C0.536573 10.4239 0.536573 9.57968 1.05727 9.05898L9.05727 1.05898C9.57797 0.538282 10.4222 0.538282 10.9429 1.05898Z" fill="currentColor"/></svg></button>',
				nextArrow:
					'<button type="button" class="arrow-next"><svg width="12" height="20" viewBox="0 0 12 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.05727 1.05898C1.57797 0.538282 2.42219 0.538282 2.94289 1.05898L10.9429 9.05898C11.4636 9.57968 11.4636 10.4239 10.9429 10.9446L2.94289 18.9446C2.42219 19.4653 1.57797 19.4653 1.05727 18.9446C0.536573 18.4239 0.536573 17.5797 1.05727 17.059L8.11446 10.0018L1.05727 2.9446C0.536573 2.4239 0.536573 1.57968 1.05727 1.05898Z" fill="currentColor"/></svg></button>',
			}
		},
	},
}
</script>
<docs>
```jsx
const arr = [
    {
        id: 0,
        quote: 'Lorem ipsum dolor sit amet consectetur adipiscing elit, nulla maximus neque.',
        link: '#',
        linkText: 'Learn more',
        bgImgSrc: 'https://unsplash.it/1000/660',
        name: 'John Smith',
        details: 'Senior marketing manager',
        companyDetails: 'Webcoda, Sydney NSW'
    },
    {
        id: 1,
        quote: 'Lorem ipsum dolor sit amet consectetur adipiscing elit, nulla maximus neque.',
        link: '#',
        linkText: 'Learn more',
        bgImgSrc: 'https://unsplash.it/1000/660',
        name: 'John Wayne',
        details: 'Senior gunslinger',
        companyDetails: 'Webcoda, Sydney NSW'
    }
]

<Testimonials 
	style="max-width: 940px; margin: 0 auto;"
	:items="arr"
	sliderHeightPercentage="66%"
/>
```
</docs>
