<template>
	<section class="tab-section">
		<div class="tab-section__desktop-btns">
			<desktop-tab-title
				:title="$t('review')"
				icon="icon-find_in_page"
				:is-active="isDescriptionTabActive"
				@click.native="changeActiveTab(tabsList.description)"
			/>
			<desktop-tab-title
				:title="$t('specifications')"
				icon="icon-view_list"
				:is-active="isPropertiesTabActive"
				v-show="isPropertiesSectionVisible"
				@click.native="changeActiveTab(tabsList.properties)"
			/>
			<desktop-tab-title
				:title="$t('comments')"
				icon="icon-mode_comment"
				:is-active="isCommentsTabActive"
				@click.native="changeActiveTab(tabsList.comments)"
			/>
			<desktop-tab-title
				:title="$t('manualFiles')"
				icon="icon-file_download"
				:is-active="isFilesTabActive"
				@click.native="changeActiveTab(tabsList.files)"
			/>
		</div>
		<description-tab
			:is-active="isDescriptionTabActive"
			:data-source="dataSource.description"
		/>
		<LazyHydrate when-visible>
			<properties-tab
				:is-active="isPropertiesTabActive"
				:data-source="acfList"
				v-if="isPropertiesSectionVisible"
			/>
		</LazyHydrate>
		<LazyHydrate when-visible>
			<comments-tab
				:is-active="isCommentsTabActive"
				:product-id="dataSource.id"
			/>
		</LazyHydrate>
		<LazyHydrate when-visible>
			<files-tab
				:is-active="isFilesTabActive"
				:data-source="dataSource.files"
				:videos="dataSource.videos"
			/>
		</LazyHydrate>
	</section>
</template>
<script>
import commentsTab from "./tab/products_tabs_comments";
import descriptionTab from "./tab/product_tabs_desctiption";
import desktopTabTitle from "./tab/product_tabs_desktop_title";
import filesTab from "./tab/products_tabs_files";
import propertiesTab from "./tab/products_tabs_properties";
import LazyHydrate from "vue-lazy-hydration";

import { cetegorizeAcsObject } from "../../helper/product_helper";

export default {
	name: "ProductTabsSection",
	components: {
		commentsTab,
		descriptionTab,
		desktopTabTitle,
		filesTab,
		propertiesTab,
		LazyHydrate,
	},
	computed: {
		acfList() {
			return cetegorizeAcsObject(this.dataSource.acf);
		},
		hasFiles() {
			return this.dataSource.files.length > 0;
		},
		isCommentsTabActive() {
			return this.activeTab == this.tabsList.comments;
		},
		isDescriptionTabActive() {
			return this.activeTab == this.tabsList.description;
		},
		isFilesTabActive() {
			return this.activeTab == this.tabsList.files;
		},
		isPropertiesTabActive() {
			return this.activeTab == this.tabsList.properties;
		},
		isPropertiesSectionVisible() {
			return Object.keys(this.acfList).length > 0;
		},
		tabsList() {
			return {
				comments: 1,
				description: 2,
				files: 3,
				properties: 4,
			};
		},
	},
	data() {
		return {
			activeTab: 2,
		};
	},
	methods: {
		changeActiveTab(newTab) {
			this.activeTab = newTab;
		},
	},
	props: {
		dataSource: {
			required: true,
			type: Object,
		},
	},
};
</script>
<style lang="scss" scoped>
.tab-section {
	margin: $padding-default auto;
	content-visibility: auto;
	
	&__desktop-btns {
		display: none;
	}

	@media (min-width: $tablet) {
		margin: $padding-default;
	content-visibility: unset;

		&__desktop-btns {
			display: block;
			font-size: 0;
			line-height: 0;
		}
	}
}
</style>