<script setup>
import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';

import FetchData from 'components/FetchData.vue';
import FetchedTags from 'components/ui/FetchedTags.vue';
import TableVisibleColumns from 'src/components/common/TableVisibleColumns.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import ItemDescriptorProxy from '../Item/Card/ItemDescriptorProxy.vue';
import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
import ItemSummary from '../Item/Card/ItemSummary.vue';
import VnPaginate from 'components/ui/VnPaginate.vue';
import ItemListFilter from './ItemListFilter.vue';

import { useStateStore } from 'stores/useStateStore';
import { toDateFormat } from 'src/filters/date.js';
import { dashIfEmpty } from 'src/filters';
import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { useVnConfirm } from 'composables/useVnConfirm';
import axios from 'axios';
import RightMenu from 'src/components/common/RightMenu.vue';
import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
import VnImg from 'src/components/ui/VnImg.vue';

const router = useRouter();
const stateStore = useStateStore();
const { t } = useI18n();
const { viewSummary } = useSummaryDialog();
const { openConfirmationModal } = useVnConfirm();

const paginateRef = ref(null);
const itemTypesOptions = ref([]);
const originsOptions = ref([]);
const buyersOptions = ref([]);
const intrastatOptions = ref([]);
const itemCategoriesOptions = ref([]);
const visibleColumns = ref([]);
const allColumnNames = ref([]);

const exprBuilder = (param, value) => {
    switch (param) {
        case 'category':
            return { 'ic.name': value };
        case 'buyerFk':
            return { 'it.workerFk': value };
        case 'grouping':
            return { 'b.grouping': value };
        case 'packing':
            return { 'b.packing': value };
        case 'origin':
            return { 'ori.code': value };
        case 'typeFk':
            return { 'i.typeFk': value };
        case 'intrastat':
            return { 'intr.description': value };
        case 'name':
            return { 'i.name': { like: `%${value}%` } };
        case 'producer':
            return { 'pr.name': { like: `%${value}%` } };
        case 'id':
        case 'size':
        case 'subname':
        case 'isActive':
        case 'weightByPiece':
        case 'stemMultiplier':
        case 'stems':
            return { [`i.${param}`]: value };
    }
};

const params = reactive({ isFloramondo: false, isActive: true });

const applyColumnFilter = async (col) => {
    try {
        const paramKey = col.columnFilter?.filterParamKey || col.field;
        params[paramKey] = col.columnFilter.filterValue;
        await paginateRef.value.addFilter(null, params);
    } catch (err) {
        console.error('Error applying column filter', err);
    }
};

const getInputEvents = (col) => {
    return col.columnFilter.type === 'select'
        ? { 'update:modelValue': () => applyColumnFilter(col) }
        : {
              'keyup.enter': () => applyColumnFilter(col),
          };
};

const columns = computed(() => [
    {
        label: '',
        name: 'picture',
        align: 'left',
        columnFilter: null,
    },
    {
        label: t('item.list.id'),
        name: 'id',
        field: 'id',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnInput,
            type: 'text',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                dense: true,
            },
        },
    },
    {
        label: t('item.list.grouping'),
        field: 'grouping',
        name: 'grouping',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnInput,
            type: 'text',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                dense: true,
            },
        },
        format: (val) => dashIfEmpty(val),
    },
    {
        label: t('item.list.packing'),
        field: 'packing',
        name: 'packing',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnInput,
            type: 'text',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                dense: true,
            },
        },
        format: (val) => dashIfEmpty(val),
    },
    {
        label: t('globals.description'),
        field: 'name',
        name: 'description',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnInput,
            type: 'text',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                dense: true,
            },
        },
    },
    {
        label: t('item.list.stems'),
        field: 'stems',
        name: 'stems',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnInput,
            type: 'text',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                dense: true,
            },
        },
    },
    {
        label: t('item.list.size'),
        field: 'size',
        name: 'size',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnInput,
            type: 'text',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                dense: true,
            },
        },
    },
    {
        label: t('item.list.typeName'),
        field: 'typeName',
        name: 'typeName',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnSelect,
            filterParamKey: 'typeFk',
            type: 'select',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                options: itemTypesOptions.value,
                'option-value': 'id',
                'option-label': 'name',
                dense: true,
            },
        },
    },

    {
        label: t('item.list.category'),
        field: 'category',
        name: 'category',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnSelect,
            type: 'select',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                options: itemCategoriesOptions.value,
                'option-value': 'name',
                'option-label': 'name',
                dense: true,
            },
        },
    },

    {
        label: t('item.list.intrastat'),
        field: 'intrastat',
        name: 'intrastat',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnSelect,
            type: 'select',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                options: intrastatOptions.value,
                'option-value': 'description',
                'option-label': 'description',
                dense: true,
            },
        },
    },
    {
        label: t('item.list.origin'),
        field: 'origin',
        name: 'origin',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnSelect,
            type: 'select',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                options: originsOptions.value,
                'option-value': 'code',
                'option-label': 'code',
                dense: true,
            },
        },
    },
    {
        label: t('item.list.userName'),
        field: 'userName',
        name: 'userName',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnSelect,
            filterParamKey: 'buyerFk',
            type: 'select',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                options: buyersOptions.value,
                'option-value': 'id',
                'option-label': 'nickname',
                dense: true,
            },
        },
    },
    {
        label: t('item.list.weightByPiece'),
        field: 'weightByPiece',
        name: 'weightByPiece',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnInput,
            type: 'text',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                dense: true,
            },
        },
        format: (val) => dashIfEmpty(val),
    },
    {
        label: t('item.list.stemMultiplier'),
        field: 'stemMultiplier',
        name: 'stemMultiplier',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnInput,
            type: 'text',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                dense: true,
            },
        },
        format: (val) => dashIfEmpty(val),
    },
    {
        label: t('item.list.isActive'),
        field: 'isActive',
        name: 'isActive',
        align: 'left',
        sortable: true,
        columnFilter: null,
    },
    {
        label: t('item.list.producer'),
        field: 'producer',
        name: 'producer',
        align: 'left',
        sortable: true,
        columnFilter: {
            component: VnInput,
            type: 'text',
            filterValue: null,
            event: getInputEvents,
            attrs: {
                dense: true,
            },
        },
        format: (val) => dashIfEmpty(val),
    },
    {
        label: t('item.list.landed'),
        field: 'landed',
        name: 'landed',
        align: 'left',
        sortable: true,
        format: (val) => dashIfEmpty(toDateFormat(val)),
        columnFilter: null,
    },
    {
        label: '',
        name: 'actions',
        align: 'left',
        columnFilter: null,
    },
]);

const redirectToItemCreate = () => {
    router.push({ name: 'ItemCreate' });
};

const redirectToItemSummary = (id) => {
    router.push({ name: 'ItemSummary', params: { id } });
};

const cloneItem = async (itemFk) => {
    try {
        const { data } = await axios.post(`Items/${itemFk}/clone`);
        if (!data) return;
        router.push({ name: 'ItemTags', params: { id: data.id } });
    } catch (err) {
        console.error('Error cloning item', err);
    }
};

onMounted(async () => {
    stateStore.rightDrawer = true;
    const filteredColumns = columns.value.filter(
        (col) => col.name !== 'picture' && col.name !== 'actions'
    );
    allColumnNames.value = filteredColumns.map((col) => col.name);
});

onUnmounted(() => (stateStore.rightDrawer = false));
</script>

<template>
    <FetchData
        url="ItemTypes"
        :filter="{ fields: ['id', 'name'], order: 'name ASC' }"
        auto-load
        @on-fetch="(data) => (itemTypesOptions = data)"
    />
    <FetchData
        url="ItemCategories"
        :filter="{ fields: ['name'], order: 'name ASC' }"
        auto-load
        @on-fetch="(data) => (itemCategoriesOptions = data)"
    />
    <FetchData
        url="Intrastats"
        :filter="{ fields: ['description'], order: 'description ASC' }"
        auto-load
        @on-fetch="(data) => (intrastatOptions = data)"
    />
    <FetchData
        url="Origins"
        :filter="{ fields: ['code'], order: 'code ASC' }"
        auto-load
        @on-fetch="(data) => (originsOptions = data)"
    />
    <FetchData
        url="TicketRequests/getItemTypeWorker"
        :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC' }"
        auto-load
        @on-fetch="(data) => (buyersOptions = data)"
    />
    <VnSubToolbar>
        <template #st-data>
            <TableVisibleColumns
                :all-columns="allColumnNames"
                table-code="itemsIndex"
                labels-traductions-path="item.list"
                @on-config-saved="visibleColumns = ['picture', ...$event, 'actions']"
            />
        </template>
    </VnSubToolbar>
    <RightMenu>
        <template #right-panel>
            <ItemListFilter data-key="ItemList" />
        </template>
    </RightMenu>
    <QPage class="column items-center q-pa-md">
        <VnPaginate
            ref="paginateRef"
            data-key="ItemList"
            url="Items/filter"
            :order="['isActive DESC', 'name', 'id']"
            :limit="12"
            :expr-builder="exprBuilder"
            :user-params="params"
            :keep-opts="['userParams']"
            :offset="50"
            auto-load
        >
            <template #body="{ rows }">
                <QTable
                    :rows="rows"
                    :columns="columns"
                    row-key="id"
                    :pagination="{ rowsPerPage: 0 }"
                    class="full-width q-mt-md"
                    :visible-columns="visibleColumns"
                    :no-data-label="t('globals.noResults')"
                    @row-click="(_, row) => redirectToItemSummary(row.id)"
                >
                    <template #top-row="{ cols }">
                        <QTr>
                            <QTd
                                v-for="(col, index) in cols"
                                :key="index"
                                style="max-width: 100px"
                            >
                                <component
                                    :is="col.columnFilter.component"
                                    v-if="col.columnFilter"
                                    v-model="col.columnFilter.filterValue"
                                    v-bind="col.columnFilter.attrs"
                                    v-on="col.columnFilter.event(col)"
                                    dense
                                />
                            </QTd>
                        </QTr>
                    </template>
                    <template #body-cell-picture="{ row }">
                        <QTd>
                            <VnImg
                                size="50x50"
                                zoom-resolution="1600x900"
                                :id="row.id"
                                class="image"
                            />
                        </QTd>
                    </template>
                    <template #body-cell-id="{ row }">
                        <QTd @click.stop>
                            <QBtn flat color="primary">
                                {{ row.id }}
                            </QBtn>
                            <ItemDescriptorProxy :id="row.id" />
                        </QTd>
                    </template>
                    <template #body-cell-userName="{ row }">
                        <QTd @click.stop>
                            <QBtn flat color="primary" dense>
                                {{ row.userName }}
                            </QBtn>
                            <WorkerDescriptorProxy :id="row.buyerFk" />
                        </QTd>
                    </template>
                    <template #body-cell-description="{ row }">
                        <QTd class="col">
                            <span>{{ row.name }} {{ row.subName }}</span>
                            <FetchedTags :item="row" />
                        </QTd>
                    </template>
                    <template #body-cell-isActive="{ row }">
                        <QTd>
                            <QCheckbox :model-value="!!row.isActive" disable />
                        </QTd>
                    </template>
                    <template #body-cell-actions="{ row }">
                        <QTd>
                            <QIcon
                                @click.stop="
                                    openConfirmationModal(
                                        t(`All it's properties will be copied`),
                                        t('Do you want to clone this item?'),
                                        () => cloneItem(row.id)
                                    )
                                "
                                class="q-ml-sm"
                                color="primary"
                                name="vn:clone"
                                size="sm"
                            >
                                <QTooltip>
                                    {{ t('globals.clone') }}
                                </QTooltip>
                            </QIcon>
                            <QIcon
                                @click.stop="viewSummary(row.id, ItemSummary)"
                                class="q-ml-md"
                                color="primary"
                                name="preview"
                                size="sm"
                            >
                                <QTooltip class="text-no-wrap">
                                    {{ t('Preview') }}
                                </QTooltip>
                            </QIcon>
                        </QTd>
                    </template>
                </QTable>
            </template>
        </VnPaginate>

        <QPageSticky :offset="[20, 20]">
            <QBtn
                @click="redirectToItemCreate()"
                color="primary"
                fab
                icon="add"
                shortcut="+"
            />
            <QTooltip class="text-no-wrap">
                {{ t('New item') }}
            </QTooltip>
        </QPageSticky>
    </QPage>
</template>

<i18n>
es:
    New item: Nuevo artículo
    All it's properties will be copied: Todas sus propiedades serán copiadas
    Do you want to clone this item?: ¿Desea clonar este artículo?
    Preview: Vista previa
</i18n>
