import {
    type ViewStyle,
    type TextStyle,
    StyleSheet,
    Platform
} from "react-native";
import type {
    ICodeViewerDynamicStyleProps
} from "./type";
import {
    webStyle
} from "../../utils";

const stylesheet = StyleSheet.create({
    content: {
        fontFamily: Platform.OS === "web" ? "monospace" : "System",
        ...webStyle({
            whiteSpace: Platform.OS === "web" ? "pre" : "pre-wrap"
        })
    },
    gutter: {
        justifyContent: "flex-end",
        alignItems: "flex-start",
        flexDirection: "row",
        borderRightWidth: 1,
        ...webStyle({
            userSelect: "none"
        })
    },
    foldIcon: {
        justifyContent: "center",
        alignItems: "center",
        marginTop: 5,
        height: 14,
        width: 14
    },
    container: {
        alignItems: "flex-start",
        flexDirection: "row",
        borderRadius: 10,
        borderWidth: 1
    },
    lineRow: {
        alignItems: "flex-start",
        flexDirection: "row",
        minHeight: 24
    },
    stickyActionContainer: {
        alignSelf: "flex-start",
        zIndex: 1
    },
    lineNumber: {
        textAlign: "right",
        marginRight: 4,
        lineHeight: 24,
        fontSize: 12,
        ...webStyle({
            userSelect: "none"
        })
    },
    foldIconPlaceholder: {
        marginTop: 5,
        height: 14,
        width: 14
    },
    scrollContent: {
        flexGrow: 1
    },
    scrollView: {
        flex: 1
    }
});

export const useStyles = ({
    isLineNumberVisible = true,
    isCollapsible = true,
    typography,
    colors,
    spaces
}: ICodeViewerDynamicStyleProps) => {
    const isGutterVisible = isLineNumberVisible || isCollapsible;

    let gutterPaddingRight = 10;
    let gutterMarginRight = 10;

    let gutterWidth = 50;

    if (isLineNumberVisible && !isCollapsible) {
        gutterPaddingRight = 6;
        gutterMarginRight = 8;

        gutterWidth = 32;
    } else if (!isLineNumberVisible && isCollapsible) {
        gutterWidth = 30;
    } else if (!isGutterVisible) {
        gutterPaddingRight = 0;
        gutterMarginRight = 0;

        gutterWidth = 0;
    }

    const languageMarginLeft = spaces.spacingSm;

    const styles = {
        lineRow: {
            marginLeft: !isGutterVisible ? spaces.spacingSm : 0
        } as ViewStyle,
        container: {
            backgroundColor: colors.content.container.subtle,
            borderColor: colors.content.border.subtle,
            marginVertical: spaces.spacingSm,
            padding: spaces.spacingMd
        } as ViewStyle,
        gutter: {
            paddingRight: gutterPaddingRight,
            marginRight: gutterMarginRight,
            width: gutterWidth
        } as ViewStyle,
        languageText: {
            color: colors.content.text.low,
            marginBottom: spaces.spacingSm,
            marginLeft: languageMarginLeft,
            ...webStyle({
                userSelect: "none"
            })
        } as TextStyle,
        text: {
            ...typography.bodyMediumSize,
            lineHeight: 24
        } as TextStyle
    };

    return styles;
};
export default stylesheet;
