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

const stylesheet = StyleSheet.create({
    container: {
        maxHeight: windowHeight * 0.10,
        justifyContent: "center",
        flexDirection: "row",
        alignItems: "center",
        position: "relative",
        minHeight: 100,
        width: "100%",
        ...webStyle({
            userSelect: "none"
        })
    },
    safeAreaViewContainer: {
    },
    titleContainer: {
        justifyContent: "center",
        flexDirection: "row",
        alignItems: "center",
        position: "absolute",
        alignSelf: "center",
        bottom: 0,
        right: 0,
        left: 0,
        top: 0
    },
    contentContainer: {
        justifyContent: "space-between",
        alignItems: "stretch",
        flexDirection: "row",
        position: "relative",
        flex: 1
    },
    title: {
        textAlign: "center",
        flex: 1,
        ...webStyle({
            overflowWrap: "break-word",
            wordBreak: "break-word"
        })
    },
    rightContainer: {
    },
    leftContainer: {
    }
});

export const useStyles = ({
    safeAreaViewBackgroundColor,
    isWorkWithHeaderSpace,
    backgroundColor,
    headerSpace,
    configs,
    spaces,
    colors
}: HeaderDynamicStyleType) => {
    const styles = {
        safeAreaView: {
            backgroundColor: safeAreaViewBackgroundColor ? colors.content.container[safeAreaViewBackgroundColor] : colors.content.container[backgroundColor]
        } as Mutable<ViewStyle>,
        content: {
            marginTop: isWorkWithHeaderSpace ? headerSpace ? headerSpace : configs.headerSpace : 0,
            backgroundColor: colors.content.container[backgroundColor],
            padding: spaces.spacingMd
        } as Mutable<ViewStyle>,
        title: {
            paddingHorizontal: spaces.spacingMd
        } as Mutable<TextStyle>
    };

    return styles;
};
export default stylesheet;
