import {Dimensions, ScrollView, StyleSheet} from "react-native";
import React, {useState} from "react";
import {Button, Text, TextField, View} from "react-native-ui-lib";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import {Feather, MaterialIcons} from "@expo/vector-icons";
import LinearGradient from "react-native-linear-gradient";
import PlusIcon from "@/assets/svgs/PlusIcon";
import AddFeedback from "./AddFeedback";
import FeedbackList from "./FeedbackList";
import {DeviceType} from 'expo-device'
import * as Device from 'expo-device'

const FeedbackPage = () => {
    const [searchText, setSearchText] = useState<string>("");
    const [isAddVisible, setIsAddVisible] = useState<boolean>(false);
    const isTablet: boolean = Device.deviceType === DeviceType.TABLET;
    return (
        <View height={"100%"}>
            <View>
                <ScrollView
                    showsVerticalScrollIndicator={false}
                    showsHorizontalScrollIndicator={false}
                >
                    <View marginH-25 style={isTablet ? {alignItems: 'center'} : undefined}>
                        <HeaderTemplate
                            message={"Welcome to your Feedback!"}
                            isWelcome={false}
                            children={
                                <Text
                                    style={{fontFamily: "Manrope_400Regular", fontSize: 14}}
                                >
                                    Drop your feedback here, and{"\n"}organize it later.
                                </Text>
                            }
                        />
                        <View style={isTablet ? {maxWidth: 390} : undefined}>
                            <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,
                                        width: '100%'
                                    }}
                                    placeholder="Search your feedbacks..."
                                />
                            </View>
                            <FeedbackList searchText={searchText}/>
                        </View>
                    </View>
                </ScrollView>
            </View>
            <LinearGradient
                colors={["#f9f8f700", "#f9f8f7"]}
                locations={[0,1]}
                style={{
                    position: "absolute",
                    bottom: 0,
                    height: 120,
                    width: Dimensions.get("screen").width,
                    justifyContent:'center',
                    alignItems:"center"
                }}
            >
                <Button
                    style={{
                        height: 40,
                        position: "relative",
                        width: "90%",
                        bottom: -10,
                        borderRadius: 30,
                        backgroundColor: "#fd1775",
                        maxWidth: 450,
                    }}
                    color="white"
                    enableShadow
                    onPress={() => {
                        setIsAddVisible(true);
                    }}
                >
                    <View row centerV centerH>
                        <PlusIcon />
                        <Text
                            white
                            style={{fontSize: 16, fontFamily: "Manrope_600SemiBold", marginLeft: 5}}
                        >
                            New
                        </Text>
                    </View>
                </Button>
            </LinearGradient>
            <AddFeedback
                addFeedbackProps={{
                    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 FeedbackPage;