<script>
import IconPrev from '@/static/launches/icon_prev.png';
import IconNext from '@/static/launches/icon_next.png';
import IconNextDisabled from '@/static/launches/icon_next_disabled.png';

export default {
	props: {
		value: {
			type: Number,
			default: () => new Date().getFullYear()
		}
	},
	data() {
		return {}
	},
	computed: {
		year() {
			return this.value;
		},
		prevIcon() {
			return IconPrev;
		},
		nextIcon() {
			return this.year === new Date().getFullYear() ? IconNextDisabled : IconNext;
		},
		isNextDisabled() {
			return this.year === new Date().getFullYear();
		}
	},
	methods: {
		prevYear() {
			this.$emit('input', this.year - 1);
		},
		nextYear() {
			if (!this.isNextDisabled) {
				this.$emit('input', this.year + 1);
			}
		}
	}
}
</script>

<template>
	<div class="flex-center box">
		<div class="btn" @click="prevYear">
			<img :src="prevIcon" alt="Previous Year" />
		</div>
		<div style="width: 60px;text-align: center">{{ year }}</div>
		<div class="btn" @click="nextYear">
			<img :src="nextIcon" :alt="isNextDisabled ? 'Next Year Disabled' : 'Next Year'" />
		</div>
	</div>
</template>

<style scoped lang="scss">
.box {
	gap: 16px;
	color: #3A4A65;
	font-size: 24px;
	font-family: 'Poppins-SemiBold', serif;
	.btn {
		width: 48px;
		height: 48px;
		cursor: pointer;
		background-color: #FFFFFF;
		border-radius: 4px;

		&:active {
			opacity: 0.8;
		}

		img {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
