import {
    type TextStyle,
    type ViewStyle,
    StyleSheet,
    Platform
} from "react-native";
import type {
    TooltipTypeConstantType,
    TooltipDynamicStyleType,
    TooltipTypes,
    TooltipType
} from "./type";
import type {
    Mutable
} from "../../types";

export const TOOLTIP_TYPE_STYLES: Record<
    TooltipType,
    {
        containerColor: keyof NCoreUIKit.ContainerContentColors;
        subTitleColor: keyof NCoreUIKit.TextContentColors;
        actionColor: keyof NCoreUIKit.TextContentColors;
        titleColor: keyof NCoreUIKit.TextContentColors;
        iconColor: keyof NCoreUIKit.IconContentColors;
    }
> = {
    success: {
        subTitleColor: "successLow",
        containerColor: "success",
        actionColor: "success",
        titleColor: "success",
        iconColor: "success"
    },
    warning: {
        subTitleColor: "warningLow",
        containerColor: "warning",
        actionColor: "warning",
        titleColor: "warning",
        iconColor: "warning"
    },
    danger: {
        subTitleColor: "dangerLow",
        containerColor: "danger",
        actionColor: "danger",
        titleColor: "danger",
        iconColor: "danger"
    },
    primary: {
        subTitleColor: "onPrimary",
        containerColor: "primary",
        actionColor: "onPrimary",
        iconColor: "emphasized",
        titleColor: "onPrimary"
    },
    info: {
        subTitleColor: "infoLow",
        containerColor: "info",
        actionColor: "info",
        titleColor: "info",
        iconColor: "info"
    },
    neutral: {
        containerColor: "mid",
        subTitleColor: "low",
        actionColor: "mid",
        titleColor: "mid",
        iconColor: "mid"
    }
};

export const getTooltipType = ({
    type
}: TooltipTypeConstantType): TooltipTypes => {
    const currentType = TOOLTIP_TYPE_STYLES[type];

    return currentType;
};

const stylesheet = StyleSheet.create({
    contentContainer: {
        justifyContent: "center",
        alignItems: "flex-start",
        flexDirection: "column",
        flexShrink: 1
    },
    wrapper: {
        justifyContent: "center",
        alignSelf: "flex-start",
        position: "relative",
        alignItems: "center"
    },
    iconContainer: {
        justifyContent: "center",
        alignItems: "center"
    },
    caret: {
        transform: [
            {
                rotate: "45deg"
            }
        ],
        position: "absolute",
        height: 12,
        width: 12
    },
    containerObject: {
        flexDirection: "row",
        alignItems: "center"
    },
    container: {
        position: "absolute",
        zIndex: 99998
    },
    subTitle: {
        textAlign: "left"
    },
    title: {
        textAlign: "left"
    },
    hoverWrapper: {
        flex: 1
    }
});

export const useStyles = ({
    currentType,
    radiuses,
    colors,
    height,
    sizing,
    spaces,
    width
}: TooltipDynamicStyleType) => {
    const isFixed = sizing === "fixed";

    const styles = {
        container: {
            width: isFixed ? width : (Platform.OS === "web" ? "max-content" : undefined),
            backgroundColor: colors.content.container[currentType.containerColor],
            height: isFixed ? height : undefined,
            minWidth: isFixed ? undefined : 50,
            borderRadius: radiuses.md
        } as Mutable<ViewStyle>,
        caret: {
            backgroundColor: colors.content.container[currentType.containerColor]
        } as Mutable<ViewStyle>,
        containerObject: {
            paddingHorizontal: spaces.spacingMd,
            paddingVertical: spaces.spacingSm
        } as Mutable<ViewStyle>,
        action: {
            paddingBottom: spaces.spacingSm,
            paddingRight: spaces.spacingSm,
            paddingLeft: spaces.spacingMd,
            paddingTop: spaces.spacingSm,
            marginLeft: spaces.spacingMd
        } as Mutable<ViewStyle>,
        iconContainer: {
            paddingRight: spaces.spacingSm,
            marginRight: spaces.spacingSm
        } as Mutable<ViewStyle>,
        subTitle: {
            marginTop: spaces.spacingXs
        } as Mutable<TextStyle>,
        contentContainer: {
        } as Mutable<ViewStyle>,
        title: {
        } as Mutable<TextStyle>
    };

    return styles;
};
export default stylesheet;
