import React, { Component } from 'react'
import { StyleSheet, View, Text, Image, PanResponder, DeviceEventEmitter } from 'react-native'
import { FlatList, ScrollView } from 'react-native-gesture-handler';
import { useDispatch } from 'react-redux';
import RefreshAnimateHeader from '../../compoent/SmartRefresh/src/RefreshAnimateHeader';
import { setInitData } from '../../redux/actions';
import { store } from '../../redux/store/store';
import { height, px2dp, width } from '../../utils/base';
import RenderItem from './RenderItem';
// import { RefreshNormalHeader } from 'react-native-smart-refresh';
import Swiper from 'react-native-swiper'

export interface Props {

}

export interface State {
    indexData: any
    refreshing: boolean
}
// const dispatch = useDispatch()
export default class Home extends React.Component<Props, State> {
    constructor(props: Props | Readonly<Props>) {
        super(props);

    }

    componentDidMount() {
        store.dispatch(setInitData("sss"))
        this.receivecurrentPageNameHandler = DeviceEventEmitter.addListener("synchronizateCurrentPage", (a) => {
            // currentPageName.current = a.pageName;
            console.log("name", a.name)
        });
    }

    componentWillUnmount() {
    }

    public receivecurrentPageNameHandler = null
    public readonly state: Readonly<State> = {
        indexData: [],
        refreshing: false
    }

    getInitData = () => {
        fetch("")
    }

    onRefresh = () => {
        this.setState({
            refreshing: true
        })
        setTimeout(() => {
            this.setState({
                refreshing: false
            })
        }, 2000);
    }

    panResponder = PanResponder.create({

        onStartShouldSetPanResponder: () => true,

        //手势移动，激活响应   

        onMoveShouldSetPanResponder: (evt, gestureState) => {

            let { dy } = gestureState;

            //如果手指垂直距离移动小于5，则不激活，否则激活标签的响应操作。

            // 目的是：使标签里面的点击事件能够正常使用，如果没有点击事件。可直接return true;

            return Math.abs(dy) > 5 ? true : false

        },

        onPanResponderRelease: (evt, gs) => {

            if (gs.dy > 5) {//下滑
                console.log(111111)
                console.log(gs)
                // this.setState({ show_more_tab: true })

            } else if (gs.dy < -5) {//上滑
                console.log(222222)

                // this.setState({ show_more_tab: false })

            }

        }

    })

    /**
* 上拉触底
*/
    _contentViewScroll = (e) => {
        // console.log("e内容是：", e)

        var offsetY = e.nativeEvent.contentOffset.y; //滑动距离
        var contentSizeHeight = e.nativeEvent.contentSize.height; //scrollView contentSize高度
        var oriageScrollHeight = e.nativeEvent.layoutMeasurement.height; //scrollView高度


        if (offsetY + oriageScrollHeight >= contentSizeHeight) {
            // 在这里面加入你需要指行得方法和加载数据
            console.log("到底了")

        } else if (offsetY + oriageScrollHeight <= 1) {
            //这个是没有数据了然后给了false  得时候还在往上拉
        } else if (offsetY <= 0) {
            console.log(111)
            // this.setState({ refreshing: true })
            //这个地方是下拉刷新，意思是到顶了还在指行，可以在这个地方进行处理需要刷新得数据
        }
    }


    swiperChange = (index) => {
        console.log(index)
    }

    render() {
        console.log(store.getState().initData)
        let { indexData, refreshing } = this.state;
        indexData = [1, 2, 3, 4, 5]
        return (
            <View {...this.panResponder.panHandlers}>
                <ScrollView
                    style={{ backgroundColor: "#fff" }}
                    refreshControl={
                        <RefreshAnimateHeader
                            refreshing={this.state.refreshing}
                            onRefresh={this.onRefresh}
                        // source={require('../../assets/9.jpg')}
                        />}
                    automaticallyAdjustContentInsets={false}
                    //是否新显示滚动条
                    showsVerticalScrollIndicator={false}
                    scrollsToTop={true}
                    onMomentumScrollEnd={this._contentViewScroll}
                >
                    <View style={styles.headerStyle}>
                        <Swiper
                            autoplay
                            onIndexChanged={this.swiperChange}


                        >
                            {
                                indexData.map((item, index) => <Image source={require("../../assets/9.jpg")} style={styles.scrollBackgroundStyle} key={index} />)

                            }
                        </Swiper>
                    </View>

                </ ScrollView>
                <Image source={require("../../assets/9.jpg")} style={styles.mainBackgroundStyle} resizeMode={"cover"} />
            </View>
        );

    }
}
const styles = StyleSheet.create({
    main: {
        // backgroundColor
        width: width,
        height: height,
        backgroundColor: "#fff"
    },
    mainBackgroundStyle: {
        // flex: 1,
        width: width,
        height: height,
        position: "absolute",
        top: 0,
        left: 0,
        zIndex: -999
    },
    scrollBackgroundStyle: {
        // flex: 1,
        width: width,
        height: px2dp(200),
        // position: "absolute",
        // top: 0,
        // left: 0,
        // zIndex: -100
    },
    backgroundImg: {
        flex: 1
    },
    headerStyle: {
        width: width,
        height: px2dp(200),
        borderBottomColor: "#F6F6F6",
        borderBottomWidth: px2dp(1)
    }
})