import * as React from "react";
import {ImageBackground, StyleProp, TouchableHighlight, View} from "react-native";
import {IProps} from "./render";
import _hooks from "./_hooks";
import {ViewStyle} from "react-native/Libraries/StyleSheet/StyleSheetTypes";
import ComponentHeaderView from "../header";
import app, {ThemeCss} from "../../app";
import Basic from "../../basicPage";


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

    //  是否展示 状态栏
    const hasBar = typeof props.hasBar === "boolean" ? props.hasBar : true;
    //  状态栏是否浮动
    const hasBarFloat = typeof props.hasBarFloat === "boolean" ? props.hasBarFloat : false;
    //  是否展示 header
    const hasHeader = typeof props.hasHeader === "boolean" ? props.hasHeader : true;
    //  header 是否浮动
    const isHeaderFloat = typeof props.isHeaderFloat === "boolean" ? props.isHeaderFloat : false;
    //  header 是否有底边
    const hasHeaderBottomLine = typeof props.hasHeaderBottomLine === "boolean" ? props.hasHeaderBottomLine : false;


    //  状态条样式
    const statusBarStyle: StyleProp<ViewStyle> = {
        width: css.width, height: css.app.barHeight,
        backgroundColor: props.barBg ?? css.app.barBg,
    }
    //  状态条浮动
    if (hasBarFloat) {
        statusBarStyle.position = 'absolute';
        statusBarStyle.top = 0;
        statusBarStyle.left = 0;
        statusBarStyle.right = 0;
        statusBarStyle.zIndex = 1;
    }

    //  状态栏 view
    const barView = hasBar ? <View style={[statusBarStyle]}/> : undefined;
    //  header view
    const headerView = hasHeader ?
        <ComponentHeaderView
            title={props.headerTitle}
            titleColor={props.headerTitleColor}
            titleSize={props.headerTitleSize}
            style={props.headerStyle}
            hasBottomLine={hasHeaderBottomLine}
            centerView={props.headerCenter}
            leftView={props.headerLeft}
            leftIconColor={props.headerLeftIconColor}
            rightView={props.headerRight}
            isFloat={isHeaderFloat}
        /> : undefined;
    //  内容样式
    const childrenStyle: StyleProp<ViewStyle> = {flex: 1, position: 'relative'};
    let childrenView: any;
    if (props.bgImage) {
        childrenView = <ImageBackground source={props.bgImage} style={childrenStyle}>
            {barView}
            {headerView}
            <View style={[{flex: 1, flexGrow: 1}, props.innerStyle]}>{props.children}</View>
        </ImageBackground>
    } else {
        childrenStyle.backgroundColor = props.bgColor ?? css.app.bg;
        childrenView = <View style={[childrenStyle, props.style]}>
            {barView}
            {headerView}
            <View style={[{flex: 1, flexGrow: 1}, props.innerStyle]}>{props.children}</View>
        </View>
    }
    //  不可点击
    if (props.hasPress) return childrenView;
    return <TouchableHighlight style={{flex: 1}} activeOpacity={1} onPress={() => {
        Basic.inputBlur()
    }}>
        {childrenView}
    </TouchableHighlight>
}

export default ComponentRenderView