import * as React from "react";
import {IProps} from "./tabBar";
import {View, Image} from "react-native";
import app from "../../app";
import Basic from "../../basicPage";
import {ThemeCss} from "../../app/theme";

const ComponentTabBarView: React.FC<IProps> = (props) => {
    const css = app.theme.useGet<ThemeCss>();

    return <Basic.View style={css.colStartCenter}
                       p={props.p} pv={props.pv} ph={props.ph}
                       m={props.m} mv={props.mv} mh={props.mh}
                       l={props.l} r={props.r} t={props.t} b={props.b}
                       pl={props.pl} pr={props.pr} pt={props.pt} pb={props.pb}
                       ml={props.ml} mr={props.mr} mt={props.mt} mb={props.mb}
                       onPress={() => {
                           if (typeof props.onPress === "function") props.onPress();
                       }}>
        <View style={[css.colAroundCenter, {
            width: props.logoSize ?? 50,
            height: props.logoSize ?? 50,
            borderWidth: props.logoBorderWidth ?? 0.5,
            borderColor: props.logoBorderColor ?? 'rgba(0,0,0,0)',
            borderRadius: props.logoBorderRadius ?? 25,
            backgroundColor: props.logoBg ?? 'rgba(0,0,0,0)',
        }]}>
            {
                props.image ?
                    <Image source={props.image} style={{
                        width: props.imageSize ?? 30,
                        height: props.imageSize ?? 30,
                    }}/> :
                    undefined
            }
            {
                props.icon ?
                    <Basic.Icon name={props.icon} size={props.iconSize} color={props.iconColor}/> :
                    undefined
            }
        </View>
        <Basic.Text text={props.name ?? ''} size={props.nameSize} color={props.nameColor}
                    lineHeight={props.nameLineHeight ?? 24}/>
    </Basic.View>
}

export default ComponentTabBarView