import { Dimensions, 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";
import LinearGradient from "react-native-linear-gradient";

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

  return (
    <View height={"100%"}>
      <View>
        <ScrollView
          showsVerticalScrollIndicator={false}
          showsHorizontalScrollIndicator={false}
        >
          <View marginH-25>
            <HeaderTemplate
              message={"Welcome to your notes!"}
              isWelcome={false}
              children={
                <Text
                  style={{ fontFamily: "Manrope_400Regular", fontSize: 14 }}
                >
                  Drop your notes on-the-go here, and{"\n"}organize them later.
                </Text>
              }
            />
            <View>
              <View style={styles.searchField} centerV>
                <TextField
                  value={searchText}
                  onChangeText={(value) => {
                    setSearchText(value);
                  }}
                  leadingAccessory={
                    <Feather
                      name="search"
                      size={24}
                      color="#9b9b9b"
                      style={{ paddingRight: 10 }}
                    />
                  }
                  style={{
                    fontFamily: "Manrope_500Medium",
                    fontSize: 15,
                  }}
                  placeholder="Search notes..."
                />
              </View>
              <DumpList searchText={searchText} />
            </View>
          </View>
        </ScrollView>
      </View>
      <LinearGradient
        colors={["#f2f2f2", "transparent"]}
        start={{ x: 0.5, y: 1 }}
        end={{ x: 0.5, y: 0 }}
        style={{
          position: "absolute",
          bottom: 0,
          height: 90,
          width: Dimensions.get("screen").width,
        }}
      >
        <Button
          style={{
            height: 40,
            position: "relative",
            marginLeft: "auto",
            width: 20,
            right: 20,
            bottom: -10,
            borderRadius: 30,
            backgroundColor: "#fd1775",
          }}
          color="white"
          enableShadow
          onPress={() => {
            setIsAddVisible(true);
          }}
        >
          <View row centerV centerH>
            <MaterialIcons name="add" size={22} color={"white"} />
            <Text
              white
              style={{ fontSize: 16, fontFamily: "Manrope_600SemiBold" }}
            >
              New
            </Text>
          </View>
        </Button>
      </LinearGradient>
      <AddBrainDump
        addBrainDumpProps={{
          isVisible: isAddVisible,
          setIsVisible: setIsAddVisible,
        }}
      />
    </View>
  );
};

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

export default BrainDumpPage;