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';

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 renderListItem = (item: any, index: any) => {
    return (
      <View 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)}
        />
      </View>
    );
  };

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

    setTypes(newData);
  };

  const renderList = () => {
    let list: any[] = [];

    for (let i = 0; i < types.length; i++) {
      const type = types[i];

      list[i] = renderListItem(type, i);
    }

    return list;
  }

  return (
    <SafeAreaView style={{flex: 1, backgroundColor: Colors[colorScheme].background}}>
      <View 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}>
            { renderList() }
          </ThemedView>
        </ScrollView>
      </View>
    </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,
  },
  listItem: {
    flex: 1,
    display: 'flex',
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 25,
    paddingRight: 25,
    paddingBottom: 10,
    marginBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#f2f2f2',
  },
  listItemTitle: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },
  listImage: {
    width: 30,
    height: 30,
    borderRadius: 5,
    marginRight: 8,
  }
});