import React, { Component } from 'react'
import { StyleSheet, View, Text, Image, ScrollView } from 'react-native'
import { height, width } from '../../utils/base';
export interface Props {
    tabs: Array<any>
}

export interface State {

}

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

    }
    componentDidMount() {

    }

    componentWillUnmount() {
    }

    public readonly state: Readonly<State> = {

    }

    public scrollViewRef = null

    rendTabConatiner = (item, index, key) => {
        let { tabs } = this.props
        console.log("item", item)
        return (
            <View style={[{ width: width, height: height }]} key={index}>
                {item}

            </View>
        )
    }

    onchangeTab = (i) => {
        console.log("999", i)

        this.scrollViewRef.scrollTo({ x: width * i, y: 0, animated: true })
    }


    render() {
        let { tabs, children } = this.props
        console.log(children)
        return (

            <ScrollView
                ref={c => { this.scrollViewRef = c }}
                pagingEnabled={true}
                horizontal={true}
                showsHorizontalScrollIndicator={false}

                style={[styles.main, { width: width, height: height }]}>
                {
                    children.map((item, index) => this.rendTabConatiner(item, index, index))
                }
            </ScrollView >
        );

    }
}
const styles = StyleSheet.create({
    main: {
        flex: 1,
        width: width,
    }
})