import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  View,
  ScrollView,
  TouchableOpacity
} from "react-native";
import Text from "react-native-text";
import { observer, inject } from "mobx-react/native";
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
import Log from '../../config/log'
import Loader from '../../components/Public/loader'
import Toast, { DURATION } from "react-native-easy-toast";
import Header from "../../components/Public/header";
import { width, height } from "../../config/screen";
const log = new Log()
@inject(["menuStore"], ["userStore"])
@observer
class Pay extends Component {
  constructor(props) {
    super(props);
    this.store = this.props.menuStore;
    this.userStore = this.props.userStore;
  }

  back() {
    console.log(this.userStore.userData.data.token);
    this.store.cancelOrder(this.userStore.userData.data.token);
    this.props.navigation.goBack();
  }
  pay() {
    log.firebaseLog('press_pay_button_on_pay_page')
    this.store.pay(
      this.userStore.userData.data.token,
      this,
      this.userStore.creditCardinfo.id
    );
  }

  navigatieAction(page) {
    this.props.navigation.navigate(page);
  }

  render() {
    log.firebaseClass('pay')
    return (
      <View style={{ flex: 1, alignItems: "center" }}>
      <Loader loading = {this.userStore.loading}/>
        <Header
          title="Pay"
          navigation={this.props.navigation}
          onPress={() => this.back()}
          order={true}
        />
        <TouchableOpacity
          style={{
            borderColor: "black",
            borderWidth: 1,
            height: 50,
            width: 100,
            alignItems: "center",
            justifyContent: "center"
          }}
          onPress={() => this.pay()}
        >
          <Text>Pay</Text>
        </TouchableOpacity>
        <Toast ref="toast" />
      </View>
    );
  }
}

export default Pay;