<script setup lang="ts">
import { t } from 'i18next';
import moment from 'moment';
import { onMounted } from 'vue';
import Price from '../components/Price.vue';
import useDashboardViewModel from '../viewmodels/DashboardViewModel';

const model = useDashboardViewModel();

onMounted(() => {
    model.getDashboardData();
});
</script>

<template>
    <h1 class="mb-4 text-3xl font-black text-primary">
        {{ t('dashboard.title') }}
    </h1>
    <div class="mb-4 flex flex-col gap-2">
        <h2 class="text-2xl font-black text-primary">
            {{ t('dashboard.electricity') }}
        </h2>
        <div class="flex flex-wrap gap-4">
            <Price
                :label="t('dashboard.current_electricity_price')"
                :price="
                    model.dashboardData.value?.electricity.totalPriceTaxIncluded
                "
                :time="moment(model.dashboardData.value?.electricity.startDate)"
            />
            <Price
                :label="t('dashboard.cheapest_electricity_price')"
                :price="
                    model.dashboardData.value?.electricityCheapest
                        ?.totalPriceTaxIncluded
                "
                :time="
                    moment(
                        model.dashboardData.value?.electricityCheapest
                            ?.startDate,
                    )
                "
            />
            <Price
                :label="t('dashboard.durable_electricity_price')"
                :price="
                    model.dashboardData.value?.electricityDurable
                        ?.totalPriceTaxIncluded
                "
                :time="
                    moment(
                        model.dashboardData.value?.electricityDurable
                            ?.startDate,
                    )
                "
            />
            <Price
                :label="t('dashboard.priciest_electricity_price')"
                :price="
                    model.dashboardData.value?.electricityPriciest
                        ?.totalPriceTaxIncluded
                "
                :time="
                    moment(
                        model.dashboardData.value?.electricityPriciest
                            ?.startDate,
                    )
                "
            />
        </div>
    </div>
    <div class="mb-4 flex flex-col gap-2">
        <h2 class="text-2xl font-black text-primary">
            {{ t('dashboard.gas') }}
        </h2>
        <div class="flex flex-wrap gap-4">
            <Price
                :label="t('dashboard.current_gas_price')"
                :price="model.dashboardData.value?.gas.totalPriceTaxIncluded"
                :time="
                    moment(model.dashboardData.value?.gas.startDate).format(
                        'DD-MM-YYYY',
                    )
                "
            />
            <Price
                :label="t('dashboard.cheapest_gas_price')"
                :price="
                    model.dashboardData.value?.gasCheapest
                        ?.totalPriceTaxIncluded
                "
                :time="
                    moment(
                        model.dashboardData.value?.gasCheapest?.startDate,
                    ).format('DD-MM-YYYY')
                "
            />
            <Price
                :label="t('dashboard.priciest_gas_price')"
                :price="
                    model.dashboardData.value?.gasPriciest
                        ?.totalPriceTaxIncluded
                "
                :time="
                    moment(
                        model.dashboardData.value?.gasPriciest?.startDate,
                    ).format('DD-MM-YYYY')
                "
            />
        </div>
    </div>
</template>
