<template>
    <aside class="ng-pickup-points-sidebar">
        <NgPickupPointsSidebarSearch
            :enable-search-input-autofocus="enableSearchInputAutofocus"
            @slug-changed="handleSearchSlugChanged"
            @go-to-my-position="handleGoToMyPositionClick"
            @search-btn-click="handleSearchBtnClick"
        />

        <b-list-group class="ng-pickup-points-list pr-2 mt-3 d-flex flex-row flex-wrap align-content-start">
            <template v-if="!pendingRequest">
                <template v-if="items.length > 0">
                    <NgPickupPointsSidebarListItem
                        v-for="item in items.slice(0, 200)"
                        :key="item.code"
                        :item="item"
                        :user-position="userPosition"
                        :is-active="item === activeItem"
                        @item-selected="handleItemSelected(item)"
                    />
                </template>
                <b-alert v-else :show="true" variant="warning">{{ translations.noPickupPointFound }}</b-alert>
            </template>
            <template v-else>
                <div v-for="index in 50" :key="index" class="d-flex flex-row w-100 justify-content-between mb-4">
                    <div class="w-100">
                        <b-skeleton width="30%"></b-skeleton>
                        <b-skeleton width="80%"></b-skeleton>
                    </div>
                    <div>
                        <b-skeleton type="avatar"></b-skeleton>
                    </div>
                </div>
            </template>
        </b-list-group>
    </aside>
</template>

<script>
import NgPickupPointsSidebarSearch from './NgPickupPointsSidebarSearch.vue'
import NgPickupPointsSidebarListItem from './NgPickupPointsSidebarListItem.vue'

export default {
    name: 'NgPickupPointsSidebar',
    components: {
        NgPickupPointsSidebarSearch,
        NgPickupPointsSidebarListItem,
    },
    props: {
        activeItem: {
            type: Object,
            default: function () {
                return {}
            },
        },
        items: {
            type: Array,
            default: function () {
                return []
            },
        },
        userPosition: {
            type: Object,
            default: function () {
                return {}
            },
        },
        pendingRequest: {
            type: Boolean,
        },
        enableSearchInputAutofocus: {
            type: Boolean,
        },
    },
    data() {
        return {
            translations: {
                noPickupPointFound: '',
            },
        }
    },
    async mounted() {
        this.translations = {
            noPickupPointFound: await this.$translations.trans('nextgen.ui.no_pickup_point_found'),
        }
    },
    created() {
        this.$watch('items', (newVal, oldVal) => {
            if (newVal && oldVal.length === 0) {
                this.handleItemSelected(this.items[0])
            }
        })
    },
    methods: {
        handleSearchSlugChanged: function (slug) {
            this.$emit('search-slug-changed', slug)
        },
        handleItemSelected: function (item) {
            this.$emit('item-selected', item)
        },
        handleGoToMyPositionClick: function () {
            this.$emit('go-to-my-position')
        },
        handleSearchBtnClick: function () {
            this.$emit('search-btn-click')
        },
    },
}
</script>

<style lang="scss" scoped>
.ng-pickup-points-list {
    height: 40vh;
    overflow-y: scroll;

    @media (min-width: 991px) {
        height: 75vh;
    }
}

::-webkit-scrollbar {
    width: 0.6rem;
    border-radius: 1rem;
}

::-webkit-scrollbar-track {
    background: linear-gradient(180deg, var(--primary), var(--primary)) repeat-y 50%;
    background-size: 0.0625rem auto;
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 1rem;
}
</style>
