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

const stylesheet = StyleSheet.create({
    systemToolbarAction: {
        justifyContent: "flex-start",
        flexDirection: "row",
        alignItems: "center"
    },
    systemToolbarContent: {
        minWidth: 100,
        gap: 2
    }
});

export const useStyles = ({
    borders,
    colors,
    spaces
}: SystemToolbarDynamicStyleType) => {
    const styles = {
        tooltipContainer: {
            backgroundColor: colors.content.container.default,
            borderColor: colors.content.border.default,
            borderWidth: borders.line
        } as Mutable<ViewStyle>,
        childCaret: {
            backgroundColor: colors.content.container.default,
            borderColor: colors.content.border.default,
            borderBottomWidth: borders.line,
            borderLeftWidth: borders.line
        } as Mutable<ViewStyle>,
        rootCaret: {
            backgroundColor: colors.content.container.default,
            borderColor: colors.content.border.default,
            borderLeftWidth: borders.line,
            borderTopWidth: borders.line
        } as Mutable<ViewStyle>,
        actionItem: {
            paddingHorizontal: spaces.spacingSm,
            paddingVertical: spaces.spacingSm
        } as Mutable<ViewStyle>,
        triggerBtn: {
            paddingHorizontal: spaces.spacingMd,
            paddingVertical: spaces.spacingSm
        } as Mutable<ViewStyle>
    };

    return styles;
};
export default stylesheet;
