import { ScrollView } from "react-native";
import React, { useState } from "react";
import { View, Text } from "react-native-ui-lib";
import DumpList from "./DumpList";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import { TextField } from "react-native-ui-lib";
import { StyleSheet } from "react-native";
import { Feather } from "@expo/vector-icons";
import { TextInput } from "react-native-gesture-handler";

const BrainDumpPage = () => {
  const [searchText, setSearchText] = useState<string>("");

  return (
    <View>
      <ScrollView
        showsVerticalScrollIndicator={false}
        showsHorizontalScrollIndicator={false}
      >
        <View marginH-25>
          <HeaderTemplate
            message={"Welcome to your notes!"}
            isWelcome={false}
          />
          <View>
            <View style={styles.searchField} centerV>
              <TextField
                value={searchText}
                onChangeText={(value) => {
                  setSearchText(value);
                }}
                leadingAccessory={
                  <Feather
                    name="search"
                    size={24}
                    color="#9b9b9b"
                    style={{ paddingRight: 10 }}
                  />
                }
                placeholder="Search notes..."
              />
            </View>
            <DumpList searchText={searchText} />
          </View>
        </View>
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  searchField: {
    borderWidth: 1,
    borderColor: "#9b9b9b",
    borderRadius: 18,
    height: 48,
    paddingLeft: 10,
    marginVertical: 20,
  },
});

export default BrainDumpPage;
