<template>
    <div class="ng-search-input position-relative">
        <b-form-input
            id="ng-pickup-point-search-input"
            v-model="slug"
            type="search"
            :autofocus="enableSearchInputAutofocus"
            trim
            :placeholder="translations.searchPickupPoint"
        ></b-form-input>
        <button
            type="button"
            class="btn btn-link icon icon-geo d-flex align-items-center"
            @click="handleMyPositionClick"
        >
            <IconGeo />
        </button>
        <button
            type="button"
            class="btn btn-link icon icon-search d-flex align-items-center"
            @click="handleSearchBtnClick"
        >
            <IconSearch />
        </button>
    </div>
</template>

<script>
import IconSearch from './icons/Search'
import IconGeo from './icons/Geo'

export default {
    name: 'NgPickupPointsSidebarSearch',
    components: {
        IconSearch,
        IconGeo,
    },
    props: {
        enableSearchInputAutofocus: {
            type: Boolean,
        },
    },
    data() {
        return {
            slug: '',
            translations: {
                searchPickupPoint: '',
            },
        }
    },
    watch: {
        slug: async function (value) {
            this.$emit('slug-changed', value)
        },
    },
    async mounted() {
        this.translations = {
            searchPickupPoint: await this.$translations.trans('nextgen.ui.search_pickup_point'),
        }
    },
    methods: {
        handleMyPositionClick: function () {
            this.$emit('go-to-my-position')
        },
        handleSearchBtnClick: function () {
            this.$emit('search-btn-click')
        },
    },
}
</script>

<style lang="scss" scoped>
.ng-search-input {
    .form-control {
        height: auto;
        padding-top: 0.6rem;
        padding-right: 5rem;
        padding-bottom: 0.6rem;
        font-size: 1rem;

        &[type='search']::-webkit-search-decoration,
        &[type='search']::-webkit-search-cancel-button,
        &[type='search']::-webkit-search-results-button,
        &[type='search']::-webkit-search-results-decoration {
            display: none;
        }
    }

    .icon {
        position: absolute;
        top: 50%;
        z-index: 2;
    }

    .icon-geo {
        right: 2.7rem;
        padding: 0.5rem;
        margin-top: -1.2rem;
    }

    .icon-search {
        right: 0.3rem;
        padding: 0.6rem;
        margin-top: -1.25rem;
    }
}
</style>
