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

import {ThemedText} from '@/components/ThemedText';
import {ThemedView} from '@/components/ThemedView';
import {Colors} from '@/constants/Colors';
import {useColorScheme} from '@/hooks/useColorScheme';
import React from 'react';

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

  return (
    <SafeAreaView style={{flex: 1, backgroundColor: Colors[colorScheme].background,}}>
      <ThemedView style={styles.container}>
        <ScrollView>
          <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}>
            <TouchableOpacity style={styles.listItem}>
              <Image source={require('@/assets/images/paper.png')} style={styles.listImage} />
              <ThemedText type="default">Categorie 1</ThemedText>
            </TouchableOpacity>
            <TouchableOpacity style={styles.listItem}>
              <Image source={require('@/assets/images/paper.png')} style={styles.listImage} />
              <ThemedText type="default">Categorie 2</ThemedText>
            </TouchableOpacity>
            <TouchableOpacity style={styles.listItem}>
              <Image source={require('@/assets/images/paper.png')} style={styles.listImage} />
              <ThemedText type="default">Categorie 3</ThemedText>
            </TouchableOpacity>
          </ThemedView>
        </ScrollView>
      </ThemedView>
    </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,
  }
});