<template>
	<LazyHydrate when-visible>
		<footer class="footer">
			<div class="footer__content">
				<div class="footer__column-1">
					<footer-title>
						{{ $t("pars mega products") }}
					</footer-title>
					<footer-link v-for="item in column1Links"
								 :key="item.id"
								 :is-external="item.isExternal"
								 :text="item.showName"
								 :href="item.linkUrl" />
				</div>
				<div class="footer__column-2">
					<footer-title>
						{{ $t("quick access") }}
					</footer-title>
					<footer-link v-for="item in column2Links"
								 :key="item.id"
								 :is-external="item.isExternal"
								 :text="item.showName"
								 :href="item.linkUrl" />
				</div>
				<div class="footer__column-3">
					<footer-title>
						{{ $t("contact info") }}
					</footer-title>
					<a :href="`tel:${telephoneLink}`"
					   class="footer__text footer__text--phone footer__text--en"
					   title="contact phone number"  
					   aria-label="contact phone number">
						<i class="icon-support footer__text__icon" />
						{{ telephone }}
					</a>
					<a :href="`tel:${telephone2Link}`"
						title="contact phone number"
						aria-label="contact phone number"
					   class="footer__text footer__text--phone footer__text--en">
						{{ telephone2 }}
					</a>
					<div class="footer__text">
						<i class="icon-mail_outline footer__text__icon" />
						{{ $t("contactEmailValue") }}
					</div>
					<div class="footer__text">
						<i class="icon-map footer__text__icon footer__text__icon--map" />
						{{ $t("contactAddressValue") }}
					</div>
					<a :href="$t('contactLinkdin')"
					   class="footer__social-link"
					   title="linkedin"
					   aria-label="linkedin">
						<i class="icon-linkedin" />
					</a>
					<a :href="$t('contactYoutubeLink')"
					   class="footer__social-link"
					   title="youtube"
					   aria-label="youtube">
						<i class="icon-youtube" />
					</a>
					<a :href="$t('contactTelegramLink')"
					   class="footer__social-link"
					   title="telegram"
					   aria-label="telegram">
						<i class="icon-telegram" />
					</a>
					<a :href="$t('contactInstagramLink')"
					   class="footer__social-link"
					   title="instagram link"
					   aria-label="instagram link">
						<i class="icon-instagram" />
					</a>
				</div>
				<div class="footer__column-4">
					<footer-title>
						{{ $t("about pars mega") }}
					</footer-title>
					<div class="footer__text">
						{{ $t("footerAboutLine1") }}
					</div>
					<div class="footer__text">
						{{ $t("footerAboutLine2") }}
					</div>
					<div class="footer__text">
						<i class="icon-access_time footer__text__icon" />
						{{ $t("contactWorkTimes") }}
					</div>
				</div>
			</div>
			<footer-copyright />
		</footer>
	</LazyHydrate>
</template>
<script>
import LazyHydrate from "vue-lazy-hydration";
import footerCopyright from "./app_footer_copyright";
import footerLink from "./app_footer_link";
import footerTitle from "./app_footer_title";

import { getFooterLinks } from "../../../api/api_list";

export default {
	name: "AppFooter",
	components: {
		footerCopyright,
		footerLink,
		footerTitle,
		LazyHydrate
	},
	computed: {
		column1Links() {
			return this.links
				.filter((item) => item.column == 1)
				.sort((a, b) => a.order - b.order);
		},
		column2Links() {
			return this.links
				.filter((item) => item.column == 2)
				.sort((a, b) => a.order - b.order);
		},

		instagramLink() {
			return this.$t("contactInstagramLink");
		},
		telegramLink() {
			return this.$t("contactTelegramLink");
		},
		telephone() {
			return this.$t("contactSupportPhoneValue");
		},
		telephone2() {
			return this.$t("contactSupportPhone2Value");
		},
		telephoneLink() {
			return this.$t("contactSupportPhonePureValue");
		},
		telephone2Link() {
			return this.$t("contactSupportPhone2PureValue");
		},
		twitterLink() {
			return this.$t("contactTwitterLink");
		}
	},
	data() {
		return {
			links: []
		};
	},
	async created() {
		const locale = this.$i18n.locale;
		this.links = await getFooterLinks(this.$axios, locale);
	}
};
</script>
<style lang="scss" scoped>
.footer {
	justify-self: end;
	background: $color-accent;
	bottom: 0;
	content-visibility: auto;
	margin-bottom: 0;
	margin-top: auto;
	right: 0;
	width: 100%;

	&__content {
		margin: 0 auto;
		max-width: $app-max-width;
		padding: $padding-default;
	}

	&__column-1,
	&__column-2 {
		display: inline-block;
		vertical-align: top;
		width: 49%;
	}

	&__column-3 {
		border-top: 1px solid $color-gray;
		display: block;
		margin-top: $padding-default/2;
	}

	&__column-4 {
		display: none;
	}

	&__text {
		color: $color-white--dark;
		display: block;
		font-size: 13px;
		line-height: 1.8;
		margin: $padding-default/1.5 0;
		text-decoration: none;

		&--en {
			direction: ltr;
			text-align: right;
		}

		&__icon {
			font-size: 20px;
			float: right;
			margin-left: 8px;

			&--map {
				margin-bottom: 30px;
			}
		}

		&--phone {
			display: inline-block;
			margin-left: 5px;
			vertical-align: top;
		}
	}

	&__social-link {
		color: $color-white--dark;
		display: inline-block;
		font-size: 20px;
		margin: 5px;
		margin-left: $padding-default * 2;
		text-decoration: none;
	}

	@media (min-width: $desktop) {

		&__column-1,
		&__column-2,
		&__column-3,
		&__column-4 {
			border: none;
			display: inline-block;
			margin-top: 0;
			vertical-align: top;
			width: 24.6%;
		}

		&__column-1,
		&__column-2 {
			width: 20.6%;
		}

		&__column-3,
		&__column-4 {
			width: 28.6%;
		}

		&__column-4 {
			padding-right: 4%;
		}
	}
}

[data-lang="en"] {
	.footer {
		&__text {
			text-align: left;

			&--en {
				direction: ltr;
				text-align: left;
			}

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

			&__icon {
				float: left;
				margin-left: 0;
				margin-right: 8px;
			}
		}

		&__social-link {
			margin-left: 0;
			margin-right: $padding-default * 2;
		}
	}
}
</style>