import {
    type ImageStyle,
    type ViewStyle,
    StyleSheet
} from "react-native";
import type {
    SiteLogoSizeConstantType,
    SiteLogoDynamicStyleType,
    SiteLogoMeasuresKeys,
    SiteLogoSizeType,
    SiteLogoMeasures
} from "./type";
import type {
    Mutable
} from "../../types";

export const SITE_LOGO_SIZES: Record<SiteLogoSizeType, SiteLogoMeasuresKeys> = {
    xxSmall: {
        subTitleSize: "labelSmallSize",
        titleSize: "labelSmallSize",
        iconSize: 18,
        size: 32
    },
    xSmall: {
        subTitleSize: "labelSmallSize",
        titleSize: "labelMediumSize",
        iconSize: 22,
        size: 40
    },
    small: {
        subTitleSize: "labelMediumSize",
        titleSize: "labelLargeSize",
        iconSize: 26,
        size: 48
    },
    medium: {
        subTitleSize: "labelLargeSize",
        titleSize: "bodyLargeSize",
        iconSize: 32,
        size: 64
    },
    large: {
        titleSize: "headlineSmallSize",
        subTitleSize: "bodyLargeSize",
        iconSize: 40,
        size: 80
    },
    xLarge: {
        subTitleSize: "headlineSmallSize",
        titleSize: "headlineMediumSize",
        iconSize: 60,
        size: 120
    },
    xxLarge: {
        subTitleSize: "headlineMediumSize",
        titleSize: "displaySmallSize",
        iconSize: 76,
        size: 150
    },
    xxxLarge: {
        subTitleSize: "displaySmallSize",
        titleSize: "displayMediumSize",
        iconSize: 96,
        size: 180
    }
};

export const getSiteLogoSize = ({
    size
}: SiteLogoSizeConstantType): SiteLogoMeasures => {
    const currentSize = SITE_LOGO_SIZES[size];

    return {
        subTitleSize: currentSize.subTitleSize,
        titleSize: currentSize.titleSize,
        iconSize: currentSize.iconSize,
        size: currentSize.size
    };
};

const stylesheet = StyleSheet.create({
    container: {
        justifyContent: "center",
        flexDirection: "row",
        alignItems: "center",
        position: "relative",
        overflow: "visible",
        display: "flex"
    },
    image: {
        objectFit: "cover"
    },
    icon: {
    },
    contentContainer: {
        justifyContent: "center",
        flexDirection: "row",
        alignItems: "center",
        position: "relative",
        overflow: "visible",
        display: "flex"
    },
    titlesContainer: {
        justifyContent: "center",
        flexDirection: "column",
        display: "flex",
        minWidth: 0,
        flex: 1
    }
});

export const useStyles = ({
    logoBackgroundColor,
    isCustomImageSize,
    isWorkWithFlex1,
    backgroundColor,
    isShowBorder,
    borderColor,
    currentSize,
    isDisabled,
    imageSpace,
    isLoading,
    imageUrl,
    borders,
    colors,
    spaces,
    image
}: SiteLogoDynamicStyleType) => {
    const styles = {
        container: {
        } as Mutable<ViewStyle>,
        image: {
        } as Mutable<ImageStyle>,
        icon: {
        } as Mutable<ViewStyle>,
        titlesContainer: {
            marginLeft: spaces.spacingSm * 1.5
        } as Mutable<ViewStyle>,
        contentContainer: {
        } as Mutable<ViewStyle>
    };

    if(isCustomImageSize) {
        styles.image.width = currentSize.size * 3 - (imageSpace ? spaces[imageSpace] : 0);
        styles.image.height = currentSize.size - (imageSpace ? spaces[imageSpace] : 0);

        styles.contentContainer.borderRadius = currentSize.size / 2;
        styles.contentContainer.width = currentSize.size * 3;
        styles.contentContainer.height = currentSize.size;
    } else {
        styles.image.borderColor = borderColor && borderColor !== "transparent" ? colors.content.border[borderColor] : logoBackgroundColor ? colors.content.container[logoBackgroundColor] : "transparent";

        styles.image.height = currentSize.size - (imageSpace ? spaces[imageSpace] : 0);
        styles.image.width = currentSize.size - (imageSpace ? spaces[imageSpace] : 0);
        styles.image.borderRadius = currentSize.size / 2;

        styles.contentContainer.borderColor = borderColor && borderColor !== "transparent" ? colors.content.border[borderColor] : logoBackgroundColor ? colors.content.container[logoBackgroundColor] : "transparent";
        styles.contentContainer.backgroundColor = backgroundColor ? backgroundColor === "transparent" ? "transparent" : colors.content.container[backgroundColor] : colors.content.container.subtle;

        styles.contentContainer.borderRadius = currentSize.size / 2;
        styles.contentContainer.height = currentSize.size;
        styles.contentContainer.width = currentSize.size;
    }

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

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

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

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

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

    if(isWorkWithFlex1) {
        styles.container.flex = 1;
    }

    return styles;
};
export default stylesheet;
