<script setup>
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import VnTable from 'components/VnTable/VnTable.vue';
import VnSection from 'src/components/common/VnSection.vue';
import ShelvingFilter from 'pages/Shelving/Card/ShelvingFilter.vue';
import ShelvingSummary from './Card/ShelvingSummary.vue';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import exprBuilder from './ShelvingExprBuilder.js';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnCheckbox from 'src/components/common/VnCheckbox.vue';

const { t } = useI18n();
const router = useRouter();
const { viewSummary } = useSummaryDialog();
const dataKey = 'ShelvingList';

const filter = {
    include: [{ relation: 'parking' }],
};

const columns = computed(() => [
    {
        align: 'left',
        name: 'code',
        label: t('globals.code'),
        isId: true,
        isTitle: true,
        columnFilter: false,
        create: true,
    },
    {
        align: 'left',
        name: 'parking',
        label: t('shelving.list.parking'),
        sortable: true,
        format: (val) => val?.code ?? '',
        cardVisible: true,
    },
    {
        align: 'left',
        name: 'priority',
        label: t('shelving.list.priority'),
        sortable: true,
        cardVisible: true,
        create: true,
    },
    {
        align: 'left',
        name: 'isRecyclable',
        label: t('shelving.summary.recyclable'),
        sortable: true,
    },
    {
        align: 'right',
        label: '',
        name: 'tableActions',
        actions: [
            {
                title: t('components.smartCard.viewSummary'),
                icon: 'preview',
                action: (row) => viewSummary(row.id, ShelvingSummary),
                isPrimary: true,
            },
        ],
    },
]);

const onDataSaved = ({ id }) => {
    router.push({ name: 'ShelvingBasicData', params: { id } });
};
</script>

<template>
    <VnSection
        :data-key="dataKey"
        prefix="shelving"
        :array-data-props="{
            url: 'Shelvings',
            order: ['code'],
            userFilter: filter,
            exprBuilder,
        }"
    >
        <template #advanced-menu>
            <ShelvingFilter data-key="ShelvingList" />
        </template>
        <template #body>
            <VnTable
                :data-key="dataKey"
                :columns="columns"
                is-editable="false"
                :right-search="false"
                :use-model="true"
                :disable-option="{ table: true }"
                redirect="shelving"
                default-mode="card"
                :create="{
                    urlCreate: 'Shelvings',
                    title: t('globals.pageTitles.shelvingCreate'),
                    onDataSaved,
                    formInitialData: {
                        parkingFk: null,
                        priority: null,
                        code: '',
                        isRecyclable: false,
                    },
                }"
            >
                <template #more-create-dialog="{ data }">
                    <VnSelect
                        v-model="data.parkingFk"
                        url="Parkings"
                        option-value="id"
                        option-label="code"
                        :label="t('shelving.list.parking')"
                        :filter-options="['id', 'code']"
                        :fields="['id', 'code']"
                    />
                    <VnCheckbox
                        v-model="data.isRecyclable"
                        :label="t('shelving.summary.recyclable')"
                    />
                </template>
            </VnTable>
        </template>
    </VnSection>
</template>

<style lang="scss" scoped>
.list {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 55%;
}
.list-container {
    display: flex;
    justify-content: center;
}
</style>

<i18n>
    es:
        shelving:
            list:
                parking: Estacionamiento
                priority: Prioridad
        
            summary:
                recyclable: Reciclable
    en:
        shelving:
            list:
                parking: Parking
                priority: Priority
        
            summary:
                recyclable: Recyclable
</i18n>
