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

const stylesheet = StyleSheet.create({
    container: {
        flexDirection: "column",
        ...Platform.select({
            web: {
                minWidth: 280,
                maxWidth: 340,
                width: "auto"
            },
            default: {
                width: "82%"
            }
        }),
        position: "absolute",
        display: "flex",
        height: "100%",
        zIndex: 99997,
        bottom: 0,
        left: 0,
        top: 0
    },
    content: {
        justifyContent: "flex-start",
        flexDirection: "column",
        alignItems: "stretch",
        flex: 1
    },
    safeAreaView: {
        flex: 1
    },
    headerContainer: {
        justifyContent: "center",
        alignItems: "flex-start",
        width: "100%"
    },
    seperator: {
    }
});

export const useStyles = ({
    colors,
    spaces
}: MenuDynamicStyle) => {
    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>
    };

    return styles;
};

export default stylesheet;