import {
    type FC
} from "react";
import {
    TouchableOpacity,
    View
} from "react-native";
import type IRowCardProps from "./type";
import stylesheet, {
    useStyles
} from "./stylesheet";
import {
    NCoreUIKitTheme
} from "../../core/hooks";
import Text from "../text";

const RowCard: FC<IRowCardProps> = ({
    rightContentContainerStyle,
    rightIcon: CustomRightIcon,
    leftContentContainerStyle,
    isTransparentBackground,
    type = "first-based",
    rightContainerStyle,
    rightSubTitleStyle,
    leftContainerStyle,
    rightSubTitleColor,
    leftSubTitleStyle,
    icon: CustomIcon,
    rightTitleColor,
    rightTitleStyle,
    rightIconStyle,
    leftTitleStyle,
    subTitleColor,
    rightSubTitle,
    customTheme,
    titleColor,
    rightTitle,
    iconStyle,
    subTitle,
    onPress,
    style,
    title
}) => {
    const {
        radiuses,
        colors,
        spaces
    } = NCoreUIKitTheme.useContext(customTheme);

    const {
        rightIconContainer: rightIconContainerDynamicStyle,
        rightContainer: rightContainerDynamicStyle,
        leftContainer: leftContainerDynamicStyle,
        iconContainer: iconContainerDynamicStyle,
        rightSubTitle: rightSubTitleDynamicStyle,
        rightTitle: rightTitleDynamicStyle,
        container: containerDynamicStyle,
        subTitle: subTitleDynamicStyle,
        title: titleDynamicStyle
    } = useStyles({
        isTransparentBackground,
        radiuses,
        subTitle,
        spaces,
        colors,
        type
    });

    const renderRightIcon = () => {
        if(!CustomRightIcon) {
            return null;
        }

        return <View
            style={[
                rightIconStyle,
                stylesheet.rightIconContainer,
                rightIconContainerDynamicStyle
            ]}
        >
            <CustomRightIcon
                color="default"
                size={18}
            />
        </View>;
    };

    const renderLeftIcon = () => {
        if(!CustomIcon) {
            return null;
        }

        return <View
            style={[
                iconStyle,
                stylesheet.iconContainer,
                iconContainerDynamicStyle
            ]}
        >
            <CustomIcon
                color="default"
                size={18}
            />
        </View>;
    };

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

        return <Text
            color={subTitleColor ? subTitleColor : "low"}
            variant="labelLargeSize"
            style={[
                leftSubTitleStyle,
                stylesheet.subTitle,
                subTitleDynamicStyle
            ]}
        >
            {subTitle}
        </Text>;
    };

    const renderLeftContent = () => {
        return <View
            style={[
                leftContentContainerStyle
            ]}
        >
            <Text
                variant="labelLargeSize"
                color={titleColor}
                style={[
                    leftTitleStyle,
                    stylesheet.title,
                    titleDynamicStyle
                ]}
            >
                {title}
            </Text>
            {renderLeftSubTitle()}
        </View>;
    };

    const renderLeft = () => {
        return <View
            style={[
                leftContainerStyle,
                stylesheet.leftContainer,
                leftContainerDynamicStyle
            ]}
        >
            {renderLeftContent()}
        </View>;
    };

    const renderRightSubTitle = () => {
        if(!rightSubTitle) {
            return null;
        }

        return <Text
            color={rightSubTitleColor? rightSubTitleColor : "low"}
            variant="labelLargeSize"
            style={[
                rightSubTitleStyle,
                stylesheet.rightSubTitle,
                rightSubTitleDynamicStyle
            ]}
        >
            {rightSubTitle}
        </Text>;
    };

    const renderRightContent = () => {
        return <View
            style={[
                rightContentContainerStyle
            ]}
        >
            <Text
                variant="labelLargeSize"
                color={rightTitleColor}
                style={[
                    rightTitleStyle,
                    stylesheet.rightTitle,
                    rightTitleDynamicStyle
                ]}
            >
                {rightTitle}
            </Text>
            {renderRightSubTitle()}
        </View>;
    };

    const renderRight = () => {
        return <View
            style={[
                rightContainerStyle,
                stylesheet.rightContainer,
                rightContainerDynamicStyle
            ]}
        >
            {renderRightContent()}
        </View>;
    };

    return <TouchableOpacity
        style={[
            style,
            stylesheet.container,
            containerDynamicStyle
        ]}
        onPress={() => {
            if(onPress) {
                onPress();
            }
        }}
    >
        {renderLeftIcon()}
        {renderLeft()}
        {renderRight()}
        {renderRightIcon()}
    </TouchableOpacity>;
};
export default RowCard;