import { ScrollView } from "react-native";
import React, { useState } from "react";
import { View, Text, Button } 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, MaterialIcons } from "@expo/vector-icons";
import { TextInput } from "react-native-gesture-handler";
import AddBrainDump from "./AddBrainDump";

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

  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>
      <Button
        style={{
          position: "absolute",
          bottom: 20,
          right: 20,
          height: 40,
          borderRadius: 30,
          backgroundColor: "#fd1775",
          alignItems: "center",
          justifyContent: "center",
        }}
        centerV
        color="white"
        enableShadow
        iconSource={() => (
          <MaterialIcons name="add" size={22} color={"white"} />
        )}
        onPress={() => {
          setIsAddVisible(true);
        }}
        label="New"
        text60R
      />
      <AddBrainDump
        addBrainDumpProps={{
          isVisible: isAddVisible,
          setIsVisible: setIsAddVisible,
        }}
      />
    </View>
  );
};

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

export default BrainDumpPage;