import * as React from "react";
import {StyleSheet} from "react-native";
import Basic from "../../basicPage";
import app, {ThemeCss} from "../../app";
import {IProps} from "./noData";


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

    const direction = props.direction ?? 'centerTop';

    let defaultStyle = css.colCenter;
    if (direction === 'left') defaultStyle = css.rowStartCenter
    else if (direction === 'right') defaultStyle = css.rowEndCenter
    else if (direction === 'top') defaultStyle = css.colStartCenter
    else if (direction === 'bottom') defaultStyle = css.colEndCenter

    //  图片
    let imageView = undefined
    if (typeof props.image === 'object') imageView = props.image;
    else if (typeof props.image === 'number') imageView =
        <Basic.Image source={props.image} style={props.imageStyle ?? styles.imageStyle}/>
    //  图标
    let iconView = undefined
    if (typeof props.icon === 'object') iconView = props.icon;
    else if (typeof props.icon === 'string') iconView =
        <Basic.Icon name={props.icon} style={props.iconStyle} size={props.iconSize ?? 30}
                    color={props.iconColor ?? css.font.color}/>
    //  内容
    let contentView = undefined
    if (typeof props.content === 'object') contentView = props.content;
    else if (typeof props.content === 'string') contentView =
        <Basic.Text text={props.content} style={props.contentStyle} size={props.contentSize ?? 13}
                    color={props.contentColor ?? css.font.color}
                    t={typeof props.contentEdgeTop === 'number' ? props.contentEdgeTop : 15}/>

    return <Basic.View style={[defaultStyle, props.style, {flex: 1}]}>
        <Basic.View style={css.colStartCenter} m={props.m} p={props.p} l={props.l} r={props.r} t={props.t} b={props.b}
                    mt={props.mt} mb={props.mb} ml={props.ml} mr={props.mr} mh={props.mh} mv={props.mv}
                    pt={props.mt} pb={props.mb} pl={props.ml} pr={props.mr} ph={props.mh} pv={props.mv}>
            {imageView}
            {iconView}
            {contentView}
        </Basic.View>
        {
            direction === 'centerTop' ? <Basic.View/> : undefined
        }
    </Basic.View>
}

const styleSheet = (css: ThemeCss) => StyleSheet.create({
    imageStyle: {
        width: 100, height: 100,
    }
});

export default CompositeNoData