import * as React from 'react';
import { useState, useEffect, useCallback, useContext } from 'react';
import { connect } from "react-redux";
import { SafeAreaView, ScrollView, Linking,  Button, View, Text, TouchableOpacity, RefreshControl, Platform } from 'react-native';
import {useNetInfo} from "@react-native-community/netinfo";
// import NetInfo from "@react-native-community/netinfo";
import NetInfo from "../../../components/netstatus";
import CustomHeader from '../../../components/header.js';
import Assets from '../../../components/assets.manager.js';
import Theme from '../../../components/theme.style.js';
import Icon from '../../../components/icons.js';
import Elements from '../../../components/elements.js';
import REQUEST from '../../../components/api/';
import DB from '../../../components/storage/';
import CustomSafeArea from '../../../components/safeArea.component';

class MyTransactions extends React.Component {

  constructor(props) {
    super(props)
    this.navigate = props.navigation.navigation.navigate
  }

  state = {
    connected: false,
    loading: false,
    transactions: []
  }

  componentDidMount() {
    this.initTransactions()
    console.log("WOOOOOOOW", this.props)
  }

  componentWillUnmount() {

  }

  initTransactions = async () => {
    NetInfo.netstatus(isConnected => {
      if(isConnected){
        this.init()
      } else {
        Elements.nointernet2()
      }
    })
  }

  init = async () => {
    const SESSION = await DB.session()
    this.setState({ connected: true, loading: true })
    await REQUEST("transactions", "get", {
        Authorization: SESSION.token,
        card_number: SESSION.user.card_number 
      }, {}, {}, (data) => {
        this.setState({ transactions: data.data, loading: false })
      }, (error) => {  
        this.setState({ loading: false })
      }
    )
  }

  renderTransactions = () => {
    return this.state.transactions.map((data, index) => {
      return (<Elements.transaction 
                data={data} 
                textColor={this.props.app_theme?.theme.colors.text}
                isDarkMode={this.props.app_theme?.theme.dark}
                cardBackgroundColor={this.props.app_theme?.theme.colors.border}
                onPress={() => this.navigate("TransactionDetails", {data: data, onBackPress: () => this.init()})} 
                key={index} />)
    });
  }

  render() {
    if(!this.state.connected){
      return (
        <View style={{flex: 1}}>
          <Elements.nointernet 
            message="No internet found. Please check your internet connection." 
            buttonText="Try Again" 
            onPress={() => this.init()}
          />
        </View>
      )
    }

    return (
      <CustomSafeArea>
        <ScrollView
          style={{ backgroundColor: this.props.app_theme?.theme.colors.background }}
          showsHorizontalScrollIndicator={false}
          contentContainerStyle={{ flexGrow: 1 }}
          refreshControl={
            <RefreshControl refreshing={this.state.loading} onRefresh={() => this.init()} />
          }>
          {this.state.transactions.length == 0 ? 
            <View style={{flex: 10, justifyContent: 'center', alignItems: 'center'}}>
              <Text style={{width: '70%', textAlign: 'center', color: this.props.app_theme?.theme.colors.text}}>There's nothing here.</Text>
              <Text style={{width: '70%', textAlign: 'center', color: this.props.app_theme?.theme.colors.text}}>You have made no transactions yet.</Text>
            </View>
            : 
            <View>
              <View style={{paddingVertical: 15, alignItems: 'center'}}>
                <Text style={{padding: 15, width: '100%', textAlign: 'center', color: this.props.app_theme?.theme.colors.text}}>
                  Only your last 5 transactions can be viewed. For your complete transaction history please go to 
                  <Text style={{color: Theme.colors.primary, textDecorationLine: 'underline'}} onPress={() => {
                      let url = 'https://unioil.com/loyalty'
                      Linking.canOpenURL(url).then(supported => {
                        if (!supported) {
                          console.log('Cant handle url')
                          alert("URL Not Supported")
                        } else {
                          return Linking.openURL(url)
                        }
                      }).catch(err => {
                        console.error('An error occurred', err)
                      })
                    }}>
                      &nbsp;unioil.com/loyalty
                  </Text>
                </Text>
              </View>
              <View>{this.renderTransactions()}</View>
            </View>
            }
          <View style={{flex: 1, height: 30}}></View>
        </ScrollView>
      </CustomSafeArea>
    );
  }
}

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

export default connect(mapStateToProps, null)(MyTransactions)

// export default function MyTransactions({navigation}) {

//   const [connected, setconnected] = useState(false)
//   const navigate = navigation.navigation.navigate;
//   const [loading, setloading] = useState(false);
//   const [transactions, settransactions] = useState([]);

//   const init = async () => {

//     const SESSION = await DB.session()
//     const USERPROFILE = await DB.profile()
//     setconnected(true)
//     setloading(true)
//     await REQUEST("transactions", "get", {
//         Authorization: SESSION.token,
//         card_number: SESSION.user.card_number 
//       }, {}, {}, function(data){
//         settransactions(data.data)
//         setloading(false)
//       }, function(error){  
//         console.log(error)
//     })
//     console.log("transactions", transactions)
//   }

//   useEffect(() => {
//     NetInfo.fetch().then(state => {
//       console.log("Connection type", state.type);
//       console.log("Is connected?", state.isConnected);
//       if(state.isConnected){
//         init()
//       }else{
//         Elements.nointernet2()
//       }
//     })
//   }, [])

//   const renderTransactions = () => {
//     return transactions.map((data, index) => {
//       console.log(data)
//       return <Elements.transaction data={data} onPress={() => navigate("TransactionDetails", {data: data, onBackPress: () => init()})} key={index} />
//     });
//   }

//   if(!connected){
//     return (
//       <View style={{flex: 1}}>
//         <Elements.nointernet 
//           message="No internet found. Please check your internet connection." 
//           buttonText="Try Again" 
//           onPress={() => {
//             NetInfo.fetch().then(state => {
//               console.log("Connection type", state.type);
//               console.log("Is connected?", state.isConnected);
//               if(state.isConnected){
//                 init()
//               }else{
//                 Elements.nointernet2()
//               }
//             })
//           }}
//         />
//       </View>
//     )
//   }

//   return (
//     <SafeAreaView style={{flex: 1}}>
//       <ScrollView
//         showsHorizontalScrollIndicator={false}
//         // showsVerticalScrollIndicator={false}
//         contentContainerStyle={{
//           flexGrow: 1,
//         }}
//         refreshControl={
//           <RefreshControl refreshing={loading} onRefresh={init} />
//         }
//       >
//         {/* <View style={{flex: 1, height: '5%'}}></View> */}
//       {transactions.length == 0 ? 
//         <View style={{flex: 10, justifyContent: 'center', alignItems: 'center'}}>
//           <Text style={{width: '70%', textAlign: 'center'}}>There's nothing here.</Text>
//           <Text style={{width: '70%', textAlign: 'center'}}>You have made no transactions yet.</Text>
//         </View>
//        : 
//         <View>
//           <View style={{paddingVertical: 15, alignItems: 'center'}}>
//             <Text style={{padding: 15, width: '100%', textAlign: 'center'}}>
//               Only your last 5 transactions can be viewed. For your complete transaction history please go to 
            
//             <Text style={{color: Theme.colors.primary, textDecorationLine: 'underline'}} onPress={() => {
//                 let url = 'https://unioil.com/loyalty'
//                 Linking.canOpenURL(url).then(supported => {
//                   if (!supported) {
//                     console.log('Cant handle url')
//                     alert("URL Not Supported")
//                   } else {
//                     return Linking.openURL(url)
//                   }
//                 }).catch(err => {
//                     console.error('An error occurred', err)
//                 })
//               }}>
//                 &nbsp;unioil.com/loyalty
//             </Text>
//             </Text>
            
//           </View>
//           <View>{renderTransactions()}</View>
//         </View>
//        }
//         <View style={{flex: 1, height: 30}}></View>
//       </ScrollView>
//     </SafeAreaView>
//   );
// }

/*


  // const transactions = [
  //   {
  //     transactionID: "12345",
  //     date: "13 Feb 2020, 04:27 PM",
  //     station: "APP",
  //     total: "5,000.00",
  //     earned: "5,000.00",
  //     redeemed: "0.00",
  //     rate: 1,
  //     items: [{
  //       item: 'PREPAID POINTS',
  //       quantity: 1,
  //       price: '5,000.00'
  //     }]
  //   },
  //   {
  //     transactionID: "1367",
  //     date: "13 Feb 2020, 01:57 PM",
  //     station: "UNIOIL-TESTER",
  //     total: "2,388.01",
  //     earned: "1.78",
  //     redeemed: "2,000.00",
  //     rate: 5,
  //     items: [{
  //       item: "EUROS MOGAS91",
  //       quantity: 6.65,
  //       price: "45.10"
  //     },{
  //       item: "UN MOTORSPORT 4T SJ 20W-50 (12X800)",
  //       quantity: 1,
  //       price: "134.00"
  //     },{
  //       item: "UN Gmax SG/CD 20W-50 (6x4)",
  //       quantity: 1,
  //       price: "588.00"
  //     },{
  //       item: "UN DELUX CH-4/CF/CF-2/SJ 15W-40 (6x4)",
  //       quantity: 1,
  //       price: "646.00"
  //     },{
  //       item: "UN Gmax SG/CD 20W-50 ()",
  //       quantity: 6.65,
  //       price: "45.10"
  //     }]
  //   },
  //   {
  //     transactionID: "23435",
  //     date: "13 Feb 2020, 04:27 PM",
  //     station: "APP",
  //     total: "5,000.00",
  //     earned: "5,000.00",
  //     redeemed: "0.00",
  //     rate: 2,
  //     items: []
  //   },
  //   {
  //     transactionID: "46457",
  //     date: "13 Feb 2020, 04:27 PM",
  //     station: "APP",
  //     total: "5,000.00",
  //     earned: "5,000.00",
  //     redeemed: "0.00",
  //     rate: 0,
  //     items: []
  //   },
  //   {
  //     transactionID: "78978",
  //     date: "13 Feb 2020, 04:27 PM",
  //     station: "APP",
  //     total: "5,000.00",
  //     earned: "5,000.00",
  //     redeemed: "0.00",
  //     rate: 0,
  //     items: []
  //   },
  //   {
  //     transactionID: "24234",
  //     date: "13 Feb 2020, 04:27 PM",
  //     station: "APP",
  //     total: "5,000.00",
  //     earned: "5,000.00",
  //     redeemed: "0.00",
  //     rate: 0,
  //     items: []
  //   }
  // ]


*/