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

import VnLv from 'components/ui/VnLv.vue';
import VnImg from 'src/components/ui/VnImg.vue';
import OrderCatalogItemDialog from 'pages/Order/Card/OrderCatalogItemDialog.vue';
import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';

import { toCurrency } from 'filters/index';

const DEFAULT_PRICE_KG = 0;

const { t } = useI18n();

defineProps({
    item: {
        type: Object,
        required: true,
    },
    isCatalog: {
        type: Boolean,
        default: false,
    },
});

const dialog = ref(null);
</script>

<template>
    <div class="container order-catalog-item overflow-hidden">
        <QCard class="card shadow-6">
            <div class="img-wrapper">
                <VnImg :id="item.id" class="image" />
                <div v-if="item.hex && isCatalog" class="item-color-container">
                    <div
                        class="item-color"
                        :style="{ backgroundColor: `#${item.hex}` }"
                    ></div>
                </div>
            </div>
            <div class="content">
                <span class="link">
                    {{ item.name }}
                    <ItemDescriptorProxy :id="item.id" />
                </span>
                <p class="subName">{{ item.subName }}</p>
                <template v-for="index in 4" :key="`tag-${index}`">
                    <VnLv
                        v-if="item?.[`tag${index + 4}`]"
                        :label="item?.[`tag${index + 4}`] + ':'"
                        :value="item?.[`value${index + 4}`]"
                    />
                </template>
                <div v-if="item.minQuantity" class="min-quantity">
                    <QIcon name="production_quantity_limits" size="xs" />
                    {{ item.minQuantity }}
                </div>
                <div class="footer">
                    <div class="price">
                        <p v-if="isCatalog">
                            {{ item.available }} {{ t('to') }}
                            {{ toCurrency(item.price) }}
                        </p>
                        <slot name="price" />
                        <QIcon v-if="isCatalog" name="add_circle" class="icon">
                            <QTooltip>{{ t('globals.add') }}</QTooltip>
                            <QPopupProxy ref="dialog">
                                <OrderCatalogItemDialog
                                    :prices="item.prices"
                                    @added="() => dialog.hide()"
                                />
                            </QPopupProxy>
                        </QIcon>
                    </div>
                    <p v-if="item.priceKg" class="price-kg">
                        {{ t('price-kg') }}
                        {{ toCurrency(item.priceKg) || DEFAULT_PRICE_KG }}
                    </p>
                </div>
            </div>
        </QCard>
    </div>
</template>

<style lang="scss">
.order-catalog-item {
    .vn-label-value {
        display: flex;
        gap: 4px;
        font-size: 11px;

        .label {
            color: var(--vn-label-color);
        }

        .value {
            color: var(--vn-text-color);
        }
    }
}
</style>
<style lang="scss" scoped>
.container {
    max-width: 448px;
    width: 100%;
}

.card {
    display: flex;
    height: 100%;
    max-height: 192px;
}

.card > * {
    flex: 1;
}

.img-wrapper {
    position: relative;
    max-width: 192px;
}

.content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;

    p {
        margin-bottom: 0;
    }
}

.min-quantity {
    text-align: right;
    color: $negative !important;
}

.footer {
    .price {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: flex;
        align-items: center;
        justify-content: space-between;

        p {
            font-size: 12px;
        }

        .icon {
            color: $primary;
            font-size: 24px;
            cursor: pointer;
        }
    }

    .price-kg {
        font-size: 12px;
    }
}

.item-color-container {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: linear-gradient(var(--vn-section-color), $primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 4px;

    .item-color {
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
}
</style>
<i18n>
es:
    to: to
    price-kg: Precio por Kg
en:
    to: hasta
    price-kg: Price per Kg
</i18n>
