import * as React from 'react';
import { useState, useEffect } from 'react';
import { SafeAreaView, BackHandler, Alert } from 'react-native';
import { connect } from "react-redux";
import { saveUserInfo } from "../../redux/actions/AppUserInfoActions";
import { WebView } from 'react-native-webview';
import {Container, Toast} from 'native-base';
import DB from '../../components/storage/';
import Elements from '../../components/elements'
import REQUEST from '../../components/api/';
import Theme from '../../components/theme.style.js';
import Tokenization from '../../components/paymaya/tokenization';

class CheckOut extends React.Component {

  constructor(props) {
    super(props)
  }

  state = {
    amount: 0,
    data: null,
    session: null,
    processed: false,
    loading: false,
    transactionId: null,
    isShowPrompt: false
  }

  componentDidMount() {
    this.init()
    BackHandler.addEventListener('hardwareBackPress', this.onBackPress)
    return () => {
      BackHandler.removeEventListener('hardwareBackPress', this.onBackPress)
    }
  }

  componentWillUnmount() {

  }

  init = async () => {
    const SESSION = await DB.session()
    this.setState({ data: this.props.route.params?.data, amount: this.props.route.params?.amount, transactionId: this.props.route.params?.transactionId, session: SESSION })
  }

  getTransactionDetails = async (paymentId, onResponse) => {
    let transaction = await Tokenization.getTransactionDetails(paymentId)
    if(transaction) onResponse(transaction)
  }

  onCheckOutResult = async (result, message) => {
    Toast.show({
      text: "Transaction " + message,
      buttonText: "",
      duration: 3000
    })
    if(result == "success"){
      this.props.navigation.reset({
        index: 0,
        routes: [{ name: 'Main' }],
      })
    } else {
      if(result == "failed") {
        if(!this.state.isShowPrompt) {
          this.setState({ isShowPrompt: true })
          setTimeout(() => {
            Alert.alert(
              'Transaction Failed!',
              `Failed to verify transaction. Please try again.`,
              [
                {
                text: "OK",
                onPress: () => {
                  this.setState({ isShowPrompt: false })
                  this.props.navigation.goBack()
                }},
              ]
            )
          }, 700)
        }
      } else {
        setTimeout(() => {
          Alert.alert(
            'Transaction Failed!',
            `Transaction cancelled. Please try again.`,
            [
              {
              text: "OK",
              onPress: () => {
                this.props.navigation.goBack()
              }},
            ]
          )
        }, 700)
      }
    }
  }

  onSuccess = () => {
    if(this.state.data.type == 'add'){
      this.props.route.params?.onBack()
      return;
    }
    Platform.OS == 'ios' ? setTimeout(() => {
      Alert.alert(
        'Transaction Completed!',
        `You have successfully paid ${parseFloat(this.state.amount).toFixed(2)} points from your credit card \n**** **** **** ${this.state.data.card_number}.`,
        [
          {
          text: "OK",
          onPress: () => {
            this.props.navigation.navigate('Main')
          }},
        ]
      )
    }, 300) : null
  }
  
  onBackPress = () => {
    return true
  }

  topup = (webViewState) => {
    let url = webViewState.url
    if(url.includes('/success') && !this.state.processed){
      this.setState({ processed: true, valid: false })
      if(this.state.data.type == 'add') {
        this.onSuccess()
        this.props.navigation.goBack()
        return // check if transaction is only add card or payment topup, if then add card stop the saving to database
      }

      this.getTransactionDetails(this.state.transactionId, onResponse => {
        if(onResponse.status == "PAYMENT_SUCCESS") {
          this.setState({ loading: true })
          this.props.saveUserInfo({ token: this.state.session.token, card_number: this.state.session.user.card_number }).then(profile => {
            this.setState({ loading: false })
            DB.updateProfile(profile, () => {
              this.onSuccess()
              this.props.navigation.goBack()
            }, (error) => {})
          })
        } else {
          this.onCheckOutResult('faild','failed')
        }
      })

      // REQUEST('topup', 'post', {
      //   Authorization: this.state.session.token,
      //   card_number: this.state.session.user.card_number
      // }, {}, {
      //   amount: this.state.amount
      // }, (res) => {
      //   this.props.saveUserInfo({ token: this.state.session.token, card_number: this.state.session.user.card_number }).then(res => {
      //     DB.updateProfile(res, () => {
      //       this.onSuccess()
      //       this.props.navigation.goBack()
      //     }, (error) => {})
      //   })
      // }, (error) => {
      //   this.onCheckOutResult('error','failed because ' + error)
      // })
    } else if(url.includes('/failure')) {
      this.onCheckOutResult('failed', 'failed')
    }else if(url.includes('/cancel')){
      this.onCheckOutResult('cancelled', 'cancelled')
    }
  }

  render() {
    return (
      <Container>
        <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
        <Elements.loaderView 
          title="Validating"
          message="Please wait..."
          isDarkMode={this.props.app_theme?.theme.dark}
          backgroundColor={this.props.app_theme?.theme.colors.border}
          color={this.props.app_theme?.theme.colors.text}
          visible={this.state.loading} />
          {!this.state.processed ? <WebView
            originWhitelist={['*']}
            source={{ uri: this.state.data ? this.state.data?.redirectUrl : '' }}
            style={{
              backgroundColor: 'transparent',
              width: Theme.screen.w,
              height: Theme.screen.h,
              padding: 15
            }}
            onNavigationStateChange={(webViewState) => this.topup(webViewState)}
          /> : null}
        </SafeAreaView>
      </Container>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    userinfo: state.appUserInfoReducer.userinfo,
    app_theme: state.appThemeReducer.theme
  }
}

const mapDispatchToProps = {
  saveUserInfo
}

export default connect(mapStateToProps, mapDispatchToProps)(CheckOut)

// export default function CheckOut(navigation) {

//   const [amount, setamount] = useState(0)
//   const [data, setdata] = useState(null)
//   const [session, setsession] = useState(null)
//   const [processed, setprocessed] = useState(false)

//   const init = async () => {
//     const SESSION = await DB.session()
//     await setdata(navigation.route.params?.data)
//     await setamount(navigation.route.params?.amount)
//     await setsession(SESSION)
//   }

//   const onCheckOutResult = async (result, message) => {
//     // navigation.route.params.onBack(result, message)
//     // navigation.navigation.goBack()
//     Toast.show({
//       text: "Transaction " + message,
//       buttonText: "",
//       duration: 3000
//     })
//     if(result == "success"){
//       navigation.navigation.reset({
//         index: 0,
//         routes: [ { name: 'Main' } ],
//       })
//     }else{
//       navigation.navigation.goBack()
//     }
//   }

//   const onSuccess = () => {

//     if(data.type == 'add'){
//       navigation.route.params?.onBack()
//       return;
//     }

//     Platform.OS == 'ios' ? setTimeout(() => {
//       Alert.alert(
//         'Transaction Completed!',
//         `You have successfully paid ${parseFloat(amount).toFixed(2)} points from your credit card \n**** **** **** ${data.card_number}.`,
//         [
//           {
//           text: "OK",
//           onPress: () => {
//             navigation.navigation.reset({
//               index: 0,
//               routes: [ { name: 'Main' } ],
//             })
//           }
//           },
//         ]
//         )
//     }, 700) : 
//     null
//   }

//   useEffect(() => {
//     init()
//   }, [])
  
//   const onBackPress = () => {
//     return true
//   }

//   useEffect(() => {
//     BackHandler.addEventListener('hardwareBackPress', onBackPress)
//     return () => {
//       BackHandler.removeEventListener('hardwareBackPress', onBackPress)
//     }
//   }, [])

//   return (
//     <Container>
//     <SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
//       {!processed ? <WebView
//         originWhitelist={['*']}
//         source={{ uri: data ? data?.redirectUrl : '' }}
//         style={{
//           backgroundColor: 'transparent',
//           width: Theme.screen.w,
//           height: Theme.screen.h,
//           padding: 15
//         }}
//         onNavigationStateChange={(webViewState) => {
//           // console.log("CHECKOUT FINAL RESULT", webViewState.url)
//           let url = webViewState.url
//           if(url.includes('/success') && !processed){
//             setprocessed(true)
//             // onCheckOutResult('success','success') // REMOVE THIS
//             REQUEST('topup', 'post', {
//               Authorization: session.token,
//               card_number: session.user.card_number
//             }, {}, {
//               amount: amount
//             }, function(res){
//               // onCheckOutResult('success','success')
//               onSuccess()
//               navigation.navigation.goBack()
//             }, function(error){
//               onCheckOutResult('error','failed because ' + error)
//             })
//           }else if(url.includes('/failure')){
//             alert("Failed")
//             // onCheckOutResult('failed', 'failed')
//           }else if(url.includes('/cancel')){
//              alert("Cancelled")
//             // onCheckOutResult('cancelled', 'cancelled')
//           }
//         }}
//       /> : null}
//     </SafeAreaView>
//     </Container>
//   )
// }