Cacher is the code snippet organizer for pro developers

<template>
<div>

<!--     <places
      :type="type"
      :api-key="secret"
      :app-id="id"
      :key="`${id}-${secret}`"
      @change="suggestion = $event.suggestion"
    />
    <button @click="toggleType">Toggle <code>type</code> ({{ type }})</button>
    <pre>{{ suggestion }}</pre>
 -->

    <ais-instant-search class="max-w-9xl px-4 mx-auto" :index-name="index" :searchClient="searchClient" :routing="routing">

        <ais-configure
            filters="status:published"
            hitsPerPage="20"
            :aroundLatLngViaIP="true"
        />


        <!-- <PlacesWidget/> -->

        <!-- <input type="text" name="" v-model="aroundLatLng"> -->

        <ais-state-results class="flex flex-col">
            <template slot-scope="{ query, nbHits, _rawResults }">
                <p>{{ nbHits }} results found for <q>{{ query }}</q></p>
                <pre v-for="p of kv(_rawResults[0].params)">{{ p[0] }}: {{ p[1] }}</pre>
            </template>
        </ais-state-results>

        <activity-search-input/>

        <AroundLatLngWidget/>
            <!-- :aroundLatLngViaIP="true" -->
            <!-- :aroundLatLng="aroundLatLng" -->

        <ais-current-refinements/>

        <div class="flex flex-col md:flex-row">

            <activity-search-filters class="md:w-64 xl:w-80x flex-shrink-0"/>

            <activity-search-results class="w-full"/>

        </div>

    </ais-instant-search>
</div>
</template>

<script>
import algoliasearch from 'algoliasearch/lite'
import { AisConfigure, AisCurrentRefinements, AisInstantSearch, AisStateResults } from 'vue-instantsearch'
import { history } from 'instantsearch.js/es/lib/routers'

import ActivitySearchFilters from './ActivitySearchFilters'
import ActivitySearchInput from './ActivitySearchInput'
import ActivitySearchResults from './ActivitySearchResults'
import AroundLatLngWidget from './AroundLatLngWidget'

import PlacesWidget from './PlacesWidget'

// Map the search and filter state to+from the URL
const routerMapping = {
    stateToRoute: ({ query, refinementList, toggle, latlng, page }) => ({
        query: query,
        tags: refinementList?.tags?.join('~'),
        province: refinementList?.province?.join('~'),
        languages: refinementList?.languages?.join('~'),
        accessibility: refinementList?.accessibility?.join('~'),
        days: refinementList?.days?.join('~'),
        featured: toggle?.is_featured,
        latlng: latlng,
        // nearme: nearme,
        // place: place,
        page: page,
    }),
    routeToState: ({ query, tags, province, languages, accessibility, days, featured, latlng, page }) => ({
        query,
        refinementList: {
            languages: languages?.split('~'),
            accessibility: accessibility?.split('~'),
            days: days?.split('~'),
            tags: tags?.split('~'),
            province: province?.split('~'),
        },
        toggle: {
            is_featured: featured,
        },
        latlng,
        page,
    }),
}

export default {
    components: {
        ActivitySearchFilters,
        ActivitySearchInput,
        ActivitySearchResults,
        AisConfigure,
        AisCurrentRefinements,
        AisInstantSearch,
        AisStateResults,
        AroundLatLngWidget,
        PlacesWidget,
    },

    data: () => ({
        index: `${CultureDays.config.scout_prefix}activities`,
        searchClient: algoliasearch(process.env.MIX_ALGOLIA_APP_ID, process.env.MIX_ALGOLIA_SECRET),
        routing: {
            router: history(),
            stateMapping: routerMapping,
        },
        // show_filters: false,
        // aroundLatLng: '',
        // id: 'plGSH2ASJE9S',
        // secret: '676181ba5ce3673509daa3ee242cb694',
        // type: 'city',
        // suggestion: undefined,
    }),

    methods: {
        debouncedRefine: _.debounce((refine, value) => refine(value), 500),

        kv(params) {
            return new URLSearchParams(params).entries()
        }

    //         toggleType() {
    //   if (this.type === 'city') {
    //     this.type = 'country';
    //   } else {
    //     this.type = 'city';
    //   }
    // },
    },
}
</script>