import {
  StyleSheet,
  ScrollView,
  SafeAreaView,
  StatusBar,
  Image,
  TouchableOpacity,
} from 'react-native';

import React, {useState} from 'react';
import {router} from 'expo-router';
import {AutocompleteDropdown} from 'react-native-autocomplete-dropdown';
import AsyncStorage from '@react-native-async-storage/async-storage';

import {ThemedText} from '@/components/ThemedText';
import {ThemedView} from '@/components/ThemedView';
import {Colors} from '@/constants/Colors';
import {useColorScheme} from '@/hooks/useColorScheme';
import {Request} from '@/services/request';
import List from '@/components/List';

export default function ExploreScreen() {
  const colorScheme = useColorScheme() ?? 'light';
  const [types, setTypes] = useState([]);

  // Load waste types
  Request.get('waste-types').then((responseData) => {
    const response = responseData.data;

    setTypes(response);
  });

  // View item in sub screen
  const viewItem = async (item: any) => {
    await AsyncStorage.setItem('activeCategory', JSON.stringify(item));

    router.push('/explore/category');
  };

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

          <ThemedView style={styles.titleContainer}>
            <ThemedText type="title" style={{color: Colors[colorScheme].tint}}>en waarom?</ThemedText>
          </ThemedView>

          <ThemedView style={styles.searchContainer}>
            <ThemedText type="defaultSemiBold">Wat wilt u scheiden?</ThemedText>
            <AutocompleteDropdown
              clearOnFocus={false}
              closeOnBlur={true}
              closeOnSubmit={false}
              emptyResultText={'Niks gevonden'}
              dataSet={[
                {id: '1', title: 'Alpha'},
                {id: '2', title: 'Beta'},
                {id: '3', title: 'Gamma'},
              ]}
            />
          </ThemedView>

          <ThemedView style={styles.categoriesContainer}>
            <ThemedText type="defaultSemiBold">Of kies een categorie:</ThemedText>
          </ThemedView>

          <ThemedView style={styles.listContainer}>
            <List
              data={types}
              renderItem={(item: any, index: any) => (
                <TouchableOpacity style={styles.listItem} key={index} onPress={() => viewItem(item)}>
                  <Image source={require('@/assets/images/paper.png')} style={styles.listImage}/>
                  <ThemedText type="default">{item.name}</ThemedText>
                </TouchableOpacity>
              )}
            />
          </ThemedView>
        </ThemedView>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 25,
    marginTop: StatusBar.currentHeight,
  },
  titleContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    paddingBottom: 8,
  },
  searchContainer: {
    marginTop: 10,
  },
  categoriesContainer: {
    marginTop: 25,
  },
  listContainer: {
    marginTop: 10,
  },
  listItem: {
    flex: 1,
    display: 'flex',
    gap: 8,
    flexDirection: 'row',
    alignItems: 'center',
    paddingBottom: 10,
    marginBottom: 10,
    borderBottomWidth: 1,
    borderBottomColor: '#f2f2f2',
  },
  listImage: {
    width: 30,
    height: 30,
    borderRadius: 5,
    marginRight: 8,
  }
});