import React, { Component } from 'react'
import { StyleSheet, View, Text, Image, ScrollView, Animated, TouchableOpacity, TouchableHighlightBase, PanResponder } from 'react-native'
import { colors, px2dp } from '../../utils/base';
export interface Props {
    tabTitle: Array<any>
    // onChangeTab: Function
    changePage: Function
}

export interface State {
    pageIndex: number
    lineWidth: Animated.Value
    moveX: Animated.Value
}

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

    }
    componentDidMount() {

    }

    componentWillUnmount() {
    }

    panResponder = PanResponder.create({//在view

        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 })

            }

        }

    })

    public readonly state: Readonly<State> = {
        pageIndex: 1,
        lineWidth: new Animated.Value(0),
        moveX: new Animated.Value(0)
    }

    public tabWidth = px2dp(60)

    changePage = (i) => {
        console.log('哈哈哈哈；', i)
        let { changePage } = this.props;
        if (i) {

        }
        changePage && changePage(i)
        this.setState({ pageIndex: i })

    }

    renderTabItem = (item, index) => {
        let { tabTitle, } = this.props;
        return (
            <TouchableOpacity style={[styles.tabStyle, { width: this.tabWidth }]} onPress={() => this.changePage(index)}>
                <Text>{item}</Text>
            </TouchableOpacity>
        )
    }

    onChangeTab = (tabi) => {
        let { pageIndex } = this.state;
        this.setState({ pageIndex: tabi })
    }




    render() {
        let { pageIndex, lineWidth } = this.state;
        let { tabTitle } = this.props;

        return (
            <View >
                <ScrollView
                    horizontal={true}
                    scrollEnabled={true}
                    showsHorizontalScrollIndicator={false}
                    style={{ height: px2dp(40) }}

                >
                    {
                        tabTitle.map(this.renderTabItem)
                    }
                </ScrollView>

            </View >

        );

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

    },
    tabStyle: {
        height: px2dp(38),

        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#fff"

        // backgroundColor: colors.themeColor
    },
    lineStyle: {
        height: px2dp(2),
        marginTop: px2dp(2),
        backgroundColor: colors.themeColor
    }
})