<template>
    <v-dialog class="month-range-selection-dialog" width="640" :persistent="!!persistent" v-model="showState">
        <v-card class="pa-2 pa-sm-4 pa-md-4">
            <template #title>
                <div class="d-flex align-center justify-center">
                    <h4 class="text-h4">{{ title }}</h4>
                </div>
            </template>
            <template #subtitle>
                <div class="text-body-1 text-center text-wrap mt-6">
                    <p v-if="hint">{{ hint }}</p>
                    <span v-if="beginDateTime && endDateTime">
                        <span>{{ beginDateTime }}</span>
                        <span> - </span>
                        <span>{{ endDateTime }}</span>
                    </span>
                    <slot></slot>
                </div>
            </template>
            <v-card-text class="mb-md-4 w-100 d-flex justify-center">
                <v-row class="match-height">
                    <v-col cols="12" md="6">
                        <month-picker :is-dark-mode="isDarkMode" v-model="dateRange[0]"></month-picker>
                    </v-col>
                    <v-col cols="12" md="6">
                        <month-picker :is-dark-mode="isDarkMode" v-model="dateRange[1]"></month-picker>
                    </v-col>
                </v-row>
            </v-card-text>
            <v-card-text class="overflow-y-visible">
                <div class="w-100 d-flex justify-center gap-4">
                    <v-btn :disabled="!dateRange[0] || !dateRange[1]" @click="confirm">{{ tt('OK') }}</v-btn>
                    <v-btn color="secondary" variant="tonal" @click="cancel">{{ tt('Cancel') }}</v-btn>
                </div>
            </v-card-text>
        </v-card>
    </v-dialog>
</template>

<script setup lang="ts">
import { computed, watch } from 'vue';
import { useTheme } from 'vuetify';

import { useI18n } from '@/locales/helpers.ts';
import { type CommonMonthRangeSelectionProps, useMonthRangeSelectionBase } from '@/components/base/MonthRangeSelectionBase.ts';

import { ThemeType } from '@/core/theme.ts';
import { type TextualYearMonth } from '@/core/datetime.ts';

import { getYear0BasedMonthObjectFromString } from '@/lib/datetime.ts';

interface DesktopMonthRangeSelectionProps extends CommonMonthRangeSelectionProps {
    persistent?: boolean;
}

const props = defineProps<DesktopMonthRangeSelectionProps>();
const emit = defineEmits<{
    (e: 'update:show', value: boolean): void;
    (e: 'dateRange:change', minYearMonth: TextualYearMonth | '', maxYearMonth: TextualYearMonth | ''): void;
    (e: 'error', message: string): void;
}>();

const theme = useTheme();

const { tt } = useI18n();
const { dateRange, beginDateTime, endDateTime, getFinalMonthRange } = useMonthRangeSelectionBase(props);

const isDarkMode = computed<boolean>(() => theme.global.name.value === ThemeType.Dark);
const showState = computed<boolean>({
    get: () => props.show || false,
    set: (value) => emit('update:show', value)
});

function confirm(): void {
    try {
        const finalMonthRange = getFinalMonthRange();

        if (!finalMonthRange) {
            return;
        }

        emit('dateRange:change', finalMonthRange.minYearMonth, finalMonthRange.maxYearMonth);
    } catch (ex: unknown) {
        if (ex instanceof Error) {
            emit('error', ex.message);
        }
    }
}

function cancel(): void {
    emit('update:show', false);
}

watch(() => props.minTime, (newValue) => {
    if (newValue) {
        const yearMonth = getYear0BasedMonthObjectFromString(newValue);

        if (yearMonth) {
            dateRange.value[0] = yearMonth;
        }
    }
});

watch(() => props.maxTime, (newValue) => {
    if (newValue) {
        const yearMonth = getYear0BasedMonthObjectFromString(newValue);

        if (yearMonth) {
            dateRange.value[1] = yearMonth;
        }
    }
});
</script>

<style>
.month-range-selection-dialog .dp__preset_ranges {
    white-space: nowrap !important;
}

.month-range-selection-dialog .dp__overlay {
    width: 100% !important;
    height: 100% !important;
}
</style>
