import React, { Component } from 'react'
import { StyleSheet, View, Text, Image, Animated } from 'react-native'
import { height, px2dp, width } from '../../utils/base';
import RefreshAnimateHeader from '../SmartRefresh/src/RefreshAnimateHeader';
export interface Props {
    renderHeader: (any?: any) => JSX.Element | Function
    renderCeilContainer: (any?: any) => JSX.Element | Function
    renderContainer: (any?: any) => JSX.Element
    onRefresh: (any?: any) => void | Function
    onMomentumScrollEnd: (any?: any) => void
    refreshing: boolean
    headerHeight?: number
}

export interface State {
    scrollY: Animated.Value
    headHeight: number

}

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

    }
    componentDidMount() {

    }

    componentWillUnmount() {
    }

    public readonly state: Readonly<State> = {
        scrollY: new Animated.Value(0),
        headHeight: 0
    }



    render() {
        let { children, renderHeader, renderContainer, renderCeilContainer, onRefresh, onMomentumScrollEnd, headerHeight, refreshing } = this.props;
        let { scrollY, headHeight } = this.state;
        let translateY = scrollY.interpolate({
            inputRange: [-1, 0, headHeight, headHeight + 1],
            outputRange: [0, 0, 0, 1],
        });
        return (
            <Animated.ScrollView style={{ flex: 1, width: width, backgroundColor: "#fff" }} onScroll={
                Animated.event(
                    [{
                        nativeEvent: { contentOffset: { y: this.state.scrollY } } // 记录滑动距离
                    }],
                    { useNativeDriver: true }) // 使用原生动画驱动
            }

                refreshControl={
                    <RefreshAnimateHeader
                        refreshing={refreshing}
                        onRefresh={onRefresh}
                        progressViewOffset={10}
                    // source={require('../../assets/9.jpg')}
                    />}
                // automaticallyAdjustContentInsets={false}
                //是否新显示滚动条
                showsVerticalScrollIndicator={false}
                scrollsToTop={true}

                onMomentumScrollEnd={onMomentumScrollEnd}
                automaticallyAdjustContentInsets={false}
                scrollEventThrottle={1}>

                <View style={{ height: headerHeight ? headerHeight : px2dp(60), width: width, justifyContent: "center", alignItems: "center" }} onLayout={(e) => {
                    let { height } = e.nativeEvent.layout;
                    this.setState({ headHeight: height }); // 给头部高度赋值
                }}>
                    {
                        renderHeader()
                    }
                </View>
                {/* <Animated.View style={{ transform: [{ translateY }], zIndex: 99999 }}> */}
                <Animated.View style={{ transform: [{ translateY }] }}>
                    {renderCeilContainer()}

                    {/* <Image source={{ uri: "https://images.pexels.com/photos/6974009/pexels-photo-6974009.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" }} style={styles.mainBackgroundStyle} resizeMode={"cover"} /> */}
                </Animated.View>
                {renderContainer()}

            </Animated.ScrollView>
        );

    }
}
const styles = StyleSheet.create({
    main: {

    },
    mainBackgroundStyle: {
        // flex: 1,
        width: width,
        height: height,
        // position: "absolute",
        top: 0,
        left: 0,
        // zIndex: -999
    },
})