<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import axios from 'axios';
import Paginate from 'src/components/PaginateData.vue';
import { useArrayData } from 'src/composables/useArrayData';
import VnConfirm from 'src/components/ui/VnConfirm.vue';

const quasar = useQuasar();
const { t } = useI18n();

const arrayData = useArrayData('ClaimRmaList');
const isLoading = ref(false);
const input = ref();

const newRma = ref({
    code: '',
    crated: new Date(),
});

function onInputUpdate(value) {
    newRma.value.code = value.toUpperCase();
}

async function submit() {
    const formData = newRma.value;
    if (formData.code === '') return;

    isLoading.value = true;
    await axios.post('ClaimRmas', formData);
    await arrayData.refresh();
    isLoading.value = false;
    input.value.$el.focus();

    newRma.value = {
        code: '',
        created: new Date(),
    };
}

function confirm(id) {
    quasar
        .dialog({
            component: VnConfirm,
            componentProps: {
                data: { id },
                promise: remove,
            },
        })
        .onOk(async () => await arrayData.refresh());
}

async function remove({ id }) {
    await axios.delete(`ClaimRmas/${id}`);
    quasar.notify({
        type: 'positive',
        message: t('globals.rowRemoved'),
    });
}
</script>

<template>
    <q-page class="column items-center q-pa-md sticky">
        <q-page-sticky expand position="top" :offset="[16, 16]">
            <q-card class="card q-pa-md">
                <q-form @submit="submit">
                    <q-input
                        ref="input"
                        v-model="newRma.code"
                        :label="t('claim.rmaList.code')"
                        @update:model-value="onInputUpdate"
                        class="q-mb-md"
                        :readonly="isLoading"
                        :loading="isLoading"
                        autofocus
                    />
                    <div class="text-caption">
                        {{ arrayData.totalRows }} {{ t('claim.rmaList.records') }}
                    </div>
                </q-form>
            </q-card>
        </q-page-sticky>
        <div class="card-list">
            <paginate
                data-key="ClaimRmaList"
                url="ClaimRmas"
                order="id DESC"
                :offset="50"
                auto-load
            >
                <template #body="{ rows }">
                    <q-card class="card">
                        <template v-if="isLoading">
                            <q-item class="q-pa-none items-start">
                                <q-item-section class="q-pa-md">
                                    <q-list>
                                        <q-item class="q-pa-none">
                                            <q-item-section>
                                                <q-item-label caption>
                                                    <q-skeleton />
                                                </q-item-label>
                                                <q-item-label
                                                    ><q-skeleton type="text"
                                                /></q-item-label>
                                            </q-item-section>
                                        </q-item>
                                    </q-list>
                                </q-item-section>
                                <q-card-actions vertical class="justify-between">
                                    <q-skeleton
                                        type="circle"
                                        class="q-mb-md"
                                        size="40px"
                                    />
                                </q-card-actions>
                            </q-item>
                            <q-separator />
                        </template>
                        <template v-for="row of rows" :key="row.id">
                            <q-item class="q-pa-none items-start">
                                <q-item-section class="q-pa-md">
                                    <q-list>
                                        <q-item class="q-pa-none">
                                            <q-item-section>
                                                <q-item-label caption>{{
                                                    t('claim.rmaList.code')
                                                }}</q-item-label>
                                                <q-item-label>{{
                                                    row.code
                                                }}</q-item-label>
                                            </q-item-section>
                                        </q-item>
                                    </q-list>
                                </q-item-section>
                                <q-card-actions vertical class="justify-between">
                                    <q-btn
                                        flat
                                        round
                                        color="primary"
                                        icon="vn:bin"
                                        @click="confirm(row.id)"
                                    >
                                        <q-tooltip>{{ t('globals.remove') }}</q-tooltip>
                                    </q-btn>
                                </q-card-actions>
                            </q-item>
                            <q-separator />
                        </template>
                    </q-card>
                </template>
            </paginate>
        </div>
    </q-page>
</template>

<style lang="scss" scoped>
.sticky {
    padding-top: 156px;
}

.card-list, .card {
    width: 100%;
    max-width: 60em;
}

.q-page-sticky {
    z-index: 2998;
}
</style>
