import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  AsyncStorage,
} from 'react-native';
import { Router, Scene, Tabs, Modal } from 'react-native-router-flux';
//导入字体图标
import Icon from 'react-native-vector-icons/FontAwesome';
import ScrollableTabView, {DefaultTabBar, ScrollableTabBar} from 'react-native-scrollable-tab-view';
//导入toast提示组件
import Toast from 'react-native-easy-toast';

import PageOne from './components/PageOne';
import PageTwo from './components/PageTwo';
import PageThree from './components/PageThree';
import ModalExample from './components/AddFolderModal'
import { Actions } from 'react-native-router-flux';
import ErrorModal from './components/ErrorModal';
import MyTabBar from './components/MyTabBar';
import Login from './components/login/Login';
import searchPage from './components/searchPage'
import UploadImageMult from './components/modals/UploadImageMult'

import UploadImage from './components/modals/UploadImage';
import RemoveFolder from './components/RemoveFolder';
//下面ICON组件 ，改变选中/未选中的图标颜色
// class TabIcon extends React.Component {
//   render () {
//     var color = this.props.focused ? '#158fff' : '#ccc'
//     // alert(JSON.stringify(this.props))
//     // alert(color)
//     return (
//       <View style={{flex: 1, flexDirection: 'column', alignItems: 'center', alignSelf: 'center'}}>
//         <Icon style={{color: color}} name={this.props.iconName} size={30} />
//         <Text style={{color: color,fontSize:8}}>{this.props.title}</Text>
//       </View>
//     )
//   }
// }

let self; //将App组件中的this赋给全局的self
// global.showLoading = false; //所有子页面均可直接调用global.showLoading()来展示Loading
// global.closeLoading = false; //所有子页面均可直接调用global.closeLoading()来关闭Loading
global.toast = false; //所有子页面均可直接调用global.toast("")来吐司提示消息

class MyTabs extends Component{
  constructor(props) {
    super(props);
    this.state = {
      tabNames: ['文件', '', '我的'],
      tabIconNames:['ios-folder', 'ios-add-circle' , 'md-person']
    }
  }
  //异步获取AsyncStorage存储的元素 userName
  _retrieveData = async () => {
    try {
      const value = await AsyncStorage.getItem('userName');
      if (value == null) {
        // We have data!!
        Actions.login();
        // console.log(value);
      }
     } catch (error) {
       // Error retrieving data
     }
  }

  render() {
    let tabNames = this.state.tabNames;
    let tabIconNames = this.state.tabIconNames;
    this._retrieveData();
    return (
      <ScrollableTabView
        //renderTabBar={() => <DefaultTabBar/>}
        renderTabBar={() => <MyTabBar tabNames={tabNames} tabIconNames={tabIconNames}/>}
        tabBarPosition={'bottom'}
        onChangeTab={
            (obj) => {
                console.log('被选中的tab下标：' + obj.i);
            }
        }
        onScroll={
            (position) => {
                console.log('滑动时的位置：' + position);
            }
        }
        locked={false}
        initialPage={0}
        prerenderingSiblingsNumber={1}
      >
        {/*每个页面 设定四个页面*/}
        <PageOne tabLabel="page1" key='pageone'/>
        <PageTwo tabLabel="page2" key='pagetwo'/>
        <PageThree tabLabel="page3" key='pagethree'/>
      </ScrollableTabView>
    )
  }
};

export default class App extends Component{
  constructor(props) {
    super(props);
  };
  componentDidMount() {
    self = this;
    // global.showLoading = function() {
    //     self.Loading.show();
    // };
    // global.closeLoading = function() {
    //     self.Loading.close();
    // };
    global.toast = function(message) {
        self.refs.toast.show(message);
    };
  }

  render() {
    return (
      <View style={[{flex: 1}]}>
        <Router>
          <Scene
            key="root"
            hideNavBar
          >
            {/*首页(tab)*/}
            <Scene
              key="home"
              component={MyTabs}
              title="首页"
              initial={true}
              hideNavBar={true} //此处以及其他页都隐藏了导航，我打算自定义组件作为头部导航栏。
            />
            <Scene
              key='uploadImage'
              component={UploadImageMult}
              hideNavBar={false}
            />
            <Scene
              key='login'
              component={Login}
              hideNavBar
            />
            <Scene
                key='searchPage'
                component={searchPage}
                hideNavBar/>
             <Scene
              key='removeFolder'
              component={RemoveFolder}
              hideNavBar
            />
          </Scene>
        </Router>
        <Toast ref="toast" opacity={0.8}/>
      </View>
    )
  }
}
// const App = () => {

//   return (
//     // <Router>
//     //   <Modal>
//     //     <Scene
//     //       key='root'
//     //       hideNavBar
//     //     >
//     //       <Tabs
//     //         tabs={true}
//     //         key='tabBar'
//     //         hideNavBar={true}
//     //         tabBarStyle={{ backgroundColor: '#fff' }}
//     //         showLabel={false}
//     //       >
//     //         <Scene
//     //           key='pageone'
//     //           icon={TabIcon}
//     //           iconName={'home'}
//     //           component={PageOne}
//     //           hideNavBar
//     //           title='首页'
//     //         />
//     //         <Scene
//     //           key='errorModal'
//     //           icon={TabIcon}
//     //           iconName={'plus-circle'}
//     //           component={PageTwo}
//     //           hideNavBar
//     //           hideTabBar
//     //           title=''
//     //         />
//     //         <Scene
//     //           key='pagethree'
//     //           icon={TabIcon}
//     //           iconName={'user-circle'}
//     //           component={PageThree}
//     //           hideNavBar
//     //           title='个人中心'
//     //         />
//     //       </Tabs>
//     //     </Scene>
//     //   </Modal>
//     // </Router>
//     <Router>
//       <Scene
//         key="root"
//         hideNavBar
//       >
//         {/*首页(tab)*/}
//         <Scene
//           key="home"
//           component={MyTabs}
//           title="首页"
//           initial={true}
//           hideNavBar={true} //此处以及其他页都隐藏了导航，我打算自定义组件作为头部导航栏。
//         />
//         <Scene
//           key='login'
//           component={Login}
//           hideNavBar
//         />
//       </Scene>
//     </Router>
//   );
// }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  fontStyles: {
    fontSize: 16,
    color:'#ccc'
  }
});

// export default App;