import React, {Component} from 'react';
import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';

import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

import home_navigation from './home_navigation';
import personal_navigation from './personal_navigation';
import {RetrieveData} from '../../data/storage';
import message_list from '../../page/tax_message/message_list';
import tax_navigation from './tax_navigation';

function MyTabBar({state, descriptors, navigation}) {
  return (
    <View style={{flexDirection: 'row'}}>
      {state.routes.map((route, index) => {
        const {options} = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            key={route.key}
            accessibilityRole="button"
            accessibilityStates={isFocused ? ['selected'] : []}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{
              flex: 1,
              height: 50,
              flexDirection: 'row',
              justifyContent: 'center',
              alignItems: 'center',
            }}>
            <Text style={{color: isFocused ? '#673ab7' : '#222'}}>{label}</Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default class Main_tab_navigation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      authority: '',
    };
  }

  render() {
    return (
      <NavigationContainer>
        <Tab.Navigator tabBar={(props) => <MyTabBar {...props} />}>
          <Tab.Screen
            name="home_navigation"
            component={home_navigation}
            options={{
              title: '首页',
              unmountOnBlur: true,
              // tabBarIcon: ({color, size}) => (
              //   <MaterialCommunityIcons name="home" color={color} size={100} />
              // ),
            }}
          />
          <Tab.Screen
            name="tax_navigation"
            component={tax_navigation}
            options={{
              title: '消息',
              unmountOnBlur: true,
              // tabBarLabel: 'Home',
              // tabBarIcon: ({color, size}) => (
              //   // <MaterialCommunityIcons name="home" color={color} size={size} />
              //   <MaterialCommunityIcons name="account" color={color} size={26} />
              // ),
            }}
            // initialParams={this.state.authority}
          />
          <Tab.Screen
            name="personal_navigation"
            component={personal_navigation}
            options={{
              title: '个人中心',
              unmountOnBlur: true,
              // tabBarIcon: ({color, size}) => (
              //   <MaterialCommunityIcons
              //     name="home"
              //     color={color}
              //     size={26}
              //   />
              // ),
            }}
          />
        </Tab.Navigator>
      </NavigationContainer>
    );
  }

  componentDidMount(): void {
    this.getAuthority();
  }

  getAuthority = async () => {
    let authority = await RetrieveData('authority');
    if (authority) {
      this.setState({
        authority: authority,
      });
    }
  };
}