import React, {Component} from 'react';
import { Text, TouchableOpacity, View } from "react-native";
import {createStackNavigator} from '@react-navigation/stack';

import tax_page from '../../page/tax/tax_page';
import preview_pdf from '../onlinePreviewPDF/preview_pdf';
import invoice_inquiry from '../../page/tax/invoiceInquiry/invoice_inquiry';
import login from '../../page/login/login';
import forget_password from '../../page/login/forget_password';
import invoice_info from '../../page/tax/invoiceInquiry/invoice_info';
import electronics_ordinary_invoice from '../../page/tax/invoiceInquiry/electronics_ordinary_invoice';
import electronics_major_invoice from '../../page/tax/invoiceInquiry/electronics_major_invoice';
import paper_ordinary_invoice from '../../page/tax/invoiceInquiry/paper_ordinary_invoice';
import paper_major_invoice from '../../page/tax/invoiceInquiry/paper_major_invoice';
import invoice_stock from '../../page/tax/invoiceStock/invoice_stock';
import {searchIcon} from '../../source/icon/icon';
import {SvgXml} from 'react-native-svg';
import invoice_monitor from '../../page/tax/monitor/invoice_monitor';
import device from '../../page/tax/monitor/device';
import user_agreement from '../../page/login/user_agreement';

const TaxStack = createStackNavigator();

export default class tax_navigation extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <TaxStack.Navigator initialRouteName="tax_page">
        <TaxStack.Screen
          name="tax_page"
          component={tax_page}
          options={{
            title: '查询',
            headerTitleAlign: 'center',
            headerStyle: {
              backgroundColor: '#ffffff',
            },
            headerTintColor: '#000000',
          }}
        />
        <TaxStack.Screen
          name={'invoice_inquiry'}
          component={invoice_inquiry}
          options={{
            headerTitle: '发票查询',
            headerTitleAlign: 'center',
            headerRight: () => (
              <View style={{marginRight: 20}}>
                <TouchableOpacity
                  style={{
                    height: 30,
                    width: 50,
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}
                  onPress={() => {
                    this.props.navigation.navigate('invoice_inquiry', {
                      isShow: true,
                    });
                  }}>
                  <SvgXml height={20} xml={searchIcon()} />
                </TouchableOpacity>
              </View>
            ),
            headerStyle: {
              backgroundColor: '#ffffff',
            },
            headerTintColor: '#000000',
          }}
        />
        <TaxStack.Screen
          name={'invoice_info'}
          component={invoice_info}
          options={{
            title: '发票详情',
            headerTitleAlign: 'center',
            headerStyle: {
              backgroundColor: '#ffffff',
            },
            headerTintColor: '#000000',
          }}
        />
        <TaxStack.Screen
          name={'preview_pdf'}
          component={preview_pdf}
          options={{
            title: '发票在线查看',
            headerTitleAlign: 'center',
            headerStyle: {
              backgroundColor: '#ffffff',
            },
            headerTintColor: '#000000',
          }}
        />
        <TaxStack.Screen
          name="login"
          component={login}
          options={{
            title: '登录',
            headerTitleAlign: 'center',
            headerStyle: {
              backgroundColor: '#ffffff',
            },
            headerTintColor: '#000000',
          }}
        />
        <TaxStack.Screen
          name="user_agreement"
          component={user_agreement}
          options={{
            title: '云票在线用户使用协议',
            headerTitleAlign: 'center',
            headerStyle: {
              backgroundColor: '#ffffff',
            },
            headerTintColor: '#000000',
          }}
        />
        <TaxStack.Screen
          name="forget_password"
          component={forget_password}
          options={{
            title: '密码修改',
            headerTitleAlign: 'center',
            headerStyle: {
              backgroundColor: '#ffffff',
            },
            headerTintColor: '#000000',
          }}
        />
        <TaxStack.Screen
          name={'electronics_ordinary_invoice'}
          component={electronics_ordinary_invoice}
          options={{
            headerTitle: '电子普票查询',
            headerTitleAlign: 'center',
            headerRight: () => (
              <View style={{marginRight: 20}}>
                <TouchableOpacity
                  style={{
                    height: 30,
                    width: 50,
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}
                  onPress={() => {
                    this.props.navigation.navigate(
                      'electronics_ordinary_invoice',
                      {
                        isShow: true,
                      },
                    );
                  }}>
                  <SvgXml height={20} xml={searchIcon()} />
                </TouchableOpacity>
              </View>
            ),
            headerStyle: {
              backgroundColor: '#ffffff',
            },
            headerTintColor: '#000000',
          }}
        />
        <TaxStack.Screen
          name={'electronics_major_invoice'}
          component={electronics_major_invoice}
          options={{
            headerTitle: '电子专票查询',
            headerTitleAlign: 'center',
            headerRight: () => (
              <View style={{marginRight: 20}}>
                <TouchableOpacity
                  style={{
                    height: 30,
                    width: 50,
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}
                  onPress={() => {
                    this.props.navigation.navigate(
                      'electronics_major_invoice',
                      {
                        isShow: true,
                      },
                    );
                  }}>
                  <SvgXml height={20} xml={searchIcon()} />
                </TouchableOpacity>
              </View>
            ),
            headerStyle: {
              backgroundColor: '#ffffff',
            },
            headerTintColor: '#000000',
          }}
        />
        <TaxStack.Screen
          name={'paper_ordinary_invoice'}
          component={paper_ordinary_invoice}
          options={{
            headerTitle: '纸质普票查询',
            headerTitleAlign: 'center',
            headerRight: () => (
              <View style={{marginRight: 20}}>
                <TouchableOpacity
                  style={{
                    height: 30,
                    width: 50,
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}
                  onPress={() => {
                    this.props.navigation.navigate('paper_ordinary_invoice', {
                      isShow: true,
                    });
                  }}>
                  <SvgXml height={20} xml={searchIcon()} />
                </TouchableOpacity>
              </View>
            ),
            headerStyle: {
              backgroundColor: '#ffffff',
            },
            headerTintColor: '#000000',
          }}
        />
        <TaxStack.Screen
          name={'paper_major_invoice'}
          component={paper_major_invoice}
          options={{
            headerTitle: '纸质专票查询',
            headerTitleAlign: 'center',
            headerRight: () => (
              <View style={{marginRight: 20}}>
                <TouchableOpacity
                  style={{
                    height: 30,
                    width: 50,
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}
                  onPress={() => {
                    this.props.navigation.navigate('paper_major_invoice', {
                      isShow: true,
                    });
                  }}>
                  <SvgXml height={20} xml={searchIcon()} />
                </TouchableOpacity>
              </View>
            ),
            headerStyle: {
              backgroundColor: '#ffffff',
            },
            headerTintColor: '#000000',
          }}
        />
        <TaxStack.Screen
          name="invoice_stock"
          component={invoice_stock}
          options={{
            title: '发票库存',
            headerTitleAlign: 'center',
            headerRight: () => (
              <View style={{marginRight: 20}}>
                <TouchableOpacity
                  style={{
                    height: 30,
                    width: 50,
                    justifyContent: 'center',
                    alignItems: 'center',
                  }}
                  onPress={() => {
                    this.props.navigation.navigate('invoice_stock', {
                      isShow: true,
                    });
                  }}>
                  <SvgXml height={20} xml={searchIcon()} />
                </TouchableOpacity>
              </View>
            ),
            headerStyle: {
              backgroundColor: '#ffffff',
            },
            headerTintColor: '#000000',
          }}
        />
        <TaxStack.Screen
          name="invoice_monitor"
          component={invoice_monitor}
          options={{
            title: '税控管理',
            headerTitleAlign: 'center',
            headerStyle: {
              backgroundColor: '#ffffff',
            },
            headerTintColor: '#000000',
          }}
        />
        <TaxStack.Screen
          name="device"
          component={device}
          options={{
            title: '税控设备',
            headerTitleAlign: 'center',
            headerStyle: {
              backgroundColor: '#ffffff',
            },
            headerTintColor: '#000000',
          }}
        />
      </TaxStack.Navigator>
    );
  }

  shouldComponentUpdate(
    nextProps: Readonly<P>,
    nextState: Readonly<S>,
    nextContext: any,
  ): boolean {
    if (nextProps.route.state.index === 0) {
      this.props.navigation.setOptions({
        tabBarVisible: true,
      });
    }
    return true;
  }
}