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

const stylesheet = StyleSheet.create({
    container: {
        justifyContent: "space-between",
        flexDirection: "row",
        width: "100%"
    },
    baseContainer: {
        flexDirection: "column",
        flex: 1
    }
});

export const useStyles = ({
    isWorkWithSafeAreaView,
    customBackgroundColor,
    isWorkWithSeperator,
    isWorkWithSticky,
    backgroundColor,
    glassEffect,
    borders,
    spaces,
    colors
}: MainHeaderDynamicStyle) => {
    const styles = {
        container: {
            backgroundColor: customBackgroundColor ? colors.project[customBackgroundColor] : backgroundColor ? colors.content.container[backgroundColor] : colors.content.container.default,
            padding: spaces.spacingMd,
            ...webStyle({
                WebkitBackdropFilter: `blur(${glassEffect}px)`,
                backdropFilter: `blur(${glassEffect}px)`
            })
        } as Mutable<ViewStyle>,
        safeAreaView: {
        } as Mutable<ViewStyle>
    };

    if(isWorkWithSeperator) {
        styles.container.borderBottomColor = colors.content.border.subtle;
        styles.container.borderBottomWidth = borders.line;
    }

    if(isWorkWithSticky) {
        if(isWorkWithSafeAreaView) {
            styles.safeAreaView.position = "absolute";
            styles.safeAreaView.zIndex = 999;
            styles.safeAreaView.right = 0;
            styles.safeAreaView.left = 0;
            styles.safeAreaView.top = 0;
        } else {
            styles.container.position = "absolute";
            styles.container.zIndex = 999;
            styles.container.right = 0;
            styles.container.left = 0;
            styles.container.top = 0;
        }
    }

    return styles;
};

export default stylesheet;
