1import * as Maps from 'expo-maps';
2import React, { useContext, useState, useRef } from 'react';
3import { StyleSheet, View, TextInput } from 'react-native';
4
5import SwitchContainer from '../components/SwitchContainer';
6import ProviderContext from '../context/ProviderContext';
7
8export default function POIExample() {
9  const provider = useContext(ProviderContext);
10  const ref = useRef<Maps.ExpoMap>(null);
11  const [enablePOISearching, setEnablePOISearching] = useState<boolean>(false);
12  const [enablePOIs, setEnablePOIs] = useState<boolean>(false);
13  const [enablePOIFilter, setEnablePOIFilter] = useState<boolean>(false);
14  const [poiType, setPoiType] = useState<[] | [Maps.POICategoryType]>([]);
15  const [enableQueryCompletions, setEnableQueryCompletions] = useState<boolean>(false);
16  const [text, onChangeText] = useState<string>('');
17  const [placeToSearch, setPlaceToSearch] = useState<string>('');
18  const [enablePlaceSearch, setEnablePlaceSearch] = useState<boolean>(false);
19  const [clickablePOIs, setClickablePOIs] = useState<boolean>(false);
20
21  const appleMapsSearchRequest = 'Centrum Pompidou;Roue 1234';
22  const googleMapsSearchRequest = 'Centrum Pompidou;ChIJoyC4CRxu5kcRRTPcWX5srLc';
23
24  return (
25    <View style={styles.mapContainer}>
26      <Maps.ExpoMap
27        style={{ flex: 1, width: '100%' }}
28        provider={provider}
29        enablePOISearching={enablePOISearching}
30        enablePOIs={enablePOIs}
31        enablePOIFilter={poiType}
32        createPOISearchRequest={placeToSearch}
33        clickablePOIs={clickablePOIs}
34        ref={ref}
35        initialCameraPosition={{
36          target: {
37            latitude: 48.85,
38            longitude: 2.34,
39          },
40          zoom: 13,
41        }}
42      />
43      <View style={styles.switchContainer}>
44        {provider === 'apple' && (
45          <SwitchContainer
46            title="Enable POI search"
47            value={enablePOISearching}
48            onValueChange={() => setEnablePOISearching(!enablePOISearching)}
49          />
50        )}
51        <SwitchContainer
52          title="Enable POIs"
53          value={enablePOIs}
54          onValueChange={() => setEnablePOIs(!enablePOIs)}
55        />
56        {provider === 'google' && (
57          <SwitchContainer
58            title="Clickable POIs"
59            value={clickablePOIs}
60            onValueChange={() => setClickablePOIs(!clickablePOIs)}
61          />
62        )}
63        {provider === 'apple' && (
64          <SwitchContainer
65            title="Enable POI cafe filter"
66            value={enablePOIFilter}
67            onValueChange={() => {
68              setEnablePOIFilter(!enablePOIFilter);
69              if (enablePOIFilter) setPoiType([]);
70              else setPoiType(['cafe']);
71            }}
72          />
73        )}
74        <SwitchContainer
75          title="Fetch query completions (display in console)"
76          value={enableQueryCompletions}
77          onValueChange={() => setEnableQueryCompletions(!enableQueryCompletions)}
78        />
79        <TextInput
80          style={styles.textInput}
81          editable={enableQueryCompletions}
82          onChangeText={async (text) => {
83            onChangeText(text);
84            await ref.current?.getSearchCompletions(text);
85          }}
86          placeholder="Search query"
87          value={text}
88        />
89        <SwitchContainer
90          title="Search Centrum Pompidou"
91          value={enablePlaceSearch}
92          onValueChange={() => {
93            setEnablePlaceSearch(!enablePlaceSearch);
94            if (!enablePlaceSearch) {
95              if (provider === 'apple') {
96                setPlaceToSearch(appleMapsSearchRequest);
97              } else {
98                setPlaceToSearch(googleMapsSearchRequest);
99              }
100            } else {
101              setPlaceToSearch('');
102            }
103          }}
104        />
105      </View>
106    </View>
107  );
108}
109
110const styles = StyleSheet.create({
111  mapContainer: {
112    flex: 1,
113  },
114  switchContainer: {
115    padding: 20,
116  },
117  textInput: {
118    height: 30,
119    margin: 5,
120    padding: 5,
121    borderWidth: 0.5,
122  },
123});
124