<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';

import FetchData from 'components/FetchData.vue';
import FormModel from 'components/FormModel.vue';
import VnRow from 'components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import VnSelectDialog from 'src/components/common/VnSelectDialog.vue';
import FilterItemForm from 'src/components/FilterItemForm.vue';
import CreateIntrastatForm from './CreateIntrastatForm.vue';

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

const itemTypesOptions = ref([]);
const intrastatsOptions = ref([]);
const expensesOptions = ref([]);

const onIntrastatCreated = (response, formData) => {
    intrastatsOptions.value = [...intrastatsOptions.value, response];
    formData.intrastatFk = response.id;
};
</script>
<template>
    <FetchData
        url="ItemTypes"
        :filter="{
            fields: ['id', 'name', 'categoryFk'],
            include: 'category',
            order: 'name ASC',
        }"
        @on-fetch="(data) => (itemTypesOptions = data)"
        auto-load
    />
    <FetchData
        url="Intrastats"
        :filter="{
            fields: ['id', 'description'],
            order: 'description ASC',
        }"
        @on-fetch="(data) => (intrastatsOptions = data)"
        auto-load
    />
    <FetchData
        url="Expenses"
        :filter="{
            fields: ['id', 'name'],
            order: 'name ASC',
        }"
        @on-fetch="(data) => (expensesOptions = data)"
        auto-load
    />
    <FormModel
        :url="`Items/${route.params.id}`"
        :url-update="`Items/${route.params.id}`"
        model="item"
        auto-load
        :clear-store-on-unmount="false"
    >
        <template #form="{ data }">
            <VnRow>
                <VnSelect
                    :label="t('item.basicData.type')"
                    v-model="data.typeFk"
                    :options="itemTypesOptions"
                    option-value="id"
                    option-label="name"
                    hide-selected
                    map-options
                >
                    <template #option="scope">
                        <QItem v-bind="scope.itemProps">
                            <QItemSection>
                                <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
                                <QItemLabel caption>
                                    {{ scope.opt?.category?.name }}
                                </QItemLabel>
                            </QItemSection>
                        </QItem>
                    </template>
                </VnSelect>
                <VnInput :label="t('item.basicData.reference')" v-model="data.comment" />
                <VnInput
                    :label="t('item.basicData.relevancy')"
                    type="number"
                    v-model="data.relevancy"
                />
            </VnRow>
            <VnRow class="row q-gutter-md q-mb-md">
                <VnInput
                    :label="t('item.basicData.stems')"
                    type="number"
                    v-model="data.stems"
                />
                <VnInput
                    :label="t('item.basicData.multiplier')"
                    type="number"
                    v-model="data.stemMultiplier"
                />
                <VnSelectDialog
                    :label="t('item.basicData.generic')"
                    v-model="data.genericFk"
                    url="Items/withName"
                    :fields="['id', 'name']"
                    sort-by="id DESC"
                    option-value="id"
                    option-label="name"
                    map-options
                    hide-selected
                    action-icon="filter_alt"
                >
                    <template #form>
                        <FilterItemForm
                            url="Items/withName"
                            @item-selected="data.genericFk = $event"
                        />
                    </template>
                    <template #option="scope">
                        <QItem v-bind="scope.itemProps">
                            <QItemSection>
                                <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
                                <QItemLabel caption> #{{ scope.opt?.id }} </QItemLabel>
                            </QItemSection>
                        </QItem>
                    </template>
                </VnSelectDialog>
            </VnRow>
            <VnRow>
                <VnSelectDialog
                    :label="t('item.basicData.intrastat')"
                    v-model="data.intrastatFk"
                    :options="intrastatsOptions"
                    option-value="id"
                    option-label="description"
                    map-options
                    hide-selected
                >
                    <template #form>
                        <CreateIntrastatForm
                            @on-data-saved="
                                (_, requestResponse) =>
                                    onIntrastatCreated(requestResponse, data)
                            "
                        />
                    </template>
                    <template #option="scope">
                        <QItem v-bind="scope.itemProps">
                            <QItemSection>
                                <QItemLabel>{{ scope.opt?.description }}</QItemLabel>
                                <QItemLabel caption> #{{ scope.opt?.id }} </QItemLabel>
                            </QItemSection>
                        </QItem>
                    </template>
                </VnSelectDialog>
                <div class="col">
                    <VnSelect
                        :label="t('item.basicData.expense')"
                        v-model="data.expenseFk"
                        :options="expensesOptions"
                        option-value="id"
                        option-label="name"
                        hide-selected
                        map-options
                    />
                </div>
            </VnRow>
            <VnRow>
                <VnInput
                    :label="t('item.basicData.weightByPiece')"
                    v-model.number="data.weightByPiece"
                    :min="0"
                    type="number"
                />
                <VnInput
                    :label="t('item.basicData.boxUnits')"
                    v-model.number="data.packingOut"
                    :min="0"
                    type="number"
                />
                <VnInput
                    :label="t('item.basicData.recycledPlastic')"
                    v-model.number="data.recycledPlastic"
                    :min="0"
                    type="number"
                />
                <VnInput
                    :label="t('item.basicData.nonRecycledPlastic')"
                    v-model.number="data.nonRecycledPlastic"
                    :min="0"
                    type="number"
                />
            </VnRow>
            <VnRow class="row q-gutter-md q-mb-md">
                <QCheckbox
                    v-model="data.isActive"
                    :label="t('item.basicData.isActive')"
                />
                <QCheckbox
                    v-model="data.hasKgPrice"
                    :label="t('item.basicData.hasKgPrice')"
                />
                <div>
                    <QCheckbox
                        v-model="data.isFragile"
                        :label="t('item.basicData.isFragile')"
                        class="q-mr-sm"
                    />
                    <QIcon name="info" class="cursor-pointer" size="xs">
                        <QTooltip max-width="300px">
                            {{ t('item.basicData.isFragileTooltip') }}
                        </QTooltip>
                    </QIcon>
                </div>
                <div>
                    <QCheckbox
                        v-model="data.isPhotoRequested"
                        :label="t('item.basicData.isPhotoRequested')"
                        class="q-mr-sm"
                    />
                    <QIcon name="info" class="cursor-pointer" size="xs">
                        <QTooltip>
                            {{ t('item.basicData.isPhotoRequestedTooltip') }}
                        </QTooltip>
                    </QIcon>
                </div>
            </VnRow>
            <VnRow>
                <VnInput
                    :label="t('item.basicData.description')"
                    type="textarea"
                    v-model="data.description"
                    fill-input
                />
                <VnInput
                    v-show="data.isPhotoRequested"
                    type="textarea"
                    :label="t('globals.comment')"
                    v-model="data.photoMotivation"
                    fill-input
                />
            </VnRow>
        </template>
    </FormModel>
</template>
