import * as React from "react";
import {StyleProp, TextStyle, View, ViewStyle} from "react-native";
import {HeaderIconParams, IProps} from "./header";
import app, {ThemeCss} from "../../app";
import Basic from "../../basicPage";
import {useNav} from "../../nav";


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

    //  宽度
    const width = props.width ?? css.width;
    //  一份
    const partWidth = width / 8;
    //  获取底线
    const hasBottomLine = typeof props.hasBottomLine === 'boolean' ? props.hasBottomLine : true;
    //  获取是否透明
    const isTransparent = typeof props.isTransparent === 'boolean' ? props.isTransparent : false;
    //  是否浮动
    const isFloat = typeof props.isFloat === 'boolean' ? props.isFloat : false;
    //  是否中间区域撑到最大
    const isCenterMax = typeof props.isCenterMax === 'boolean' ? props.isCenterMax : false;

    //  默认样式
    const defaultStyle: StyleProp<ViewStyle> = {
        marginTop: props.t ?? props.mt ?? 0,
        width: props.width ?? css.width,
        height: css.header.height,
        backgroundColor: isTransparent ? 'rgba(0,0,0,0)' : props.bgColor ?? css.header.bg,
    }
    //  是否浮动
    if (isFloat) {
        defaultStyle.position = 'absolute';
        defaultStyle.top = css.app.barHeight;
        defaultStyle.left = defaultStyle.right = props.width ? (css.width - props.width) / 2 : 0;
        defaultStyle.zIndex = 1;
    }
    //  是否存在底线
    if (hasBottomLine) {
        defaultStyle.borderBottomWidth = typeof props.bottomLineSize === "number" ? props.bottomLineSize : 0.5;
        defaultStyle.borderBottomColor = props.bottomLineColor ?? css.header.line;
    }
    //  标题样式
    const titleStyle: StyleProp<TextStyle> = {
        color: props.titleColor ?? css.header.color ?? '#666',
        fontSize: props.titleSize ?? css.header.size ?? 16,
        lineHeight: css.header.height,
        fontWeight: 'bold',
    }
    //  left 图标
    const leftIcon: HeaderIconParams = {
        onPress: () => nav.back(),
    }
    if (props.leftIcon) leftIcon.icon = props.leftIcon;
    if (props.leftIconColor) leftIcon.color = props.leftIconColor;
    if (props.leftIconSize) leftIcon.size = props.leftIconSize;
    //
    let leftView: React.ReactNode = headerIcon(leftIcon),
        rightView: React.ReactNode = <View/>,
        centerView: React.ReactNode = <Basic.Text text={props.title ? props.title.toString() : ''}
                                                  style={[{flex: 1}, titleStyle, props.titleStyle]}
                                                  textAlign={'center'}/>;
    if (props.leftView && typeof props.leftView === 'object') leftView = props.leftView;
    if (props.rightView && typeof props.rightView === 'object') rightView = props.rightView;
    if (props.centerView && typeof props.centerView === 'object') centerView = props.centerView;
    const leftWidth = partWidth;
    const rightWidth = partWidth * 2;
    //  左右 样式
    const leftRightStyle: StyleProp<ViewStyle> = {height: css.header.height};
    //  中间 样式
    const centerStyle: StyleProp<ViewStyle> = {
        height: css.header.height,
        flex: 1,
        paddingHorizontal: leftWidth,
    };
    return <View style={[css.rowBetweenCenter, defaultStyle, props.style, {position: 'relative'}]}>
        {/*    left    */}
        <View style={[css.rowStartCenter, leftRightStyle, {
            width: leftWidth,
            position: 'absolute',
            top: 0,
            left: 0,
            zIndex: 1,
        }]}>{leftView}</View>
        {/*    center    */}
        <View style={[css.rowStartCenter, centerStyle]}>{centerView}</View>
        {/*    right    */}
        <View style={[css.rowEndCenter, leftRightStyle, {
            width: rightWidth,
            position: 'absolute',
            top: 0,
            right: 0,
            zIndex: 1,
        }]}>{rightView}</View>
    </View>
}

/**
 * header icon view
 * @param params
 */
const headerIcon = (params?: HeaderIconParams): React.ReactNode => {
    const css = app.theme.useGet<ThemeCss>();
    params = params || {};
    const iconName: string = params.icon ?? app.iconfont.getBack();
    const size = params.size ? params.size : 18;
    const color = params.color ? params.color : css.app.leftIconColor;
    return <Basic.View height={css.header.height} style={[css.colCenter, css.colAroundCenter]} ph={15}
                       onPress={(event) => {
                           if (typeof params.onPress === "function") params.onPress(event);
                       }}>
        <Basic.Icon name={iconName} size={size} color={color}/>
    </Basic.View>
}


export default CompositeHeader
export {
    headerIcon,
}