import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, StatusBar, TouchableOpacity, ViewStyle, TextStyle} from 'react-native';
import {Size, getStatusBarHeight} from './_util';
import {Icon} from '.';
import {$Colors, $Theme} from './style';
export type NavBarProp = {
    style?: ViewStyle;
    TextStyle?: TextStyle;
    title?: string;
    onBack?: () => void;
    left?: JSX.Element | null;
    middle?: JSX.Element;
    right?: JSX.Element | null;
    scrollY?: number;
    breakPoint?: number;
    barStyle?: 'dark-content' | 'light-content';
    navigation?: any;
    onBreak?: (isBreak: boolean) => void;
    shadow?: boolean;
    float?: boolean;
};
const statusBarHeight = getStatusBarHeight();
const navBarHeight = 44;
export const NavBarHeight = statusBarHeight + navBarHeight;
const NavBar: React.FC<NavBarProp> = ({
    scrollY = 0,
    barStyle = 'dark-content',
    left,
    middle,
    right,
    title = '',
    style,
    TextStyle,
    onBreak,
    breakPoint,
    onBack,
    navigation,
    shadow = true,
    float = false,
}) => {
    const $textColor = TextStyle ? TextStyle.color || $Colors.normalText : $Colors.normalText;
    const [TextColor, setTextColor] = useState($textColor);
    const [invert, setInvert] = useState(false);
    useEffect(() => {
        if (breakPoint) {
            setInvert(scrollY > breakPoint);
        }
    }, [scrollY]);

    useEffect(() => {
        if (TextStyle && TextStyle.color) {
            setTextColor($textColor);
        } else {
            setTextColor(invert ? $Colors.normalText : $Colors.white);
        }
        onBreak && onBreak(invert);
    }, [invert]);

    const handleBack = () => {
        if (onBack) {
            onBack();
        } else {
            if (navigation) {
                if (navigation.canGoBack()) {
                    navigation.goBack();
                } else {
                    navigation.navigate('Root');
                }
            }
        }
    };

    return (
        <View style={[styles.wrapper, shadow ? $Theme.shadow : null, style, float ? styles.float : null]}>
            <StatusBar backgroundColor={'transparent'} animated={true} showHideTransition="fade" translucent={true} barStyle={barStyle} />
            <View style={styles.toolBar}>
                <View style={styles.left}>
                    {left === null || !navigation ? null : left ? (
                        <View style={styles.backBtn}>{left}</View>
                    ) : (
                        <TouchableOpacity onPress={handleBack} style={styles.backBtn}>
                            <Icon name="arrow_left" size={22} style={styles.text} />
                        </TouchableOpacity>
                    )}
                </View>
                <View style={styles.middle}>{middle ? middle : <Text style={styles.title}>{title}</Text>}</View>
                <View style={styles.right}>
                    <View style={styles.rightSlot}>{right}</View>
                </View>
            </View>
        </View>
    );
};
export default NavBar;

const styles = StyleSheet.create({
    wrapper: {
        width: Size.width,
        left: 0,
        top: 0,
        backgroundColor: $Colors.white,
        paddingTop: statusBarHeight,
        zIndex: 99,
    },
    float: {
        position: 'absolute',
    },
    toolBar: {
        width: Size.width,
        left: 0,
        ...$Theme.flexRow,
        height: navBarHeight,
    },
    left: {
        flex: 1,
        position: 'relative',
        height: navBarHeight,
    },
    backBtn: {
        flex: 1,
        height: navBarHeight,
        position: 'absolute',
        left: 10,
        top: 0,
        ...$Theme.flexRowLeft,
    },
    middle: {
        flex: 8,
        height: navBarHeight,
        ...$Theme.flexRow,
    },
    right: {
        flex: 1,
        position: 'relative',
        height: navBarHeight,
        ...$Theme.flexRowRight,
    },
    rightSlot: {
        position: 'absolute',
        right: 10,
        top: 0,
        height: navBarHeight,
        ...$Theme.flexRowRight,
    },
    title: {
        fontSize: 16,
        fontWeight: 'bold',
    },
    text: {
        color: $Colors.normalText,
    },
});