import React, { Component } from 'react'
import { View, Text, StyleSheet, TouchableOpacity, Image, StyleProp, ViewStyle } from 'react-native';
import { px2dp, onePx, size, statusBarHeight, isIos, colors, myConfirm, useDebounce, toast } from './../../utils/base';
import { back, navigate } from './../../NavigationService';
interface Props {
    rightComponent?: any;
    title?: string;
    blod?: boolean;
    noBoder?: boolean;
    style?: StyleProp<ViewStyle> | undefined;
    mode?: 'dark' | 'light';
    useCancelText?: boolean;
};
export interface State {

}

export default class Header extends React.Component<Props, State> {
    constructor(props: Props | Readonly<Props>) {
        super(props);

    }
    componentDidMount() {

    }

    componentWillUnmount() {
    }

    public readonly state: Readonly<State> = {

    }

    goBack = () => {
        back();
    };

    jumpMessage = () => {
        navigate('MineMessage')
    };

    confirmBack = () => {
        let confirmData = {
            title: '确认取消编辑？系统将不会保留您的更改',
            confirmText: '确认',
            confirmFun: this.goBack()
        };
        myConfirm(confirmData)
    };






    render() {
        let { noBoder, useCancelText, mode, blod, title, rightComponent, style } = this.props;
        return (
            <View style={[styles.headerContainer, !noBoder ? { borderBottomWidth: onePx, borderBottomColor: '#eee', } : null, style]}>
                <View style={styles.sideContainer}>
                    {
                        useCancelText ?
                            <TouchableOpacity onPress={this.confirmBack} style={styles.backPress}>
                                <Text style={{ fontSize: 15, color: '#333', fontWeight: '500' }}>取消</Text>
                            </TouchableOpacity>
                            :
                            <TouchableOpacity onPress={this.goBack} style={styles.backPress}>
                                {
                                    isIos() ?
                                        <Image style={[styles.headerIcon, mode === 'light' ? { tintColor: '#a1a1a1' } : null]} source={require('./../../assets/back-icon-ios.png')} />
                                        :
                                        <Image style={[styles.headerIcon, mode === 'light' ? { tintColor: '#a1a1a1' } : null]} source={require('./../../assets/back-icon.png')} />
                                }
                            </TouchableOpacity>
                    }
                </View>
                <Text
                    numberOfLines={1}
                    style={[
                        styles.headerTitle,
                        blod ? { fontWeight: '700' } : { fontWeight: '400' },
                        mode === 'light' ? { color: '#fff' } : null
                    ]}
                >{title ? title : ""}</Text>
                <View style={[styles.sideContainer, { justifyContent: 'flex-end' }]}>
                    {rightComponent && rightComponent()}
                </View>
            </View>
        )

    }
}



const styles = StyleSheet.create({
    headerContainer: {
        width: '100%',
        height: size.head_height,
        paddingHorizontal: px2dp(12.5),
        // paddingTop: statusBarHeight,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#fff',
        // backgroundColor: "red",
        zIndex: 99,
        // position: "absolute"
    },

    sideContainer: {
        width: px2dp(100),
        flexDirection: 'row',
        height: size.head_height,
        alignItems: 'center',
        justifyContent: 'flex-start',
        // backgroundColor: 'red'
    },

    backPress: {
        height: size.head_height,
        // paddingHorizontal: px2dp(12),
        justifyContent: 'center',
        alignItems: 'center'
    },

    headerTitle: {
        fontSize: 17,
        color: '#000',
        fontWeight: '500',
        maxWidth: px2dp(150),
        textAlign: 'center'
    },

    headerIcon: {
        width: px2dp(20),
        height: px2dp(20),
        tintColor: '#000'
    },

    messageBox: {
        paddingHorizontal: px2dp(12),
        position: 'relative',
        marginTop: px2dp(-3)
    },

    messageIcon: {
        width: px2dp(24),
        height: px2dp(24),
    },

    messageNumBox: {
        position: 'absolute',
        top: px2dp(-2),
        right: px2dp(10),
        width: px2dp(18),
        height: px2dp(14),
        backgroundColor: colors.red,
        zIndex: 999,
        borderRadius: px2dp(8),
        justifyContent: 'center',
        alignItems: 'center'
    },

    messageNum: {
        fontSize: 8,
        color: '#fff',
        opacity: 0.9
    },
})