import React, {useState} from 'react';
import {
  StyleSheet,
  ScrollView,
  SafeAreaView,
  View,
  StatusBar,
  Image,
  FlatList,
  Switch
} 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';

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

  const [types, setTypes] = useState([
    {
      image: require('@/assets/images/paper.png'),
      name: 'Papier',
      isEnabled: false,
    },
    {
      image: require('@/assets/images/paper.png'),
      name: 'Glas',
      isEnabled: false,
    },
    {
      image: require('@/assets/images/paper.png'),
      name: 'Textiel',
      isEnabled: false,
    },
    {
      image: require('@/assets/images/paper.png'),
      name: 'GFT+e',
      isEnabled: false,
    },
    {
      image: require('@/assets/images/paper.png'),
      name: 'Luiers',
      isEnabled: false,
    },
  ]);

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

    setTypes(newData);
  };

  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}
              initialRegion={{
                latitude: 52.043420,
                longitude: 5.630960,
                latitudeDelta: 0.03,
                longitudeDelta: 0.0421,
              }}
            />
          </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={item.image} style={styles.listImage}/>
                    <ThemedText type="default">{item.name}</ThemedText>
                  </View>

                  <Switch
                    trackColor={{false: '#767577', true: Colors.light.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,
  }
});