import {
    type FC
} from "react";
import {
    View
} from "react-native";
import type IStateCardProps from "./type";
import stylesheet, {
    getStateCardType,
    useStyles
} from "./stylesheet";
import {
    NCoreUIKitTheme
} from "../../core/hooks";
import type {
    INCoreUIKitIconProps
} from "../../types";
import type ITextProps from "../text/type";
import Text from "../text";
import Button from "../button";

const StateCard: FC<IStateCardProps> = ({
    type = "neutral",
    icon: IconProp,
    subTitleStyle,
    customTheme,
    titleStyle,
    subTitle,
    iconSize,
    action,
    title,
    style,
    ...props
}) => {
    const {
        spaces
    } = NCoreUIKitTheme.useContext(customTheme);

    const currentType = getStateCardType({
        type
    });

    const {
        titleContainer: titleContainerDynamicStyle,
        actionButton: actionButtonDynamicStyle,
        container: containerDynamicStyle,
        subTitle: subTitleDynamicStyle,
        title: titleDynamicStyle,
        icon: iconDynamicStyle
    } = useStyles({
        spaces
    });

    const iconProps: INCoreUIKitIconProps = {
        color: currentType.iconColor
    };

    const titleProps: ITextProps = {
        color: currentType.titleColor
    };

    const subTitleProps: ITextProps = {
        color: currentType.subTitleColor
    };

    const renderIcon = () => {
        if(!IconProp) {
            return null;
        }

        return <IconProp
            color={iconProps.color as keyof NCoreUIKit.IconContentColors}
            size={iconSize ? iconSize : 75}
            style={iconDynamicStyle}
        />;
    };

    const renderTitle = () => {
        if (!title) {
            return null;
        }

        return <View
            style={[
                stylesheet.titleContainer,
                titleContainerDynamicStyle
            ]}
        >
            <Text
                variant="headlineSmallSize"
                style={[
                    titleStyle,
                    stylesheet.title,
                    titleDynamicStyle
                ]}
                {...titleProps}
            >
                {title}
            </Text>
        </View>;
    };

    const renderSubtitle = () => {
        if(!subTitle) {
            return null;
        }

        return <Text
            {...subTitleProps}
            variant="bodyMediumSize"
            style={[
                subTitleStyle,
                stylesheet.subTitle,
                subTitleDynamicStyle
            ]}
        >
            {subTitle}
        </Text>;
    };

    const renderAction = () => {
        if(!action) {
            return null;
        }

        return <Button
            size="small"
            {...action}
            spreadBehaviour="free"
            type={type}
            style={[
                action.style,
                actionButtonDynamicStyle
            ]}
        />;
    };

    return <View
        {...props}
        style={[
            style,
            stylesheet.container,
            containerDynamicStyle
        ]}
    >
        {renderIcon()}
        {renderTitle()}
        {renderSubtitle()}
        {renderAction()}
    </View>;
};
export default StateCard;
