<template>
	<div v-if="properties.length > 0" :class="rootClassList">
		<div
			class="properties__category__title"
			@click="toogleExpandationStatus"
		>
			{{ $t(category.name) }}
		</div>
		<div class="properties__category__items-list">
			<div
				v-for="property in properties"
				:key="property.key"
				class="properties__item"
			>
				<span class="properties__item__key">
					{{ $t(property.key.toLowerCase()) }}
				</span>
				<span :class="getValuesClassList(property.value)">
					{{ getValue(property.value) }}
				</span>
			</div>
		</div>
	</div>
</template>
<script>
import { isEnCharactersOnly } from "@/helper/helper";
export default {
	name: "PropertiesCategory",
	computed: {
		rootClassList() {
			return {
				properties__category: true,
				"properties__category--expanded": this.isExpanded,
			};
		},
		properties() {
			let temp = this.category.properties || [];
			return temp.filter((item) => {
				return item.value != null && item.value != "";
			});
		},
	},
	data() {
		return {
			isExpanded: true,
		};
	},
	methods: {
		getValue(value) {
			const isArray = Array.isArray(value);
			if (!isArray) return this.$t(value);

			let temp = [];
			for (let i = 0; i < value.length; i++) {
				temp[i] = this.$t(value[i]);
			}

			return temp.join(",");
		},
		getValuesClassList(value) {
			return {
				properties__item__value: true,
				"properties__item__value--ltr": isEnCharactersOnly(value),
			};
		},
		toogleExpandationStatus() {
			this.isExpanded = !this.isExpanded;
		},
	},
	props: {
		category: {
			required: true,
			type: Object,
		},
	},
};
</script>
<style lang="scss" scoped>
.properties {
	&__category {
		font-size: 14px;
		margin-bottom: $padding-default;

		&__title {
			color: $color-text;
			cursor: pointer;
			font-weight: bold;
			height: 32px;
			line-height: 32px;
			margin-bottom: $padding-default/2;

			&::before {
				border-bottom: 2px solid #8f8f8f;
				border-left: 2px solid #8f8f8f;
				content: "";
				display: inline-block;
				height: 5px;
				margin-left: 5px;
				transform: rotate(45deg);
				vertical-align: middle;
				width: 5px;
			}

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

		&__items-list {
			height: 0;
			overflow: hidden;
		}

		&--expanded {
			.properties__category__items-list {
				height: auto;
			}
			.properties__category__title::before {
				transform: rotate(320deg);
			}
		}
	}

	&__item {
		display: block;
		font-size: 0;
		padding: $padding-default/1.5;

		&:nth-child(2n) {
			background: $color-white--dark;
		}

		&__key,
		&__value {
			font-size: 14px;
			display: inline-block;
			vertical-align: middle;
			width: 50%;
		}

		&__key {
			font-weight: bold;
		}

		&__value {
			color: $color-text;
			&--ltr {
				direction: ltr;
				text-align: right;
			}
		}
	}
}

[data-lang="en"] {
	.properties {
		&__category {
			&__title {
				&::before {
					border-bottom: 2px solid #8f8f8f;
					border-left: none;
					border-right: 2px solid #8f8f8f;
					margin-left: 0;
					margin-right: 5px;
					transform: rotate(45deg);
				}
			}

			&--expanded {
				.properties__category__title::before {
					transform: rotate(320deg);
				}
			}
		}

		&__item__value--ltr {
			text-align: left;
		}
	}
}
</style>