<template>
    <div>
        <template v-if="modal">
            <b-modal
                id="pickup-points-modal"
                ref="pickup-points-modal"
                v-model="showModal"
                :title="translations.title"
                header-class="border-0"
                body-class="pt-0"
                content-class="pt-0"
                size="xl"
                centered
                hide-footer
                @hide="handleModalClosed"
            >
                <template #default>
                    <hr class="mt-0 mb-3" />
                    <NgPickupPointsContext
                        :hide-select-button="hideSelectButton"
                        :providers="providers"
                        :channels="channels"
                        :country-code="countryCode"
                        :only-supply-points="onlySupplyPoints"
                        :enable-search-input-autofocus="true"
                        @item-chosen="handleItemChosen"
                    />
                </template>
            </b-modal>
        </template>
        <template v-else>
            <NgPickupPointsContext
                :hide-select-button="hideSelectButton"
                :providers="providers"
                :channels="channels"
                :country-code="countryCode"
                :only-supply-points="onlySupplyPoints"
                :enable-search-input-autofocus="false"
                @item-chosen="handleItemChosen"
            />
        </template>
    </div>
</template>

<script>
import NgPickupPointsContext from './NgPickupPointsContext'

export default {
    name: 'NgPickupPoints',
    components: {
        NgPickupPointsContext,
    },
    props: {
        modal: {
            type: Boolean,
            default: function () {
                return true
            },
        },
        hideSelectButton: {
            type: Boolean,
            default: function () {
                return false
            },
        },
        providers: {
            type: Array,
            default: function () {
                return ['store']
            },
        },
        channels: {
            type: Array,
            default: function () {
                return []
            },
        },
        countryCode: {
            type: String,
            default: '',
        },
        onlySupplyPoints: {
            type: Boolean,
            default: function () {
                return false
            },
        },
    },
    data() {
        return {
            showModal: false,
            translations: {
                title: '',
            },
        }
    },
    async mounted() {
        this.translations = {
            title: await this.$translations.trans('nextgen.ui.personal_collection'),
        }
    },
    methods: {
        handleItemChosen() {
            // customizable callback
        },
        handleModalClosed() {
            // customizable callback
        },
    },
}
</script>

<style lang="scss" scoped>
::v-deep .modal-title {
    font-size: 1.125rem;
    font-weight: 700;
}

::v-deep .ng-text-big {
    font-size: 1.375rem;
}

::v-deep .ng-text-small {
    font-size: 0.875rem;
}
</style>
