<template>
	<div class="product"
		 @click="goProductPage">
		<nuxt-link :to="localePath(dataSource.link)"
				   class="product__image-wrapper">
			<picture v-if="imageSrc">
				<source :srcset="imageSourceAsAvif"    />
				<img class="product__image"
					:src="imageSrc"
					:alt="dataSource.title"
					loading="lazy"
					width="200"
					height="200"
					decoding="async"
				/>
			</picture>
		</nuxt-link>
		<h3 class="product__title">
			<nuxt-link :to="localePath(dataSource.link)"
					   class="product__title__link">
				{{ dataSource.title }}
			</nuxt-link>
		</h3>
		<div class="product__description"
			 v-html="dataSource.summary"></div>
		<arrow-btn :href="localePath(dataSource.link)"
				   :title="$t('seeAll')"
				   class="product__show-more" />
	</div>
</template>
<script>
import arrowBtn from "@/components/shared/other/arrow_btn";
import { convertImagePathToAvif} from "../../helper/helper";

export default {
	name: "ProductCard",
	components: {
		arrowBtn
	},
	computed: {
		imageSrc() {
			const hasImage = this.dataSource.images.length > 0;
			if (hasImage) return this.dataSource.images[0];
			return null;
		},
		imageSourceAsAvif() {
			if (!this.imageSrc) return null;

			return convertImagePathToAvif(this.imageSrc);
		}
	},
	methods: {
		goProductPage() {
			let newPath = this.localePath(this.dataSource.link);
			this.$router.push(newPath);
		}
	},
	props: {
		dataSource: {
			required: true,
			type: Object
		}
	}
};
</script>
<style lang="scss" scoped>
@keyframes image-section-transition {
  0% {
    opacity: 0;
    transform: scale(0);
  }

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

.product {
	background: $color-white;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
	margin: 0 auto $padding-default/2 auto;
	padding: $padding-default;
	position: relative;
	transition: all ease-in-out 0.2s;

	&:hover {
		box-shadow: 0 0 3px rgba(0, 0, 0, 0.26);
		transform: scale(1.05);
	}

	&:after {
		clear: both;
		content: "";
		display: block;
	}

	&__image-wrapper {
		cursor: pointer;
		display: block;
		float: right;
		margin-left: $padding-default;
		overflow: hidden;
		position: relative;
		text-decoration: none;
		width: 42%;

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

	&__image {
		animation-name: image-section-transition;
		animation-duration: 0.2s;
		animation-delay: 0.4s;
		animation-fill-mode: forwards;
		animation-iteration-count: 1;
		height: auto;
		transform: scale(0);
		object-fit: contain;
		position: absolute;
		right: 0%;
		top: 0%;
		height: 100%;
		width: 100%;
	}

	&__title {
		color: $color-text;
		cursor: pointer;
		font-weight: bold;
		font-size: 12px;
		margin: $padding-default/2 auto;
		overflow: hidden;
		padding: 0;
		text-align: right;
		text-overflow: ellipsis;

		&__link {
			color: $color-text;
			text-decoration: none;
		}
	}

	&__description {
		color: $color-text--light;
		cursor: default;
		font-size: 12px;
		height: 115px;
		overflow: hidden;
		line-height: 1.5;
		margin: 0 auto;

		/deep/ p {
			margin: 0 auto;
			padding: 0;
			white-space: nowrap;

			&:before {
				content: "\e915";
				color: $color-success;
				display: inline-block;
				font-family: "icomoon" !important;
				margin-left: 5px;
				font-size: 20px;
				vertical-align: middle;
			}
		}
	}

	&__show-more {
		display: none;
	}

	@media (min-width: $tablet) {
		border-radius: $border-radius;
		display: inline-block;
		margin: $padding-default/2;
		vertical-align: top;
		width: calc(50% - #{$padding-default});

		&__image-wrapper {
			margin: $padding-default auto;
		}

		&__title {
			height: 40px;
		}

		&__description {
			height: 188px;
			max-height: 188px;
			overflow: hidden;
		}
	}

	@media (min-width: $desktop) {
		width: calc(33.33% - #{$padding-default});

		&__image-wrapper {
			float: none;
			margin: 0 auto;
			width: 90%;
		}

		&__title {
			font-size: 14px;
		}

		&__description {
			font-size: 14px;
			height: 185px;
			max-height: 185px;
			text-align: right;
		}

		&__show-more {
			display: block;
			margin: 8px;
		}
	}

	@media (min-width: $desktop--large) {
		width: calc(25% - #{$padding-default});

		&__title {
			height: 40px;
		}

		&__description {
			height: 175px;
			max-height: 175px;
		}

		&__show-more {
			padding-top: 12px;
		}
	}
}

[data-lang="en"] {
	.product {
		&__image-wrapper {
			float: left;
			margin-left: 0;
			margin-right: $padding-default;
		}

		&__title {
			text-align: left;
		}

		&__description {
			/deep/ p {
				text-align: left !important;

				&:before {
					margin-left: 0;
					margin-right: 5px;
				}
			}
		}

		@media (min-width: $desktop) {
			&__image-wrapper {
				float: none;
				margin: 0 auto;
			}
		}
	}
}
</style>