import {
    type ImageStyle,
    type ViewStyle,
    StyleSheet
} from "react-native";
import type {
    AvatarSizeConstantType,
    AvatarDynamicStyleType,
    AvatarMeasuresKeys,
    AvatarSizeType,
    AvatarMeasures
} from "./type";
import type {
    Mutable
} from "../../types";
import {
    STATUS_CHEAT_SHEET
} from "../../utils";

export const AVATAR_SIZES: Record<AvatarSizeType, AvatarMeasuresKeys> = {
    xLarge: {
        fontSize: "headlineMediumSize",
        statusIndicatorSize: 20,
        iconSize: 40,
        size: 80
    },
    large: {
        fontSize: "headlineSmallSize",
        statusIndicatorSize: 16,
        iconSize: 32,
        size: 64
    },
    xxxLarge: {
        fontSize: "displayMediumSize",
        statusIndicatorSize: 32,
        iconSize: 76,
        size: 150
    },
    xxLarge: {
        fontSize: "displaySmallSize",
        statusIndicatorSize: 28,
        iconSize: 60,
        size: 120
    },
    xSmall: {
        fontSize: "labelMediumSize",
        statusIndicatorSize: 10,
        iconSize: 18,
        size: 32
    },
    small: {
        fontSize: "labelLargeSize",
        statusIndicatorSize: 12,
        iconSize: 22,
        size: 40
    },
    xxSmall: {
        fontSize: "labelSmallSize",
        statusIndicatorSize: 8,
        iconSize: 14,
        size: 24
    },
    medium: {
        fontSize: "bodyLargeSize",
        statusIndicatorSize: 14,
        iconSize: 26,
        size: 48
    }
};

export const getAvatarSize = ({
    size
}: AvatarSizeConstantType): AvatarMeasures => {
    const currentSize = AVATAR_SIZES[size];

    return {
        statusIndicatorSize: currentSize.statusIndicatorSize,
        fontSize: currentSize.fontSize,
        iconSize: currentSize.iconSize,
        size: currentSize.size
    };
};

const stylesheet = StyleSheet.create({
    container: {
        position: "relative",
        overflow: "visible",
        display: "flex"
    },
    statusIndicator: {
        position: "absolute",
        bottom: 0,
        right: 0
    },
    image: {
        objectFit: "cover"
    },
    icon: {
    }
});

export const useStyles = ({
    isShowStatusIndicatorSplicer,
    avatarBackgroundColor,
    statusIndicatorType,
    backgroundColor,
    isShowBorder,
    borderColor,
    currentSize,
    isDisabled,
    isLoading,
    imageUrl,
    borders,
    colors,
    image,
    title
}: AvatarDynamicStyleType) => {
    const styles = {
        container: {
            borderColor: borderColor && borderColor !== "transparent" ? colors.content.border[borderColor] : avatarBackgroundColor ? colors.content.container[avatarBackgroundColor] : "transparent",
            backgroundColor: backgroundColor ? backgroundColor === "transparent" ? "transparent" : colors.content.container[backgroundColor] : colors.content.container.subtle,
            borderRadius: currentSize.size / 2,
            height: currentSize.size,
            width: currentSize.size
        } as Mutable<ViewStyle>,
        image: {
            borderColor: borderColor && borderColor !== "transparent" ? colors.content.border[borderColor] : avatarBackgroundColor ? colors.content.container[avatarBackgroundColor] : "transparent",
            borderRadius: currentSize.size / 2,
            height: currentSize.size,
            width: currentSize.size
        } as Mutable<ImageStyle>,
        statusIndicator: {
            backgroundColor: colors.content.icon[STATUS_CHEAT_SHEET[statusIndicatorType].icon],
            borderColor: colors.content.container[avatarBackgroundColor],
            borderRadius: currentSize.statusIndicatorSize / 2,
            height: currentSize.statusIndicatorSize,
            width: currentSize.statusIndicatorSize
        } as Mutable<ViewStyle>,
        icon: {
        } as Mutable<ViewStyle>
    };

    if(isShowBorder) {
        styles.container.borderWidth = borders.subtract;
        styles.image.borderWidth = borders.subtract;
    }

    if(!title && !image && !imageUrl && !backgroundColor) {
        styles.container.backgroundColor = colors.content.container.subtle;

        styles.container.justifyContent = "center";
        styles.container.alignItems = "center";
    }

    if(title) {
        styles.container.backgroundColor = colors.content.container.primary;

        styles.container.justifyContent = "center";
        styles.container.alignItems = "center";
    }

    if(isShowStatusIndicatorSplicer) {
        const multiplier = currentSize.statusIndicatorSize / 14;

        styles.statusIndicator.borderWidth = borders.subtract * multiplier;
    }

    if(isDisabled) {
        styles.container.opacity = 0.33;
    }

    if(isLoading) {
        styles.container.opacity = 0.33;
    }

    return styles;
};
export default stylesheet;
