<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import { useRoute } from 'vue-router';
import axios from 'axios';
import Paginate from 'src/components/Paginate.vue';
import FetchData from 'src/components/FetchData.vue';
import TeleportSlot from 'components/ui/TeleportSlot';
import { toDate } from 'src/filters';

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

const claim = ref([]);
const fetcher = ref();

const filter = {
    include: {
        relation: 'rmas',
        scope: {
            include: {
                relation: 'worker',
                scope: {
                    include: {
                        relation: 'user',
                    },
                },
            },
            order: 'created DESC',
        },
    },
};

async function addRow() {
    const formData = {
        code: claim.value.rma,
    };

    await axios.post(`ClaimRmas`, formData);
    await fetcher.value.fetch();

    quasar.notify({
        type: 'positive',
        message: t('globals.rowAdded'),
        icon: 'check',
    });
}

const confirmShown = ref(false);
const rmaId = ref(null);
function confirmRemove(id) {
    confirmShown.value = true;
    rmaId.value = id;
}

async function remove() {
    const id = rmaId.value;

    await axios.delete(`ClaimRmas/${id}`);
    await fetcher.value.fetch();
    confirmShown.value = false;

    quasar.notify({
        type: 'positive',
        message: t('globals.rowRemoved'),
        icon: 'check',
    });
}

function hide() {
    rmaId.value = null;
}
</script>
<template>
    <fetch-data
        ref="fetcher"
        :url="`Claims/${route.params.id}`"
        :filter="filter"
        @on-fetch="($data) => (claim = $data)"
        auto-load
    />
    <teleport-slot to="#header-actions">
        <div class="row q-gutter-x-sm">
            <q-btn @click="addRow()" icon="add" color="primary" dense rounded>
                <q-tooltip bottom> {{ t('globals.add') }} </q-tooltip>
            </q-btn>
            <q-separator vertical />
        </div>
    </teleport-slot>
    <paginate :data="claim.rmas">
        <template #body="{ rows }">
            <q-card class="card">
                <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.rma.user') }}</q-item-label>
                                        <q-item-label>{{ row.worker.user.name }}</q-item-label>
                                    </q-item-section>
                                </q-item>
                                <q-item class="q-pa-none">
                                    <q-item-section>
                                        <q-item-label caption>{{ t('claim.rma.created') }}</q-item-label>
                                        <q-item-label>
                                            {{ toDate(row.created, { timeStyle: 'medium' }) }}
                                        </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="orange" icon="vn:bin" @click="confirmRemove(row.id)">
                                <q-tooltip>{{ t('globals.remove') }}</q-tooltip>
                            </q-btn>
                        </q-card-actions>
                    </q-item>
                    <q-separator />
                </template>
            </q-card>
        </template>
    </paginate>

    <q-dialog v-model="confirmShown" persistent @hide="hide">
        <q-card>
            <q-card-section class="row items-center">
                <q-avatar icon="warning" color="primary" text-color="white" />
                <span class="q-ml-sm">{{ t('globals.confirmRemove') }}</span>
            </q-card-section>

            <q-card-actions align="right">
                <q-btn flat :label="t('globals.no')" color="primary" v-close-popup autofocus />
                <q-btn flat :label="t('globals.yes')" color="primary" @click="remove()" />
            </q-card-actions>
        </q-card>
    </q-dialog>
</template>

<style lang="scss" scoped>
.q-toolbar {
    background-color: $grey-9;
}
.sticky-page {
    padding-top: 66px;
}

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