﻿<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import MacroBadge from '@/components/common/MacroBadge.vue'
import type { Meal, MealType } from '@/types/domain'

const props = defineProps<{
	mealType: MealType
	label: string
	mealOptions: Array<{ value: number; label: string }>
	selectedMealId: number | null
	meal: Meal | null
}>()

const emit = defineEmits<{
	(event: 'select-meal', mealType: MealType, mealId: number | null): void
}>()

const { t } = useI18n()

const selectedValue = computed({
	get: () => (props.selectedMealId === null ? '' : String(props.selectedMealId)),
	set: (value: string) => {
		if (value.length <= 0) {
			emit('select-meal', props.mealType, null)
			return
		}
		emit('select-meal', props.mealType, Number(value))
	},
})
</script>

<template>
	<section class="card day-meal-card">
		<div class="day-meal-card__header">
			<h3>{{ label }}</h3>
		</div>
		<select v-model="selectedValue" class="input-select">
			<option value="">{{ t('today.noMealPlan') }}</option>
			<option v-for="option in mealOptions" :key="option.value" :value="String(option.value)">
				{{ option.label }}
			</option>
		</select>
		<div class="day-meal-card__summary day-meal-card__summary--nutrition" v-if="meal?.totals">
			<span class="day-meal-card__kcal">{{ meal.totals.kcal }} {{ t('common.kcalUnit') }}</span>
			<div class="macro-badge-group macro-badge-group--compact">
				<MacroBadge macro="protein" :label="t('nutrition.short.protein')" :grams="meal.totals.protein_g" />
				<MacroBadge macro="carbs" :label="t('nutrition.short.carbs')" :grams="meal.totals.carbs_g" />
				<MacroBadge macro="fat" :label="t('nutrition.short.fat')" :grams="meal.totals.fat_g" />
				<MacroBadge macro="fiber" :label="t('nutrition.short.fiber')" :grams="meal.totals.fiber_g" />
			</div>
		</div>
		<p class="day-meal-card__summary" v-else>
			{{ t('today.noItems') }}
		</p>
	</section>
</template>
