<script setup>
import { ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';

import EditPictureForm from 'components/EditPictureForm.vue';
import VnImg from 'src/components/ui/VnImg.vue';
import axios from 'axios';

const $props = defineProps({
    visible: {
        type: Number,
        default: null,
    },
    available: {
        type: Number,
        default: null,
    },
    entityId: {
        type: String,
        default: null,
    },
    showEditButton: {
        type: Boolean,
        default: true,
    },
});

const { t } = useI18n();

const image = ref(null);
const editPhotoFormDialog = ref(null);
const showEditPhotoForm = ref(false);
const warehouseName = ref(null);

onMounted(async () => {
    getItemConfigs();
});

const toggleEditPictureForm = () => {
    showEditPhotoForm.value = !showEditPhotoForm.value;
};

const getItemConfigs = async () => {
    const { data } = await axios.get('ItemConfigs/findOne');
    if (!data) return;
    await getWarehouseName(data.warehouseFk);
    return data;
};

const getWarehouseName = async (warehouseFk) => {
    const filter = {
        where: { id: warehouseFk },
    };
    const { data } = await axios.get('Warehouses/findOne', {
        params: {
            filter: JSON.stringify(filter),
        },
    });
    if (!data) return;
    warehouseName.value = data.name;
};

const handlePhotoUpdated = (evt = false) => {
    image.value.reload(evt);
};
</script>

<template>
    <div class="relative-position">
        <VnImg ref="image" :id="$props.entityId" zoom-resolution="1600x900">
            <template #error>
                <div class="absolute-full picture text-center q-pa-md flex flex-center">
                    <div>
                        <div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
                            <QIcon name="vn:item" />
                        </div>
                        <div class="text-grey-5" style="opacity: 0.4">
                            {{ t('item.descriptor.item') }}
                        </div>
                    </div>
                </div>
            </template>
        </VnImg>
        <QBtn
            v-if="showEditButton"
            color="primary"
            size="lg"
            round
            class="edit-photo-btn"
            @click="toggleEditPictureForm()"
        >
            <QIcon name="edit" size="sm" />
            <QDialog ref="editPhotoFormDialog" v-model="showEditPhotoForm">
                <EditPictureForm
                    collection="catalog"
                    :id="entityId"
                    @close-form="toggleEditPictureForm()"
                    @on-photo-uploaded="handlePhotoUpdated"
                />
            </QDialog>
        </QBtn>
    </div>

    <div
        class="row justify-between items-center full-width bg-primary"
        style="height: 54px"
    >
        <div class="col column items-center">
            <span class="text-uppercase color-vn-white" style="font-size: 11px">
                {{ t('item.descriptor.visible') }}
            </span>
            <span class="text-weight-bold text-h5 color-vn-white">{{ visible }}</span>
        </div>
        <div class="col column items-center separation-borders" style="font-size: 11px">
            <span class="text-uppercase color-vn-white">
                {{ t('item.descriptor.available') }}
            </span>
            <span class="text-weight-bold text-h5 color-vn-white">{{ available }}</span>
        </div>
        <div class="col column items-center justify-center">
            <QIcon name="info" class="cursor-pointer color-vn-white" size="md">
                <QTooltip>{{
                    t('warehouseText', {
                        warehouseName: warehouseName,
                    })
                }}</QTooltip>
            </QIcon>
        </div>
    </div>
</template>

<i18n>
es:
    Regularize stock: Regularizar stock
    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?
    warehouseText: Calculado sobre el almacén de { warehouseName }

en:
    warehouseText: Calculated on the warehouse of { warehouseName }
</i18n>

<style lang="scss" scoped>
.separation-borders {
    border-left: 1px solid $white;
    border-right: 1px solid $white;
}
</style>
