<template>
	<section class="image__section">
		<div class="image__big-item-wrapper" v-show="hasImage">
			<picture>
						<source :srcset="activeImageSrcAvif"    />
						<img
							:alt="alt"
							:src="activeImageSrc"
							class="image__big-item"
							:width="300"
							:height="300"
							loading="eager"
							decoding="sync"
							fetchpriority="high"
						/>
					</picture>
					 
		</div>
		<div class="image__slider-wrapper" v-if="hasImagesSlider">
			<div
				class="image__slide"
				v-for="(img, index) in dataSource"
				:key="`${img}-${index}`"
				:style="getSlideBackground(img)"
				:class="{ 'image__slide--active': index == activeImageIndex }"
				@click="activeImageIndex = index"
			/>
		</div>
	</section>
</template>
<script>
// import "vue-inner-image-zoom/lib/vue-inner-image-zoom.css";
// import imageZoom from "vue-inner-image-zoom";
import { convertImagePathToAvif} from "../../helper/helper";

export default {
	name: "ProductBaseInfoImages",
	computed: {
		activeImageSrc() {
			if (this.hasImage){
				const source = this.dataSource[this.activeImageIndex];
				return source;
			}
			return "#";
		},
		activeImageSrcAvif() {
			return convertImagePathToAvif(this.activeImageSrc);
		},
		imageSources() {
			return [
					{ srcSet: this.activeImageAvifSrc, type:"image/avif", with: 300, height: 300 },
					{ srcSet:this. activeImageSrc, with: 300, height: 300  }
				]
		},
		hasImage() {
			return this.dataSource.length > 0;
		},
		hasImagesSlider() {
			return this.dataSource.length > 1;
		},
	},
	data() {
		return {
			activeImageIndex: 0,
		};
	},
	methods: {
		getSlideBackground(imgSrc) {
			return {
				"background-image": `url(${imgSrc})`,
				"background-image": `url(${convertImagePathToAvif(imgSrc)})`,
			};
		},
	},
	props: {
		alt: {
			require: true,
			type: String,
		},
		dataSource: {
			required: true,
			type: Array,
		},
	},
};
</script>
<style lang="scss" scoped>
.image {
	&__section {
		margin: 0 auto 0 auto;
		padding-bottom: $padding-default;
		position: relative;
		contain: layout;
	}

	&__big-item-wrapper {
		aspect-ratio: 1 / 1;
		animation-name: image-section-transition;
		animation-duration: 0.4s;
		animation-delay: 4s;
		animation-fill-mode: forwards;
		animation-iteration-count: 1;
		margin: $padding-default auto;
		max-width: 300px;
		overflow: hidden;
		position: relative;
		transform: scale(0);

		&:after {
			content: "";
			display: block;
			padding-top: 100%;
		}
	}

	&__big-item {
		height: auto;
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
	}

	&__slider-wrapper {
		position: relative;
		text-align: center;
	}

	&__slide {
		$slide-size: 28px;
		background-color: transparent;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		border: 1px solid $color-border;
		border-radius: 4px;
		display: inline-block;
		height: $slide-size;
		margin: 0 5px;
		width: $slide-size;
	}

	@media (min-width: $tablet) {
		&__section {
			border-bottom: none;
			float: right;
			margin-bottom: 0;
			margin-left: $padding-default * 2;
			margin-top: -85px;
			padding-left: $padding-default * 1.5;
			width: 33%;
		}
	}

	@media (min-width: $desktop) {
		&__section {
			padding: 0 $padding-default * 2;
			padding-right: 0;
			width: 25%;
		}
	}
}

@keyframes image-section-transition {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

[data-lang="en"] {
	.image {
		@media (min-width: $tablet) {
			&__section {
				float: left;
				margin-bottom: 0;
				margin-left: auto;
				margin-right: $padding-default * 2;
				padding-left: 0;
				padding-right: $padding-default * 1.5;
			}
		}
		@media (min-width: $desktop) {
			&__section {
				padding: 0 $padding-default * 2;
				padding-left: 0;
			}
		}
	}
}
</style>
<style lang="scss">
.iiz__hint {
	bottom: auto !important;
	top: -10px !important;
	right: -10px !important;
}

.image__big-item {
	position: absolute !important;
	left: 0;
	top: 0;
}
[data-lang="en"] {
	.iiz__hint {
		left: -10px !important;
		right: auto !important;
	}
}
</style>