<template>
    <b-list-group-item
        class="ng-list-group-item d-flex flex-row justify-content-between mb-1 pl-3 pr-2 py-2 border rounded-lg"
        :active="isActive"
        button
        @click="handleItemSelect(item)"
    >
        <div class="d-flex flex-column justify-content-between pr-3">
            <span class="ng-text-small font-weight-bold mb-1">{{ item.name }}</span>
            <span class="ng-text-small text-secondary">
                {{ item.street }} {{ item.streetNumber }}, {{ item.zip }} {{ item.city }}
            </span>
        </div>

        <small v-if="distance" class="ng-distance text-nowrap d-flex align-items-center pt-1">
            <IconPin />
            <span class="ml-1 text-secondary">{{ distance }}</span>
        </small>
    </b-list-group-item>
</template>

<script>
import * as Utils from '@oxyshop/shop/utils'
import IconPin from './icons/Pin'

export default {
    name: 'NgPickupPointsListItem',
    components: {
        IconPin,
    },
    props: {
        item: {
            type: Object,
            default: function () {
                return {}
            },
        },
        userPosition: {
            type: Object,
            default: function () {
                return {}
            },
        },
        isActive: {
            type: Boolean,
            default: function () {
                return false
            },
        },
    },
    computed: {
        distance: function () {
            if (!this.userPosition || !this.item.coordinates) {
                return false
            }

            const distance = Math.round(
                Utils.Geo.calcDistanceBetweenCoords(
                    this.userPosition.latitude,
                    this.userPosition.longitude,
                    this.item.coordinates.latitude,
                    this.item.coordinates.longitude
                )
            )

            return distance >= 1000 ? `${(distance / 1000).toFixed(1)} km` : `${distance} m`
        },
    },
    methods: {
        handleItemSelect(item) {
            this.$emit('item-selected', item)
        },
    },
}
</script>

<style lang="scss" scoped>
.ng-distance {
    font-size: 0.8125rem;
}

.ng-list-group-item {
    outline: none !important;
    box-shadow: none;

    &.active {
        color: initial;
        background-color: initial;
        // Override utility class
        border: 2px solid var(--primary) !important;
    }
}
</style>
