<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import useHistoryViewModel from '../viewmodels/HistoryViewModel';
import moment from 'moment';
import Chart from '../components/Chart.vue';

const model = useHistoryViewModel();

const date = ref<Date>();

onMounted(() => {
    model.getHistoryData(moment().format('YYYY-MM-DD'));
});

watch(date, (value) => {
    model.getHistoryData(moment(value).format('YYYY-MM-DD'));
});

const chartData = computed(
    () =>
        model.historyData.value?.electricity
            .filter((e) => e.totalPriceTaxIncluded != null)
            .map((e) => ({
                label: moment(e.startDate).format('HH:mm'),
                value: e.totalPriceTaxIncluded,
            })) ?? [],
);
</script>

<template>
    <input type="date" v-model="date" />
    <Chart :data="chartData" />
</template>
