<script setup>
import axios from 'axios';
import { useQuasar } from 'quasar';
import { useArrayData } from 'src/composables/useArrayData';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import VnTable from 'src/components/VnTable/VnTable.vue';
import { computed, ref } from 'vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnInput from 'src/components/common/VnInput.vue';

const quasar = useQuasar();
const arrayData = useArrayData('WagonList');
const store = arrayData.store;
const router = useRouter();
const { t } = useI18n();
const tableRef = ref();
const filter = {
    include: {
        relation: 'type',
        scope: {
            fields: 'name',
        },
    },
};

const columns = computed(() => [
    {
        align: 'left',
        name: 'label',
        label: t('Label'),
        isTitle: true,
    },
    {
        align: 'left',
        name: 'plate',
        label: t('wagon.list.plate'),
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'volume',
        label: t('wagon.list.volume'),
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'name',
        label: t('wagon.list.type'),
        cardVisible: true,
        format: (row) => row?.type?.name,
    },
    {
        align: 'right',
        name: 'tableActions',
        actions: [
            {
                title: t('components.smartCard.openCard'),
                icon: 'arrow_forward',
                isPrimary: true,
                action: (row) => navigate(row.id),
            },
            {
                title: t('wagon.list.remove'),
                icon: 'delete',
                isPrimary: true,
                action: (row) => remove(row),
            },
        ],
    },
]);

function navigate(id) {
    router.push({ path: `/wagon/${id}/edit` });
}

async function remove(row) {
    try {
        await axios.delete(`Wagons/${row.id}`).then(async () => {
            quasar.notify({
                message: t('wagon.list.removeItem'),
                type: 'positive',
            });
            store.data.splice(store.data.indexOf(row), 1);
            window.location.reload();
        });
    } catch (error) {
        //
    }
}
</script>

<template>
    <QPage class="column items-center q-pa-md">
        <VnTable
            ref="tableRef"
            data-key="WagonList"
            url="Wagons"
            :filter="filter"
            :columns="columns"
            auto-load
            order="id DESC"
            :right-search="false"
            :column-search="false"
            :default-mode="'card'"
            :disable-option="{ table: true }"
            :create="{
                urlCreate: 'Wagons',
                title: t('Create new wagon'),
                onDataSaved: () => tableRef.reload(),
                formInitialData: {},
            }"
        >
            <template #more-create-dialog="{ data }">
                <VnInput
                    filled
                    v-model="data.label"
                    :label="t('wagon.create.label')"
                    type="number"
                    min="0"
                    :rules="[(val) => !!val || t('wagon.warnings.labelNotEmpty')]"
                />
                <VnInput
                    filled
                    v-model="data.plate"
                    :label="t('wagon.create.plate')"
                    :rules="[(val) => !!val || t('wagon.warnings.plateNotEmpty')]"
                />
                <VnInput
                    filled
                    v-model="data.volume"
                    :label="t('wagon.create.volume')"
                    type="number"
                    min="0"
                    :rules="[(val) => !!val || t('wagon.warnings.volumeNotEmpty')]"
                />
                <VnSelect
                    url="WagonTypes"
                    filled
                    v-model="data.typeFk"
                    use-input
                    fill-input
                    hide-selected
                    input-debounce="0"
                    option-label="name"
                    option-value="id"
                    emit-value
                    map-options
                    :label="t('wagon.create.type')"
                    :options="filteredWagonTypes"
                    :rules="[(val) => !!val || t('wagon.warnings.typeNotEmpty')]"
                    @filter="filterType"
                >
                    <template v-if="data.typeFk" #append>
                        <QIcon
                            name="cancel"
                            @click.stop.prevent="data.typeFk = null"
                            class="cursor-pointer"
                        />
                    </template>
                    <template #no-option>
                        <QItem>
                            <QItemSection class="text-grey">
                                {{ t('wagon.warnings.noData') }}
                            </QItemSection>
                        </QItem>
                    </template>
                </VnSelect>
            </template>
        </VnTable>
    </QPage>
</template>
