<script setup>
import { useI18n } from 'vue-i18n';
import { computed, ref } from 'vue';

const { t } = useI18n();

const $props = defineProps({
    progress: {
        type: Number, //Progress value (1.0 > x > 0.0)
        required: true,
    },
    showDialog: {
        type: Boolean,
        required: true,
    },
    cancelled: {
        type: Boolean,
        required: false,
        default: false,
    },
});

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

const dialogRef = ref(null);

const _showDialog = computed({
    get: () => $props.showDialog,
    set: (value) => {
        if (value) dialogRef.value.show();
    },
});

const _progress = computed(() => $props.progress);

const progressLabel = computed(() => `${Math.round($props.progress * 100)}%`);

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

<template>
    <QDialog ref="dialogRef" v-model="_showDialog" @hide="onDialogHide">
        <QCard class="full-width dialog">
            <QCardSection class="row">
                <span class="text-h6">{{ t('Progress') }}</span>
                <QSpace />
                <QBtn icon="close" flat round dense @click="emit('close')" />
            </QCardSection>
            <QCardSection>
                <div class="column">
                    <span>{{ t('Total progress') }}:</span>
                    <QLinearProgress
                        size="30px"
                        :value="_progress"
                        color="primary"
                        stripe
                        class="q-mt-sm q-mb-md"
                    >
                        <div class="absolute-full flex flex-center">
                            <QBadge
                                v-if="cancelled"
                                text-color="white"
                                color="negative"
                                :label="t('Cancelled')"
                            />
                            <span v-else class="text-white text-subtitle1">
                                {{ progressLabel }}
                            </span>
                        </div>
                    </QLinearProgress>
                    <slot />
                </div>
            </QCardSection>
            <QCardActions align="right">
                <QBtn
                    v-if="!cancelled && progress < 1"
                    type="button"
                    flat
                    class="text-primary"
                    @click="cancel()"
                >
                    {{ t('globals.cancel') }}
                </QBtn>
            </QCardActions>
        </QCard>
    </QDialog>
</template>

<i18n>
es:
    Progress: Progreso
    Total progress: Progreso total
    Cancelled: Cancelado
</i18n>
