import styles from "@/app/tabStyles/indexStyles";
import React from "react";
import {
  Text,
  View,
  TextInput,
  FlatList,
  TouchableOpacity,
  Keyboard,
  TouchableWithoutFeedback,
} from "react-native";
import Feather from "@expo/vector-icons/Feather";
import { useDiscoveryContext } from "@/contexts/DiscoveryContext";
import { useShowContext } from "@/contexts/ShowContext";

export default function TabTwoScreen() {
  const { query, setQuery, suggestions, loading, error, clear } =
    useDiscoveryContext();

  const { shows } = useShowContext();

  const personSuggestions = React.useMemo(
    () => suggestions.filter((s) => s.type === "PERSON"),
    [suggestions]
  );

  const showSuggestions = React.useMemo(
    () => suggestions.filter((s) => s.type === "SHOW"),
    [suggestions]
  );

  const [tag, setTag] = React.useState<string | null>(null);
  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <View style={styles.mainContainer}>
        <View style={styles.header}>
          <Text style={[styles.title, { fontSize: 28 }]}>Durchsuchen</Text>
        </View>

        <View style={styles.searchContainer}>
          <TextInput
            value={query}
            onChangeText={setQuery}
            placeholder="Wonach suchst du?"
            placeholderTextColor=""
            style={{
              fontSize: 18,
              fontWeight: "500",
              color: "hsl(221, 39%, 80%)",
            }}
            returnKeyType="search"
            onSubmitEditing={() => {
              console.log("Search:", query);
            }}
            autoCapitalize="none"
          />

          {query.length === 0 ? (
            <Feather name="search" size={24} color="hsl(221, 39%, 80%)" />
          ) : (
            <Feather
              name="x"
              size={24}
              color="hsl(221, 39%, 80%)"
              onPress={() => setQuery("")}
            />
          )}
        </View>

        {tag && (
          <View style={styles.tagContainer}>
            <Text style={styles.tagLabel}>{tag}</Text>
            <Feather
              name="x"
              size={18}
              color="hsl(221, 39%, 80%)"
              onPress={() => setTag(null)}
              style={{ marginLeft: "auto", marginRight: 10 }}
            />
          </View>
        )}

        {query.length > 0 && (
          <>
            <View style={styles.suggestionsSection}>
              <Text style={styles.suggestionTitle}>Suchvorschläge</Text>

              {showSuggestions.map((suggestion, idx) => (
                <TouchableOpacity
                  key={suggestion.text + "_" + idx}
                  style={styles.suggestionContainer}
                  onPress={() => {
                    setTag(suggestion.text);
                  }}
                >
                  <View style={styles.imageContainer}></View>
                  <Text style={styles.suggestionLabel}>{suggestion.text}</Text>
                </TouchableOpacity>
              ))}
              {personSuggestions.map((suggestion, idx) => (
                <TouchableOpacity
                  key={suggestion.text + "_" + idx}
                  style={styles.suggestionContainer}
                  onPress={() => {
                    setTag(suggestion.text);
                  }}
                >
                  <View style={styles.imageContainer}></View>
                  <Text style={styles.suggestionLabel}>{suggestion.text}</Text>
                </TouchableOpacity>
              ))}
            </View>
          </>
        )}
      </View>
    </TouchableWithoutFeedback>
  );
}