<template>
	<section class="activity-card">
		<section-title icon="mdi mdi-chart-line-variant">
			{{ $t('HOMEPAGE_SECTION_ACTIVITY') }}
		</section-title>
		<div class="activity-card__content">
			<div class="activity-card__time">
				{{ timeStr }}
			</div>
			<div class="activity-card__date">
				{{ dateStr }}
			</div>
			<spacer />
			<!-- TODO Make color customizable -->
			<trend
				:data="[0, 1, 4, 2, 3, 0, 2]"
				:gradient="['#FFAD7B', '#D481FF']"
				:padding="7.5"
				:stroke-width="4"
				:height="75"
				:radius="15"
				stroke-linecap="round"
				auto-draw
				smooth
			/>
			<!-- TODO Clean this up and move to state -->
			<div class="activity-card__week">
				{{ $t("GENERAL_MONDAY") }}
				<spacer />
				{{ $t("GENERAL_TUESDAY") }}
				<spacer />
				{{ $t("GENERAL_WEDNESDAY") }}
				<spacer />
				{{ $t("GENERAL_THURSDAY") }}
				<spacer />
				{{ $t("GENERAL_FRIDAY") }}
				<spacer />
				{{ $t("GENERAL_SATURDAY") }}
				<spacer />
				{{ $t("GENERAL_SUNDAY") }}
			</div>
		</div>
	</section>
</template>

<script lang="ts">
import Vue from 'vue';
import dayjs from 'dayjs';

export default Vue.extend({
	name: 'ActivityBox',
    
	data: () => ({
		timeTask: null as any,
		timeStr: '',
		dateStr: '',
	}),

	watch: {
		'$i18n.locale'() {
			this.updateTime();
		}
	},

	mounted() {
		this.updateTime();

		this.timeTask = setInterval(() => {
			this.updateTime();
		}, 1000 * 5);
	},

	destroyed() {
		clearInterval(this.timeTask);
	},

	methods: {
		updateTime() {
			this.timeStr = dayjs().format(this.$t('TIME_FORMAT') as string);
			this.dateStr = dayjs().format(this.$t('DATE_FORMAT') as string);
		}
	}
});
</script>

<style lang="scss">
.activity-card {
	&__content {
		@include glow(var(--color-accent-1));
		@include rounded('3xl');
		@include padding(4);
		@include margin(2, t);

		height: 13rem;
		display: flex;
		flex-direction: column;
		background-color: var(--color-accent-1);

		@include dark {
			@include glow(rgba(map-get($theme-general, 'accent-1'), 0.45));
		}
	}

	&__time {
		@include font-size('5xl');
		@include font-weight(light);

		color: white;
		text-align: right;
	}

	&__date {
		@include font-weight(bold);

		color: white;
		text-align: right;
	}

	&__week {
		@include font-size(sm);
		@include font-weight(light);
		@include padding(2, t);

		display: flex;
		color: white;
	}
}
</style>