import {
    type ViewStyle,
    StyleSheet
} from "react-native";
import type {
    EmbeddedMenuDynamicStyle
} from "./type";
import type {
    Mutable
} from "../../types";

const stylesheet = StyleSheet.create({
    container: {
        flexDirection: "column",
        display: "flex",
        height: "100%"
    },
    content: {
        justifyContent: "flex-start",
        flexDirection: "column",
        alignItems: "stretch",
        flex: 1
    },
    safeAreaView: {
        flex: 1
    },
    headerContainer: {
        justifyContent: "center",
        alignItems: "flex-start",
        width: "100%"
    },
    seperator: {
    },
    headerContentContainer: {
        flexDirection: "row",
        alignItems: "center",
        width: "100%"
    }
});

export const useStyles = ({
    isCollapse,
    colors,
    spaces
}: EmbeddedMenuDynamicStyle) => {
    const styles = {
        container: {
            backgroundColor: colors.content.container.default
        } as Mutable<ViewStyle>,
        headerContainer: {
            paddingHorizontal: spaces.spacingMd,
            paddingTop: spaces.spacingMd
        } as Mutable<ViewStyle>,
        seperator: {
            marginVertical: spaces.spacingMd
        } as Mutable<ViewStyle>,
        collapseButton: {
            marginBottom: spaces.spacingSm,
            padding: spaces.spacingSm
        } as Mutable<ViewStyle>,
        headerContentContainer: {
        } as Mutable<ViewStyle>,
        siteLogo: {
        } as Mutable<ViewStyle>
    };

    if(isCollapse) {
        styles.siteLogo.marginRight = spaces.spacingMd;
    } else {
        styles.headerContainer.justifyContent = "center";
        styles.headerContainer.alignItems = "center";
    }

    return styles;
};

export default stylesheet;
