import "react-native-gesture-handler"
import React, { Component } from 'react'
import { StyleSheet, View, Text, Image, SafeAreaView, StatusBar, DeviceEventEmitter } from 'react-native'
import { px2dp } from './src/utils/base';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './src/views/home/Home';
import Loading from "./src/compoent/Loading";
import LoadingToast from "./src/compoent/LoadingToast";
import Toast from "./src/compoent/Toast";
import EasyToast from 'react-native-easy-toast';
import Mine from "./src/views/mine/Mine";
import { Provider } from 'react-redux'
import { store } from './src/redux/store/store'
import { navigationRef } from "./src/NavigationService";
// import ImagePicker from "./src/compoent/ImagePicker";


export interface Props {

}

export interface State {

}

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
const Main = () => {
  const Tab = createBottomTabNavigator();

  return (
    // <Tab.Navigator screenOptions={{}} sceneContainerStyle={{ justifyContent: "center", alignItems: "center", marginBottom: px2dp(20) }}
    <Tab.Navigator screenOptions={{}} sceneContainerStyle={{ justifyContent: "center", alignItems: "center" }}
      tabBarOptions={{ labelPosition: "below-icon", tabStyle: { justifyContent: 'center' } }}
    >
      <Tab.Screen name="Home" component={Home} options={{}} />
      <Tab.Screen name="Mine" component={Mine} options={{}} />
    </Tab.Navigator>


  )

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

  }
  componentDidMount() {
    this.easyToastAddListener = DeviceEventEmitter.addListener("easy-toast", (a) => {
      this.easyToastRef && this.easyToastRef.show(a.msg)
    })
    this.toastAddListener = DeviceEventEmitter.addListener("customer-toast-status", (a) => {
      this.toastRef && this.toastRef.show(a.msg)
    })

    this.loadingAddListener = DeviceEventEmitter.addListener("loading-addlisten", (a) => {
      this.loadingRef && this.loadingRef.show(a.msg)
    })
    this.loadingHideAddListener = DeviceEventEmitter.addListener("loading-addlisten-hide", (a) => {
      this.loadingRef && this.loadingRef.hide()
    })

    this.loadingTostAddListener = DeviceEventEmitter.addListener("loading-toast-addlisten", (a) => {
      this.loadingToastRef && this.loadingToastRef.show()
    })
    this.loadingTostHideAddListener = DeviceEventEmitter.addListener("loading-toast-addlisten-hide", (a) => {
      this.loadingToastRef && this.loadingToastRef.hide()
    })


  }

  componentWillUnmount() {
    this.easyToastAddListener && this.easyToastAddListener.remove()
    this.toastAddListener && this.toastAddListener.remove()
    this.loadingAddListener && this.loadingAddListener.remove()
    this.loadingTostAddListener && this.loadingTostAddListener.remove()
    this.loadingHideAddListener && this.loadingHideAddListener.remove()
    this.loadingTostAddListener && this.loadingTostAddListener.remove()
    this.loadingTostHideAddListener && this.loadingTostHideAddListener.remove()

  }

  public readonly state: Readonly<State> = {

  }

  public loadingToastRef = null
  public loadingTostAddListener = null
  public loadingTostHideAddListener = null
  public loadingRef = null
  public loadingAddListener = null
  public loadingHideAddListener = null
  public toastRef = null
  public toastAddListener = null
  public easyToastRef = null
  public easyToastAddListener = null
  public toastMsg = null


  render() {
    return (
      <Provider store={store}>

        <SafeAreaView style={{ flex: 1 }}>

          <NavigationContainer
            ref={navigationRef}
            onStateChange={() => {
              const currentRouteName = navigationRef.current.getCurrentRoute().name;
              console.log("监听到当前页面", currentRouteName);
              DeviceEventEmitter.emit("synchronizateCurrentPage", { pageName: currentRouteName });
            }}
          >
            <StatusBar barStyle={'dark-content'} translucent={true} backgroundColor={'rgba(0,0,0,0)'} />
            <Stack.Navigator
              headerMode={'none'}
            >
              <Stack.Screen name="Main" component={Main} options={{}} />
              {/* <Stack.Screen name="ImagePicker" component={ImagePicker} options={{}} /> */}
            </Stack.Navigator>
          </NavigationContainer>
          <LoadingToast ref={(c) => { this.loadingToastRef = c }} autoClose />
          <Loading ref={(c) => { this.loadingRef = c }} />
          <Toast ref={(c) => { this.toastRef = c }} />
          <EasyToast ref={(c) => { this.easyToastRef = c }} position={'center'} />
        </SafeAreaView>
      </Provider>
    );

  }
}
const styles = StyleSheet.create({
  main: {
    flex: 1,
    paddingHorizontal: px2dp(12.5),
    backgroundColor: "#fefefe"
  }

})