import React, {Component} from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableHighlight,
  TouchableOpacity,
  Dimensions,
  Linking,
  FlatList,
  Platform,
} from 'react-native';
import {WebView} from 'react-native-webview';
import NaviBar from '../../components/navi-bar';
import history from '../../common/history';
import {inject, observer} from 'mobx-react';
import BackHeader from '../../components/backHeader';
import LoadingView from '../../common/loading';
import {colors} from '../../assets/styles/colors-theme';
import {Fonts} from '../../assets/styles/fonts-theme';
import {observable} from 'mobx';
import {width, height} from '../../common/screen';
import HistoryList from './historyList';
import Icon from 'react-native-vector-icons/FontAwesome5';
@inject('appStore')
@observer
export default class AlipayWebView extends Component {
  constructor(props) {
    super(props);
    this.store = props.appStore;
  }

  componentWillMount() {
    this.store.getCase();
  }

  onWebViewMessage(event) {
    console.log('Message received from webview');

    let msgData;
    try {
      msgData = JSON.parse(event.nativeEvent.data);
      console.log(msgData);
    } catch (err) {
      console.warn(err);
      return;
    }
  }

  renderBackIcon() {
    return (
      <TouchableOpacity
        style={{
          position: 'absolute',
          left: 20,
          justifyContent: 'center',
          alignItems: 'center',
          height: 40,
          width: 40,
        }}
        onPress={() => {
          history.goBack(this);
          this.props.navigation.state.params.alipayPayAsk( this.props.navigation);
          this.store.getApartmentData();
        }}>
        <Icon
          name={'arrow-left'}
          size={22}
          color={'white'}
          style={{
            ...Platform.select({
              ios: {},
              android: {
               // top: 40,
              },
            }),
          }}
        />
      </TouchableOpacity>
    );
  }

  render() {
    return (
      <View style={{flex: 1}}>
        <View
          style={{
            width: width,
            height: Platform.OS === 'ios' ? 65 : 80,
            backgroundColor: colors.mainColor,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text
            style={{fontFamily: Fonts.ubuntu, color: 'white', fontSize: 20}}>
            {'支付寶'}
          </Text>
          {this.renderBackIcon()}
        </View>

        <WebView
          onMessage={this.onWebViewMessage}
          source={{uri: this.props.navigation.state.params.uri}}
          style={{marginTop: 20}}
        />
      </View>
    );
  }
}
