import {
    type TextStyle,
    type ViewStyle,
    StyleSheet
} from "react-native";
import {
    type HighlightButtonTypeConstantType,
    type HighlightButtonSizeConstantType,
    type HighlightButtonDynamicStyleType,
    type HighlightButtonMeasuresKeys,
    type HighlightButtonMeasures,
    type HighlightButtonTypes,
    type HighlightButtonSize,
    type HighlightButtonType
} from "./type";
import type {
    Mutable
} from "../../types";
import {
    webStyle
} from "../../utils";

export const BUTTON_SIZES: Record<HighlightButtonSize, HighlightButtonMeasuresKeys> = {
    large: {
        paddingHorizontal: "spacingXl",
        paddingVertical: "spacingMd",
        fontSize: "labelLargeSize"
    },
    medium: {
        paddingHorizontal: "spacingLg",
        paddingVertical: "spacingSm",
        fontSize: "labelMediumSize"
    },
    small: {
        paddingHorizontal: "spacingMd",
        paddingVertical: "spacingXs",
        fontSize: "labelSmallSize"
    }
};

export const BUTTON_TYPE_STYLES: Record<
    HighlightButtonType,
    {
        borderColor: keyof NCoreUIKit.BorderContentColors;
        titleColor: keyof NCoreUIKit.TextContentColors;
        iconColor: keyof NCoreUIKit.IconContentColors;
        containerColor: keyof NCoreUIKit.LowColors;
    }
> = {
    glass: {
        titleColor: "constrastHigh",
        iconColor: "constrastHigh",
        containerColor: "neutral",
        borderColor: "subtle"
    },
    neutral: {
        containerColor: "neutral",
        borderColor: "subtle",
        titleColor: "mid",
        iconColor: "mid"
    },
    primary: {
        containerColor: "primary",
        borderColor: "onPrimary",
        titleColor: "onPrimary",
        iconColor: "onPrimary"
    },
    success: {
        containerColor: "success",
        borderColor: "success",
        titleColor: "success",
        iconColor: "success"
    },
    warning: {
        containerColor: "warning",
        borderColor: "warning",
        titleColor: "warning",
        iconColor: "warning"
    },
    danger: {
        containerColor: "error",
        borderColor: "danger",
        titleColor: "danger",
        iconColor: "danger"
    },
    info: {
        containerColor: "info",
        borderColor: "info",
        titleColor: "info",
        iconColor: "info"
    }
};

export const getHighlightButtonType = ({
    type
}: HighlightButtonTypeConstantType): HighlightButtonTypes => {
    const currentType = BUTTON_TYPE_STYLES[type];

    return currentType;
};

export const getHighlightButtonSize = ({
    spaces,
    size
}: HighlightButtonSizeConstantType): HighlightButtonMeasures => {
    const currentSize = BUTTON_SIZES[size];

    return {
        paddingHorizontal: spaces[currentSize.paddingHorizontal],
        paddingVertical: spaces[currentSize.paddingVertical],
        fontSize: currentSize.fontSize
    };
};

const stylesheet = StyleSheet.create({
    container: {
        backgroundColor: "transparent",
        borderColor: "transparent",
        flexDirection: "row",
        borderStyle: "solid",
        alignItems: "center",
        position: "relative",
        display: "flex"
    },
    overlay: {
        position: "absolute",
        display: "none",
        bottom: 0,
        right: 0,
        left: 0,
        top: 0
    },
    title: {
        textAlign: "center",
        margin: 0
    },
    loading: {}
});

export const useStyles = ({
    verticalLocationForStretchFix,
    displayBehaviourWhileLoading,
    isFixVerticalStretch,
    customBorderColor,
    isCustomPadding,
    spreadBehaviour,
    iconDirection,
    currentSize,
    currentType,
    customColor,
    glassEffect,
    isDisabled,
    isLoading,
    radiuses,
    borders,
    colors,
    spaces,
    title,
    icon,
    type
}: HighlightButtonDynamicStyleType) => {
    const styleType = type === "danger" ? "error" : type === "glass" ? "neutral" : type;

    const styles = {
        container: {
            alignSelf: isFixVerticalStretch ? verticalLocationForStretchFix === "center" ? verticalLocationForStretchFix : `flex-${verticalLocationForStretchFix}` : "auto",
            backgroundColor: colors.system.low[currentType.containerColor],
            borderColor: colors.content.border[currentType.borderColor],
            paddingRight: currentSize.paddingHorizontal,
            paddingBottom: currentSize.paddingVertical,
            paddingLeft: currentSize.paddingHorizontal,
            paddingTop: currentSize.paddingVertical,
            borderRadius: radiuses.actions,
            borderWidth: borders.line / 4,
            ...webStyle({
                boxShadow: `inset 0 0px 0.5px ${currentType.borderColor}, inset 0 -2px 6px ${currentType.borderColor}, 0 10px 30px ${currentType.borderColor}`,
                WebkitBackdropFilter: `blur(${glassEffect}px) saturate(180%) brightness(1.1)`,
                backdropFilter: `blur(${glassEffect}px) saturate(180%) brightness(1.1)`
            })
        } as Mutable<ViewStyle>,
        overlay: {
            borderRadius: radiuses.actions - 2
        } as Mutable<ViewStyle>,
        title: {
        } as Mutable<TextStyle>,
        loading: {
        } as Mutable<ViewStyle>
    };

    if (isLoading) {
        styles.title.marginLeft = spaces.spacingSm;

        styles.overlay.display = "flex";

        if (displayBehaviourWhileLoading === "disabled") {
            styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
        }
    }

    if (isLoading && spreadBehaviour === "stretch") {
        styles.title.marginLeft = spaces.spacingSm;
        styles.title.margin = undefined;
    }

    if (icon && !isLoading) {
        styles.title.marginLeft = spaces.spacingSm;
        styles.title.margin = undefined;
    }

    if (spreadBehaviour === "baseline") {
        styles.container.alignSelf = spreadBehaviour;
        styles.container.width = "auto";
    } else if (spreadBehaviour === "stretch") {
        styles.container.alignSelf = spreadBehaviour;
        styles.container.justifyContent = "center";
        styles.container.flexShrink = 1;
        styles.container.width = "100%";
    }

    if (isDisabled) {
        styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
    }

    if (icon && title) {
        if (iconDirection === "left") {
            styles.title.margin = undefined;
            styles.title.marginLeft = spaces.spacingSm;
        } else {
            styles.title.margin = undefined;
            styles.title.marginRight = spaces.spacingSm;
        }
    }

    if(icon && !title) {
        styles.container.paddingBottom = currentSize.paddingVertical;
        styles.container.paddingRight = currentSize.paddingVertical;
        styles.container.paddingLeft = currentSize.paddingVertical;
        styles.container.paddingTop = currentSize.paddingVertical;
    }

    if(isCustomPadding) {
        delete styles.container.paddingBottom;
        delete styles.container.paddingRight;
        delete styles.container.paddingLeft;
        delete styles.container.paddingTop;
    }

    if(customColor) {
        const _customContainerColor = customColor as keyof NCoreUIKit.ContainerContentColors;
        const _customColor = customColor as keyof NCoreUIKit.ProjectColorPalette;

        styles.container.backgroundColor = colors.project[_customColor] ? colors.project[_customColor] : colors.content.container[_customContainerColor] ? colors.content.container[_customContainerColor] : customColor;
    }

    if(customBorderColor) {
        const _customContentBorderColor = customBorderColor as keyof NCoreUIKit.BorderContentColors;
        const _customBorderColor = customBorderColor as keyof NCoreUIKit.ProjectColorPalette;

        styles.container.borderColor = colors.project[_customBorderColor] ? colors.project[_customBorderColor] : colors.content.border[_customContentBorderColor] ? colors.content.border[_customContentBorderColor] : customBorderColor;
    }

    return styles;
};
export default stylesheet;
