<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { toCurrency } from 'src/filters';
import VnUsesMana from 'components/ui/VnUsesMana.vue';

const $props = defineProps({
    mana: {
        type: Number,
        default: null,
    },
    newPrice: {
        type: Number,
        default: 0,
    },
    usesMana: {
        type: Boolean,
        default: false,
    },
    manaCode: {
        type: String,
        default: 'mana',
    },
});

const emit = defineEmits(['save', 'cancel']);

const { t } = useI18n();
const QPopupProxyRef = ref(null);
const manaCode = ref($props.manaCode);

const save = () => {
    emit('save');
    QPopupProxyRef.value.hide();
};

const cancel = () => {
    emit('cancel');
    QPopupProxyRef.value.hide();
};
</script>

<template>
    <QPopupProxy ref="QPopupProxyRef">
        <div class="container">
            <QSpinner v-if="!mana" color="primary" size="md" />
            <div v-else>
                <div class="header">Mana: {{ toCurrency(mana) }}</div>
                <div class="q-pa-md">
                    <slot />
                    <div v-if="newPrice" class="column items-center q-mt-lg">
                        <span class="text-primary">{{ t('New price') }}</span>
                        <span class="text-subtitle1">
                            {{ toCurrency($props.newPrice) }}
                        </span>
                    </div>
                </div>
            </div>
            <div v-if="usesMana" class="column q-gutter-y-sm q-mt-sm">
                <VnUsesMana :mana-code="manaCode" />
            </div>
            <div class="row">
                <QBtn
                    color="primary"
                    class="no-border-radius"
                    dense
                    style="width: 50%"
                    @click="cancel()"
                >
                    {{ t('globals.cancel') }}
                </QBtn>
                <QBtn
                    color="primary"
                    class="no-border-radius"
                    dense
                    style="width: 50%"
                    @click="save()"
                >
                    {{ t('globals.save') }}
                </QBtn>
            </div>
        </div>
    </QPopupProxy>
</template>

<style lang="scss" scoped>
.container {
    background-color: $dark;
    width: 230px;
}

.header {
    height: 54px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $primary;
    font-size: 1.2rem;
    font-weight: bold;
    min-width: 230px;
}
</style>

<i18n>
es:
    New price: Nuevo precio
</i18n>
