<template>
    <div class="buy">
        <p>
            <span>{{ $t('priceForYou') }}</span>
            <small v-if="boxSeller">
                {{ $t('everyBox') }}
            </small>
        </p>
        <div>
            <span v-if="specialPrice">
                {{ numberFormat(specialPrice) }}
                <small>{{ $t('priceUnit') }}</small>
            </span>
            <span>
                {{ numberFormat(price) }}
                <small v-if="!specialPrice">
                    {{ $t('priceUnit') }}
                </small>
            </span>
        </div>
        <CartQuantity v-if="cart.find(id)" v-model="quantity" :range="orderRange" />
        <Button v-else :label="$t('addToCart')" :loading="cart.loading" @click="quantity = orderRange.min" />
    </div>
</template>

<script setup>

const { id, orderRange, boxSeller, specialPrice, price } = inject('data')

const cart = useCartStore()
const quantity = computed({
    get: () => cart.find(id)?.quantity || 0,
    set: (v) => cart.update(id, v)
})

const numberFormat = (number) =>
    new Intl.NumberFormat('fa-IR', { maximumSignificantDigits: 3 }).format(number)
</script>

<style lang="scss">
.product .buy {
    @apply flex flex-wrap justify-between items-center px-6 pt-1 pb-2.5 lg:gap-6 shadow-[0px_-3px_5px_#00000005];
    @apply fixed inset-x-0 bottom-0 h-[6.2rem] bg-white shadow border-t border-[#F1F2F4] lg:h-auto;
    @apply z-10 lg:z-0 lg:static lg:bg-transparent lg:shadow-none lg:border-t-0 lg:p-0 lg:gap-y-6 lg:mt-auto;

    p {
        @apply w-full lg:w-max text-[#7F7F7F] font-medium font-vazir pr-1.5 lg:p-0;

        span {
            @apply text-xs lg:text-xl leading-[2.1rem];
        }

        small {
            @apply text-[0.7em] lg:text-base leading-[1.9rem];
        }
    }

    &>div:nth-of-type(1) {
        @apply flex flex-col justify-end gap-2 max-lg:order-last;


        span {
            @apply text-left text-[#333] text-sm font-bold lg:text-[1.6em] font-vazir;
        }

        small {
            @apply text-xs font-medium lg:hidden;
        }

        &:has(span:nth-child(2)) {
            span:first-child {
                @apply max-lg:-mt-8;
            }

            span:last-child {
                @apply line-through text-xs lg:text-base text-gray-600;
            }
        }
    }

    &>button {
        @apply w-[10.8rem] h-[2.6rem] lg:w-[25.1rem] lg:h-14 #{!important};

        .p-button-label {
            @apply text-xs lg:text-xl font-bold font-iran-sans;
        }
    }
}
</style>