import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  Image,
  StatusBar,
  Dimensions,
  PixelRatio,
  TouchableOpacity,
  Text,
  FlatList,
  DeviceEventEmitter,
  ScrollView,
} from 'react-native'
import { connect } from 'react-redux'
import ScrollableTabView from 'react-native-scrollable-tab-view'

import TopTabBar from './TopTabBar'
import Icon from '../Iconfont/Iconfont'
// import Commodity from "./Commodity";
// import Detail from "./Details";
// import DetailComponent from "./DetailComponent";

const { width, height } = Dimensions.get('window')
@connect(({ theme }) => ({ ...theme }))
class TopTab extends Component {
  constructor() {
    super()
    this.state = {}
  }

  render() {
    const { appTheme } = this.props
    return (
      <View style={{ flex: 1 }}>
        <ScrollableTabView
          locked={true}
          style={{ backgroundColor: appTheme.backgroundColor }}
          initialPage={0}
          renderTabBar={() => <TopTabBar />}
          // scrollEnabled={true}
          // onChangeTab={e => {
          //   console.log(e);
          // }}
        >
          {this.props.children}
        </ScrollableTabView>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  tabView: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.01)',
  },
})

export default TopTab