<script setup>
import { ref, computed } from 'vue';
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 FormModelPopup from 'src/components/FormModelPopup.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnRow from 'src/components/ui/VnRow.vue';
import VnTable from 'src/components/VnTable/VnTable.vue';

const quasar = useQuasar();
const arrayData = useArrayData('WagonTypeList');
const store = arrayData.store;
const dialog = ref();
const { push } = useRouter();
const { t } = useI18n();
const tableRef = ref();

const initialData = computed(() => {
    return {
        name: null,
    };
});

const columns = computed(() => [
    {
        align: 'left',
        name: 'id',
        label: t('ID'),
        isId: true,
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'name',
        label: t('Name'),
        isTitle: true,
    },
    {
        align: 'left',
        name: 'divisible',
        label: t('Divisible'),
        cardVisible: true,
        component: 'checkbox',
    },
    {
        align: 'right',
        name: 'tableActions',
        actions: [
            {
                title: t('components.smartCard.openCard'),
                icon: 'arrow_forward',
                isPrimary: true,
                action: (row) => navigate(row.id, row.name),
            },
            {
                title: t('wagon.list.remove'),
                icon: 'delete',
                isPrimary: true,
                action: (row) => remove(row),
            },
        ],
    },
]);

function navigate(id, name) {
    push({ path: `/wagon/type/${id}/edit`, query: { name } });
}

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

<template>
    <QPage class="column items-center q-pa-md">
        <VnTable
            ref="tableRef"
            data-key="WagonTypeList"
            url="WagonTypes"
            :columns="columns"
            auto-load
            order="id DESC"
            :right-search="false"
            :column-search="false"
            :default-mode="'card'"
            :disable-option="{ table: true }"
        >
        </VnTable>
        <QPageSticky :offset="[18, 18]">
            <QBtn @click.stop="dialog.show()" color="primary" fab icon="add" shortcut="+">
                <QDialog ref="dialog">
                    <FormModelPopup
                        :title="t('Create new Wagon type')"
                        url-create="WagonTypes"
                        model="WagonType"
                        :form-initial-data="initialData"
                        @on-data-saved="tableRef.reload()"
                        auto-load
                    >
                        <template #form-inputs="{ data }">
                            <VnRow class="row q-gutter-md q-mb-md">
                                <VnInput
                                    filled
                                    v-model="data.name"
                                    :label="t('Name')"
                                    :rules="[(val) => !!val || t('nameNotEmpty')]"
                                />
                            </VnRow>
                        </template>
                    </FormModelPopup>
                </QDialog>
            </QBtn>
            <QTooltip>
                {{ t('globals.new') }}
            </QTooltip>
        </QPageSticky>
    </QPage>
</template>

<i18n>
en:
    nameNotEmpty: The name cannot be empty
es:
    Create new Wagon type: Crear nuevo tipo de vagón
    Name: Nombre
    nameNotEmpty: El nombre no puede estar vacío
</i18n>
