Kliko/app/(tabs)/map.tsx

import React, {useEffect, useState} from 'react';
import {Image, SafeAreaView, ScrollView, StatusBar, StyleSheet, Switch, View} from 'react-native';

import {ThemedText} from '@/components/ThemedText';
import {ThemedView} from '@/components/ThemedView';
import {Colors} from '@/constants/Colors';
import {useColorScheme} from '@/hooks/useColorScheme';
import MapView from '@/components/map/map';
import List from '@/components/List';
import {Request} from '@/services/request';
import {Marker} from 'react-native-maps';
import {PROVIDER_GOOGLE} from 'react-native-maps';

export default function MapScreen() {
  const colorScheme = useColorScheme() ?? 'light';

  const [types, setTypes] = useState<any>([]);
  const [markers, setMarkers] = useState<any>([]);

  // Load markers and types
  useEffect(() => {
    Request.get('locations').then((response) => {
      const {locations, types} = response;

      // Set types
      const typesList: any[] = [];
      types.forEach((type: any) => {
        typesList.push({
          name: type.name,
          image: type.image,
          isEnabled: false,
          type: type.config_name,
        });
      })
      setTypes(typesList);

      // Set markers
      setMarkers(locations);
    })
  }, []);

  // Enable/disable type
  const toggleSwitch = (index: any) => {
    const newData = types.map((item: any, key: any) =>
      key === index ? {...item, isEnabled: !item.isEnabled} : item
    );

    setTypes(newData);
  };

  // Get all types that are active
  const getActiveTypes = (): Array<String> => {
    const list: any[] = [];

    types.forEach((type: any) => {
      if (type.isEnabled) {
        list.push(type.type);
      }
    });

    return list;
  }

  // Get all markers that needs to be visible
  const activeMarkers = () => {
    return markers.filter((marker: any) => {
      return getActiveTypes().includes(marker.waste_type);
    });
  }

  return (
    <SafeAreaView style={{flex: 1, backgroundColor: Colors[colorScheme].background}}>
      <ThemedView style={styles.container}>
        <ScrollView>
          <ThemedView style={styles.titleContainer}>
            <ThemedText type="title">Afvalcontainers</ThemedText>
          </ThemedView>

          <ThemedView style={styles.titleContainer}>
            <ThemedText type="title" style={{color: Colors[colorScheme].tint}}>in de buurt</ThemedText>
          </ThemedView>

          <ThemedView style={styles.mapContainer}>
            <MapView
              style={styles.map}
              provider={PROVIDER_GOOGLE}
              initialRegion={{
                latitude: 52.043420,
                longitude: 5.630960,
                latitudeDelta: 0.03,
                longitudeDelta: 0.0421,
              }}
            >
              {activeMarkers().map((marker: any, index: any) => (
                <Marker
                  key={index}
                  tracksViewChanges={false}
                  coordinate={{
                    latitude: parseFloat(marker.latitude),
                    longitude: parseFloat(marker.longitude),
                  }}
                  title={marker.number}
                  description={marker.description}
                  pinColor={marker.marker_color}
                />
              ))}
            </MapView>
          </ThemedView>

          <ThemedView style={styles.listContainer}>
            <List
              data={types}
              renderItem={(item: any, index: any) => (
                <ThemedView style={styles.listItem} key={index}>
                  <View style={styles.listItemTitle}>
                    <Image source={{uri: item.image}} style={styles.listImage}/>
                    <ThemedText type="default">{item.name}</ThemedText>
                  </View>

                  <Switch
                    trackColor={{false: '#767577', true: Colors[colorScheme].tint}}
                    thumbColor={'#fff'}
                    value={item.isEnabled}
                    onValueChange={() => toggleSwitch(index)}
                  />
                </ThemedView>
              )}/>
          </ThemedView>
        </ScrollView>
      </ThemedView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: StatusBar.currentHeight,
    paddingTop: 25,
  },
  titleContainer: {
    paddingLeft: 25,
    paddingRight: 25,
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    paddingBottom: 8,
  },
  mapContainer: {
    marginTop: 15,
  },
  map: {
    width: '100%',
    height: 500,
  },
  listContainer: {
    marginTop: 10,
    paddingLeft: 25,
    paddingRight: 25,
  },
  listItem: {
    flex: 1,
    display: 'flex',
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
    paddingBottom: 10,
    marginBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#f2f2f2',
  },
  listItemTitle: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },
  listImage: {
    width: 30,
    height: 30,
    borderRadius: 5,
    marginRight: 8,
  }
});