<template>
	<section
		class="counter__section"
		v-waypoint="{ active: true, callback: startCounting }"
	>
		<div class="counter__contents">
			<div class="counter__item">
				<span class="counter__item__value">
					+{{ productsCounter }}
				</span>
				{{ $t("products count") }}
			</div>
			<div class="counter__item">
				<span class="counter__item__value">
					+{{ customersCounter }}
				</span>
				{{ $t("customers count") }}
			</div>
			<div class="counter__item">
				<span class="counter__item__value"> +{{ selledCounter }} </span>
				{{ $t("products sold") }}
			</div>
		</div>
	</section>
</template>
<script>
import LazyHydrate from "vue-lazy-hydration";

export default {
	name: "HomeCountersSection",
	components: {
		LazyHydrate
	},
	data() {
		return {
			customersCounter: 0,
			intervalRef: null,
			isAnimStarted: false,
			productsCounter: 0,
			selledCounter: 0,
		};
	},
	methods: {
		startCounting() {
			if (this.isAnimStarted) return;
			this.isAnimStarted = true;
			this.intervalRef = setInterval(() => {
				const isAnimateProductCounter =
					this.productsCounter < this.productsCount;
				if (isAnimateProductCounter) this.productsCounter++;

				const isAnimateSelled =
					this.selledCounter < this.selledProductsCount;
				if (isAnimateSelled) this.selledCounter += 20;

				const isAnimateCustomer =
					this.customersCounter < this.customersCount;
				if (isAnimateCustomer) this.customersCounter += 4;

				const isStopInterval =
					!isAnimateProductCounter &&
					!isAnimateSelled &&
					!isAnimateCustomer;
				if (isStopInterval) clearInterval(this.intervalRef);
			}, 30);
		},
	},
	props: {
		customersCount: {
			required: true,
			type: String,
		},
		productsCount: {
			required: true,
			type: String,
		},
		selledProductsCount: {
			required: true,
			type: String,
		},
	},
};
</script>
<style lang="scss" scoped>
.counter {
	&__section {
		background: $color-accent;
		color: $color-white;
	    content-visibility: auto;
		font-size: 0;
		line-height: 0;
		padding: $home-sections-padding 0;
		position: relative;
		text-align: center;
	}

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

	&__item {
		display: block;
		font-size: 18px;
		line-height: 1.5;
		margin: $padding-default * 4 0;
		padding: 0 $padding-default;
		text-align: center;

		&__value {
			display: block;
			direction: ltr;
			font-weight: bold;
			font-size: 48px;
		}
	}

	@media (min-width: $tablet) {
		&__item {
			display: inline-block;
			vertical-align: top;
			width: 33%;
		}
	}
}
</style>