<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import axios from 'axios';
import { useDialogPluginComponent } from 'quasar';
import VnSelect from 'src/components/common/VnSelect.vue';
import FetchData from 'components/FetchData.vue';

const editableStates = ref([]);
const { t } = useI18n();
const showChangeStateDialog = ref(false);
const newState = ref(null);
const { dialogRef, onDialogHide } = useDialogPluginComponent();
const $props = defineProps({
    selectedRows: {
        type: Array,
        default: () => [],
    },
});
const updateState = async () => {
    try {
        showChangeStateDialog.value = true;
        const rowsToUpdate = $props.selectedRows.map(({ ticketFk }) =>
            axios.post(`Tickets/state`, {
                ticketFk,
                code: newState.value,
            })
        );
        await Promise.all(rowsToUpdate);
    } catch (err) {
        return err;
    } finally {
        dialogRef.value.hide({ type: 'refresh', refresh: true });
    }
};
</script>

<template>
    <QDialog ref="dialogRef" @hide="onDialogHide" v-model="showChangeStateDialog">
        <FetchData
            url="States/editableStates"
            @on-fetch="(data) => (editableStates = data)"
            auto-load
        />
        <QCard class="q-pa-sm">
            <QCardSection class="row items-center q-pb-none">
                <QAvatar
                    :icon="icon"
                    color="primary"
                    text-color="white"
                    size="xl"
                    v-if="icon"
                />
                <span class="text-h6 text-grey">{{
                    t('negative.detail.modal.changeState.title')
                }}</span>
                <QSpace />
                <QBtn icon="close" flat round dense v-close-popup />
            </QCardSection>
            <QCardSection class="row items-center justify-center column items-stretch">
                <span>{{ t('negative.detail.modal.changeState.title') }}</span>
                <VnSelect
                    :label="t('negative.detail.modal.changeState.placeholder')"
                    v-model="newState"
                    :options="editableStates"
                    option-label="name"
                    option-value="code"
                />
            </QCardSection>
            <QCardActions align="right">
                <QBtn :label="t('globals.cancel')" color="primary" flat v-close-popup />
                <QBtn
                    :label="t('globals.confirm')"
                    color="primary"
                    :disable="!newState"
                    @click="updateState"
                    unelevated
                    autofocus
                /> </QCardActions
        ></QCard>
    </QDialog>
</template>

<style lang="scss" scoped>
.list {
    max-height: 100%;
    padding: 15px;
    width: 100%;
}

.grid-style-transition {
    transition: transform 0.28s, background-color 0.28s;
}

#true {
    background-color: $positive;
}

#false {
    background-color: $negative;
}

div.q-dialog__inner > div {
    max-width: fit-content !important;
}
</style>
