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

const $props = defineProps({
    newPrice: {
        type: Number,
        default: 0,
    },
    sale: {
        type: Object,
        default: null,
    },
});

const route = useRoute();
const mana = ref(null);
const usesMana = ref(false);

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

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

const save = (sale = $props.sale) => {
    emit('save', sale);
    QPopupProxyRef.value.hide();
};

const getMana = async () => {
    const { data } = await axios.get(`Tickets/${route.params.id}/getDepartmentMana`);
    mana.value = data;
    await getUsesMana();
};

const getUsesMana = async () => {
    const { data } = await axios.get('Sales/usesMana');
    usesMana.value = data;
};

const cancel = () => {
    emit('cancel');
    QPopupProxyRef.value.hide();
};
const hasMana = computed(() => typeof mana.value === 'number');
defineExpose({ save });
</script>

<template>
    <QPopupProxy
        ref="QPopupProxyRef"
        @before-show="getMana"
        data-cy="ticketEditManaProxy"
    >
        <div class="container">
            <div class="header">Mana: {{ toCurrency(mana) }}</div>
            <QSpinner v-if="!hasMana" color="primary" size="md" />
            <div class="q-pa-md" v-else>
                <slot :popup="QPopupProxyRef" />
                <div v-if="usesMana" class="column q-gutter-y-sm q-mt-sm">
                    <VnUsesMana :mana-code="manaCode" />
                </div>
                <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 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()"
                    data-cy="saveManaBtn"
                >
                    {{ 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>
