import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  Alert,
  Platform,
  Linking,
  Image,
} from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {Carousel, Modal, Progress, Provider} from '@ant-design/react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {
  conf,
  confClick,
  homeClick,
  home,
  personal,
  personalClick,
  search,
  searchClick,
} from '../../source/icon/icon';
import {SvgXml} from 'react-native-svg';
import * as WeChat from 'react-native-wechat-lib';

import home_navigation from './home_navigation';
import tax_navigation from './tax_navigation';
import personal_navigation from './personal_navigation';
import configure_navigation from './configure_navigation';
import {RetrieveData} from '../../data/storage';
import {
  isFirstTime,
  isRolledBack,
  packageVersion,
  currentVersion,
  checkUpdate,
  downloadUpdate,
  switchVersion,
  switchVersionLater,
  markSuccess,
  downloadAndInstallApk,
} from 'react-native-update';

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();
import _updateConfig from '../../update.json';
const {appKey} = _updateConfig[Platform.OS];

export default class Main_tab_navigation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      received: 0,
      total: 0,
      proportion: 0,
      isDownload: false,
      authority: '',
    };
  }

  render() {
    return (
      <Provider>
        <NavigationContainer>
          <Tab.Navigator
            screenOptions={({route}) => ({
              tabBarIcon: ({focused, color, size}) => {
                let iconName;
                if (route.name === 'home_navigation') {
                  iconName = focused ? (
                    <SvgXml height={25} xml={homeClick()} />
                  ) : (
                    <SvgXml height={25} xml={home()} />
                  );
                } else if (route.name === 'tax_navigation') {
                  iconName = focused ? (
                    <SvgXml height={25} xml={searchClick()} />
                  ) : (
                    <SvgXml height={25} xml={search()} />
                  );
                } else if (route.name === 'configure_navigation') {
                  iconName = focused ? (
                    <SvgXml height={25} xml={confClick()} />
                  ) : (
                    <SvgXml height={25} xml={conf()} />
                  );
                } else if (route.name === 'personal_navigation') {
                  iconName = focused ? (
                    <SvgXml height={25} xml={personalClick()} />
                  ) : (
                    <SvgXml height={25} xml={personal()} />
                  );
                }
                return iconName;
                // return <Ionicons name={iconName} size={size} color={color} />;
                // return (<Image
                //     source={require('../../source/img/search.png')}
                //     style={{height: 16, width: 16}}
                //   />
                // );
              },
            })}
            tabBarOptions={{
              activeTintColor: '#2A67FE',
              inactiveTintColor: 'gray',
            }}>
            <Tab.Screen
              name="home_navigation"
              component={home_navigation}
              options={{title: '首页'}}
            />
            <Tab.Screen
              name="tax_navigation"
              component={tax_navigation}
              options={{title: '查询'}}
            />
            <Tab.Screen
              name="configure_navigation"
              component={configure_navigation}
              options={{title: '配置'}}
            />
            <Tab.Screen
              name="personal_navigation"
              component={personal_navigation}
              options={{title: '我的'}}
            />
          </Tab.Navigator>
        </NavigationContainer>
        <Modal
          title="更新进度"
          transparent
          maskClosable
          visible={this.state.isDownload}
          closable={false}>
          <View style={{paddingVertical: 20}}>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
              }}>
              <View style={{marginRight: 10, height: 4, flex: 1}}>
                <Progress percent={this.state.proportion} />
              </View>
              <Text>{this.state.proportion}%</Text>
            </View>
          </View>
        </Modal>
      </Provider>
    );
  }

  async componentDidMount(): void {
    if (isFirstTime) {
      // 必须调用此更新成功标记方法
      // 否则默认更新失败，下一次启动会自动回滚
      markSuccess();
      console.log('更新完成');
    } else if (isRolledBack) {
      console.log('刚刚更新失败了,版本被回滚.');
    }
    await this.getAuthority();
    await this.checkUpdate();
    WeChat.registerApp('wxc4f72f029a280bc4', 'universalLink').then(value => {
      console.log(value);
    });
  }

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

  doUpdate = async info => {
    try {
      this.setState({
        isDownload: true,
      });
      const hash = await downloadUpdate(info, {
        onDownloadProgress: ({received, total}) => {
          if (received !== '' && received !== null) {
            if (total !== '' && total !== null) {
              let proportion = (parseInt(received) / parseInt(total)) * 100;
              this.setState({
                proportion: proportion,
              });
            }
          }
          this.setState({
            received,
            total,
          });
        },
      });
      this.setState({
        isDownload: false,
      });
      Alert.alert('提示', '下载完毕,是否重启应用?', [
        {
          text: '是',
          onPress: () => {
            switchVersion(hash);
          },
        },
        {text: '否'},
        {
          text: '下次启动时',
          onPress: () => {
            switchVersionLater(hash);
          },
        },
      ]);
    } catch (err) {
      Alert.alert('更新失败', err.message);
    }
  };
  checkUpdate = async () => {
    if (__DEV__) {
      // 开发模式不支持热更新，跳过检查
      return;
    }
    let info;
    try {
      info = await checkUpdate(appKey);
    } catch (err) {
      Alert.alert('更新检查失败', err.message);
      return;
    }
    if (info.expired) {
      Alert.alert('提示', '您的应用版本已更新，点击确定下载安装新版本', [
        {
          text: '确定',
          onPress: () => {
            if (info.downloadUrl) {
              // apk可直接下载安装
              if (
                Platform.OS === 'android' &&
                info.downloadUrl.endsWith('.apk')
              ) {
                this.setState({
                  isDownload: true,
                });
                downloadAndInstallApk({
                  url: info.downloadUrl,
                  onDownloadProgress: ({received, total}) => {
                    if (received !== '' && received !== null) {
                      if (total !== '' && total !== null) {
                        let proportion =
                          (parseInt(received) / parseInt(total)) * 100;
                        this.setState({
                          proportion: parseInt(proportion),
                        });
                        if (parseInt(proportion) >= 100) {
                          this.setState({
                            isDownload: false,
                          });
                        }
                      }
                    }
                    this.setState({
                      received,
                      total,
                    });
                  },
                });
              } else {
                Linking.openURL(info.downloadUrl);
              }
            }
          },
        },
      ]);
    } else if (info.upToDate) {
      // Alert.alert('提示', '您的应用版本已是最新.');
    } else {
      Alert.alert(
        '提示',
        '检查到新的版本' + info.name + ',是否下载?\n' + info.description,
        [
          {
            text: '是',
            onPress: () => {
              this.doUpdate(info);
            },
          },
          {text: '否'},
        ],
      );
    }
  };
}