<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';

import VnPaginate from 'src/components/ui/VnPaginate.vue';
import VnConfirm from 'src/components/ui/VnConfirm.vue';
import VnInput from 'src/components/common/VnInput.vue';

import { useArrayData } from 'src/composables/useArrayData';
import axios from 'axios';

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

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

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

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: Date.vnNew(),
    };
}

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>
    <QPage class="column items-center q-pa-md sticky">
        <QPageSticky expand position="top" :offset="[16, 16]">
            <QCard class="card q-pa-md">
                <QForm @submit="submit">
                    <VnInput
                        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>
                </QForm>
            </QCard>
        </QPageSticky>
        <div class="vn-card-list">
            <VnPaginate
                data-key="ClaimRmaList"
                url="ClaimRmas"
                order="id DESC"
                :offset="50"
                auto-load
            >
                <template #body="{ rows }">
                    <QCard class="card">
                        <template v-if="isLoading">
                            <QItem class="q-pa-none items-start">
                                <QItemSection class="q-pa-md">
                                    <QList>
                                        <QItem class="q-pa-none">
                                            <QItemSection>
                                                <QItemLabel caption>
                                                    <QSkeleton />
                                                </QItemLabel>
                                                <QItemLabel>
                                                    <QSkeleton type="text" />
                                                </QItemLabel>
                                            </QItemSection>
                                        </QItem>
                                    </QList>
                                </QItemSection>
                                <QCardActions vertical class="justify-between">
                                    <QSkeleton
                                        type="circle"
                                        class="q-mb-md"
                                        size="40px"
                                    />
                                </QCardActions>
                            </QItem>
                            <QSeparator />
                        </template>
                        <template v-for="row of rows" :key="row.id">
                            <QItem class="q-pa-none items-start">
                                <QItemSection class="q-pa-md">
                                    <QList>
                                        <QItem class="q-pa-none">
                                            <QItemSection>
                                                <QItemLabel caption>{{
                                                    t('claim.rmaList.code')
                                                }}</QItemLabel>
                                                <QItemLabel>{{ row.code }}</QItemLabel>
                                            </QItemSection>
                                        </QItem>
                                    </QList>
                                </QItemSection>
                                <QCardActions vertical class="justify-between">
                                    <QBtn
                                        flat
                                        round
                                        color="primary"
                                        icon="vn:bin"
                                        @click="confirm(row.id)"
                                    >
                                        <QTooltip>{{ t('globals.remove') }}</QTooltip>
                                    </QBtn>
                                </QCardActions>
                            </QItem>
                            <QSeparator />
                        </template>
                    </QCard>
                </template>
            </VnPaginate>
        </div>
    </QPage>
</template>

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

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

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