import { StyleSheet, Text, TouchableHighlight, View } from "react-native";
import { useThemeColor } from "../../hooks/useThemeColor";
import SearchBar from "../common/SearchBar";

type BudgetHeaderProperties = {
    selectedPage: string,
    handlePageSelection: (page: string) => void,
}

type PageSelectorButtonProperties = {
    isSelected: boolean,
    onPress: () => void,
    label: string,
}

const BudgetHeader = (properties: BudgetHeaderProperties) => {
    const backgroundColor = useThemeColor("backgroundColor");

    return (<>
        <View style={styles.containerStyle}>
            <PageSelectorButton 
                label="Expenses"
                isSelected={properties.selectedPage === "expenses"}
                onPress={() => {
                    properties.handlePageSelection("expenses")
                }}
            />
            <PageSelectorButton 
                label="Savings"
                isSelected={properties.selectedPage === "savings"}
                onPress={() => {
                    properties.handlePageSelection("savings");
                }}
            />
        </View>
        <SearchBar placeholder='Search...'></SearchBar>
    </>);
}

const PageSelectorButton = (properties: PageSelectorButtonProperties) => {
    const primaryTextColor = useThemeColor("primaryText");
    const secondaryTextColor = useThemeColor("secondaryText");
    const elementSelectedColor = useThemeColor("elementSelectedColor");
    const elementDefaultColor = useThemeColor("elementDefaultColor");
    const accentColor = useThemeColor("accentColor");

    return (
        <TouchableHighlight
            underlayColor={elementDefaultColor}
            onPress={properties.onPress}
            style={[styles.headerContainerStyle, properties.isSelected ? {backgroundColor: accentColor} : {backgroundColor: elementDefaultColor}]}>
            <Text
            style={[styles.headerTextStyle, properties.isSelected ? {color: primaryTextColor} : {color: secondaryTextColor}]}>
                {properties.label}
            </Text>

        </TouchableHighlight>
    );
}

export default BudgetHeader;

const styles = StyleSheet.create({
    headerContainerStyle: {
        width: "50%",
        borderRadius: 10,
        marginHorizontal: 30,
    },
    headerTextStyle: {
        fontSize: 30,
        textAlign: "center",
        textAlignVertical: "center",
    },
    containerStyle: {
        flexDirection: "row",
        justifyContent: "space-evenly",
        marginHorizontal: 20,
        marginBottom: 20,
        marginTop: 10,
    },
});