<template>
	<div class="product">
		<div class="product__header">
			<nuxt-link class="product__header__link"
					   :to="localePath(dataSource.link)">
				{{ dataSource.title }}
			</nuxt-link>
			<button class="product__download-btn"
					@click="getFile"
					title="download file"
					v-if="hasFile">
				<i class="icon-description product__download-btn__icon" />
				<span class="product__download-btn__text">
					{{ $t("download the manual") }}
				</span>
			</button>
		</div>
		<nuxt-link class="product__image-wrapper"
				   :to="localePath(dataSource.link)">
	
				 <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>
		<nuxt-link class="product__title__link"
				   :to="localePath(dataSource.link)">
			<h4 class="product__title">
				{{ dataSource.title }}
			</h4>
		</nuxt-link>

		<div class="product__description"
			 v-html="dataSource.summary"
			 @click="goProduct"></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: "ProductFullCard",
	components: {
		arrowBtn
	},
	computed: {
		hasFile() {
			return this.dataSource.files.length > 0;
		},
		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: {
		getFile() {
			window.open(this.dataSource.files[0].url);
		},
		goProduct() {
			let newPath = this.localePath(this.dataSource.link);
			this.$router.push(newPath);
		}
	},
	props: {
		dataSource: {
			required: true
		}
	}
};
</script>
<style lang="scss" scoped>
@keyframes image-section-transition {
  0% {
    opacity: 0;
    transform: scale(0);
  }

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

.product {
	$header-height: 36px;

	background: $color-white;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
	display: block;
	margin: 0 auto;
	margin-bottom: $padding-default;
	padding-bottom: $padding-default/2;
	position: relative;

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

	&__header {
		background: $color-border;
		color: $color-text;
		cursor: pointer;
		font-size: 12px;
		font-weight: bold;
		height: $header-height;
		line-height: $header-height;
		padding: 0 $padding-default;

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

	&__download-btn {
		background: transparent;
		border: none;
		color: $color-text--light;
		float: left;
		font-family: $font-family;
		height: $header-height;
		outline: none;
		padding: 0;

		&__icon {
			font-size: 20px;
		}

		&__text {
			display: none;
		}

		&:hover {
			color: $color-primary;
		}
	}

	&__image-wrapper {
		cursor: pointer;
		float: right;
		margin: $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);
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
	}

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

		&__link {
			display: block;
			text-decoration: none;
		}
	}

	&__description {
		color: $color-text--light;
		font-size: 12px;
		height: 150px;
		line-height: 1.8;
		margin: 0 auto;
		overflow: hidden;
		padding-left: $padding-default/2;

		/deep/ p {
			margin: 0 auto;
			padding: 0;
		}
	}

	&__show-more {
		display: none;
	}

	@media (min-width: $tablet) {
		border-radius: $border-radius;
		overflow: hidden;

		&__download-btn {

			&__text,
			&__icon {
				display: inline-block;
				vertical-align: middle;
			}
		}

		&__image-wrapper {
			margin-bottom: 0;
			margin-left: $padding-default * 2;
			width: 220px;
		}

		&__title {
			font-size: 16px;
			margin-top: $padding-default * 2;
		}

		&__description {
			font-size: 14px;
			height: 180px;
			overflow: hidden;
		}

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

[data-lang="en"] {
	.product {
		$header-height: 36px;

		&__download-btn {
			float: right;
		}

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

		&__description {
			padding-left: 0;
			padding-right: $padding-default/2;

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

		@media (min-width: $tablet) {
			&__image-wrapper {
				margin-left: $padding-default;
				margin-right: $padding-default * 2;
			}

			&__show-more {
				float: right;
			}
		}
	}
}
</style>