<template>
    <v-dialog v-model="open" max-width="480">
        <v-card>
            <v-card-title>Лимит лидов — для {{ count }} проектов</v-card-title>
            <v-card-text>
                <template v-if="!useReplace">
                    <v-text-field
                        v-model.number="addValue"
                        type="number"
                        min="0"
                        label="➕ Прибавить к лимиту"
                        suffix="лидов/день"
                        data-testid="add-input"
                        density="compact"
                    />
                    <v-text-field
                        v-model.number="removeValue"
                        type="number"
                        min="0"
                        label="➖ Убавить лимит"
                        suffix="лидов/день"
                        data-testid="remove-input"
                        density="compact"
                        class="mt-2"
                    />
                </template>
                <template v-else>
                    <v-text-field
                        v-model.number="replaceValue"
                        type="number"
                        min="0"
                        label="Установить лимит"
                        suffix="лидов/день"
                        data-testid="replace-input"
                        density="compact"
                    />
                </template>
                <v-checkbox
                    v-model="useReplace"
                    label="Заменить на абсолютное значение"
                    data-testid="replace-toggle"
                    density="compact"
                    hide-details
                    class="mt-3"
                />
            </v-card-text>
            <v-card-actions>
                <v-spacer />
                <v-btn data-testid="cancel" @click="open = false">Отмена</v-btn>
                <v-btn color="primary" data-testid="apply" :disabled="!canApply" @click="apply"
                    >Применить к {{ count }}</v-btn
                >
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

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

const props = defineProps<{ modelValue: boolean; count: number }>();
const emit = defineEmits<{
    'update:modelValue': [value: boolean];
    apply: [payload: { delta?: number; replace?: number }];
}>();

const open = ref(props.modelValue);
const useReplace = ref(false);
const addValue = ref<number | null>(null);
const removeValue = ref<number | null>(null);
const replaceValue = ref<number | null>(null);

watch(
    () => props.modelValue,
    (val) => {
        open.value = val;
        if (val) {
            useReplace.value = false;
            addValue.value = null;
            removeValue.value = null;
            replaceValue.value = null;
        }
    },
);

watch(open, (val) => {
    emit('update:modelValue', val);
});

const canApply = computed(() => {
    if (useReplace.value) return replaceValue.value !== null && replaceValue.value >= 0;
    return (addValue.value ?? 0) > 0 || (removeValue.value ?? 0) > 0;
});

function apply() {
    if (useReplace.value && replaceValue.value !== null) {
        emit('apply', { replace: replaceValue.value });
    } else {
        const delta = (addValue.value ?? 0) - (removeValue.value ?? 0);
        emit('apply', { delta });
    }
    addValue.value = null;
    removeValue.value = null;
    replaceValue.value = null;
    open.value = false;
}
</script>
