import {Button, Text, View} from "react-native-ui-lib";
import React, {useState} from "react";
import {StyleSheet} from "react-native";
import {Octicons} from "@expo/vector-icons";
import CalendarSettingsPage from "./CalendarSettingsPage";
import ChoreRewardSettings from "./ChoreRewardSettings";
import UserSettings from "./UserSettings";
import ProfileIcon from "@/assets/svgs/ProfileIcon";
import CalendarIcon from "@/assets/svgs/CalendarIcon";
import PrivacyPolicyIcon from "@/assets/svgs/PrivacyPolicyIcon";
import ArrowRightIcon from "@/assets/svgs/ArrowRightIcon";

const pageIndex = {
    main: 0,
    user: 1,
    calendar: 2,
    chore: 3,
    policy: 4,
};

const SettingsPage = () => {
    const [selectedPage, setSelectedPage] = useState<number>(0);
    return (
        <View flexG>
            {selectedPage == 0 && (
                <View flexG centerH marginH-30 marginT-30>
                    <Button
                        backgroundColor="white"
                        style={styles.mainBtn}
                        children={
                            <View row centerV width={"100%"}>
                                <ProfileIcon style={{marginRight: 10}} color="#07b9c8"/>
                                <Text style={styles.label} color="#07b8c7">
                                    Manage My Profile
                                </Text>
                                <ArrowRightIcon style={{marginLeft: "auto"}}/>
                            </View>
                        }
                        onPress={() => setSelectedPage(pageIndex.user)}
                    />
                    <Button
                        backgroundColor="white"
                        style={styles.mainBtn}
                        children={
                            <View row centerV width={"100%"}>
                                <CalendarIcon style={{marginRight: 10}}/>
                                <Text style={styles.label} color="#fd1775">
                                    Calendar Settings
                                </Text>
                                <ArrowRightIcon style={{marginLeft: "auto"}}/>
                            </View>
                        }
                        onPress={() => {
                            setSelectedPage(pageIndex.calendar);
                        }}
                    />
                    <Button
                        backgroundColor="white"
                        style={styles.mainBtn}
                        children={
                            <View row centerV width={"100%"}>
                                <Octicons
                                    name="gear"
                                    size={24}
                                    color="#ff9900"
                                    style={{marginRight: 10}}
                                />
                                <Text style={styles.label} color="#ff9900">
                                    To-Do Reward Settings
                                </Text>
                                <ArrowRightIcon style={{marginLeft: "auto"}}/>
                            </View>
                        }
                        onPress={() => setSelectedPage(pageIndex.chore)}
                    />
                    <Button
                        backgroundColor="white"
                        style={styles.mainBtn}
                        children={
                            <View row centerV width={"100%"}>
                                <PrivacyPolicyIcon style={{marginRight: 10}}/>
                                <Text style={styles.label} color="#6c645b">
                                    Cally Privacy Policy
                                </Text>
                                <ArrowRightIcon style={{marginLeft: "auto"}}/>
                            </View>
                        }
                    />
                </View>
            )}
            {selectedPage == pageIndex.calendar && (
                <CalendarSettingsPage setSelectedPage={setSelectedPage}/>
            )}
            {selectedPage == pageIndex.chore && (
                <ChoreRewardSettings setSelectedPage={setSelectedPage}/>
            )}
            {selectedPage == pageIndex.user && (
                <UserSettings setSelectedPage={setSelectedPage}/>
            )}
        </View>
    );
};

export default SettingsPage;

const styles = StyleSheet.create({
    mainBtn: {
        width: 311,
        justifyContent: "flex-start",
        marginBottom: 20,
        height: 57.61,
    },
    label: {
        fontFamily: "Poppins_400Regular",
        fontSize: 14.71,
        textAlignVertical: "center",
    },
});