import * as React from 'react';
import {useState, useEffect} from 'react';
import { connect } from "react-redux";
import { SafeAreaView, ScrollView, TouchableOpacity, Button, View, Text, Image } 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 Elements from '../../../components/elements.js';
import DB from '../../../components/storage/';
import REQUEST from '../../../components/api/';
import CustomSafeArea from '../../../components/safeArea.component';


class ApplyCardD extends React.PureComponent {

  constructor(props) {
    super(props)
  }

  state = {
    Cards: [],
    loading: false,
    connection: false,
  }

  componentDidMount() {
    this.initData()
  }

  componentWillUnmount() {

  }

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

  init = async () => {
    this.setState({ loading: true, connection: true })
    const SESSION = await DB.session()
    await REQUEST("loyalty_cards", "get", {
        Authorization: SESSION.token,
      }, {}, {}, 
      async (res) => {
        if(res.status == 1 && res.data.length > 0) {
          this.setState({ Cards: res.data, loading: false })
        } else {
          this.setState({ loading: false })
        }
      }, function(error){  
        this.setState({ loading: false })
    })
  }

  renderCards = () => {
    return this.state.Cards.map((data, index) => {
      return (
        <TouchableOpacity onPress={() => {
          this.props.navigation.navigate("ApplyCardDetails", data)
        }} key={index} style={{ flexBasis: '45%', width: '50%', height: 90, margin: 2, justifyContent:'center', alignItems:'center'}}>
          <Image source={{uri: data.image}} style={{width: '100%', height: 90, borderRadius: 15, resizeMode:'stretch'}}/>
        </TouchableOpacity>
      )
    })
  }

  render() {
    if(!this.state.connection){
      return (
        <CustomSafeArea>
          <Elements.loader visible={this.state.loading} />
          <CustomHeader title="Apply Card" menu={false} back={true} backscreen="Login" navigation={this.props.navigation} />
          <Elements.nointernet 
            message="No internet found. Please check your internet connection." 
            buttonText="Try Again" 
            onPress={() => this.initData()}
          />
        </CustomSafeArea>
      )
    }
  
    return (
      <CustomSafeArea>
        <Elements.loader visible={this.state.loading} />
        <CustomHeader title="" menu={false} back={true} backscreen="Login" navigation={this.props.navigation} />
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
          {this.state.Cards.length > 0 ? (
            <ScrollView 
              style={{ flex: 1 }}
              showsHorizontalScrollIndicator={false}
              showsVerticalScrollIndicator={false}
              bounces={false}>
              <View style={{ flex: 0.2, justifyContent: 'center', alignItems: 'center', padding: 20 }}>
                <Text style={{ marginBottom: 13, fontSize: 22, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontWeight: 'bold'}}>Choose a Card</Text>
                <Text style={{ fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, width: '85%', textAlign: 'center'}}>Select your preferred card type</Text>
              </View>
              <View style={{ flex: 1 }}>
                <View style={{padding: 30, flexWrap: 'wrap', flexDirection: 'row', width: '100%', alignContent: 'center', flex: 1}}>
                  {this.renderCards()}
                </View>
              </View>
            </ScrollView>
          ) : (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
              <Text style={{ marginBottom: 13, fontSize: 22, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontWeight: 'bold'}}>Choose a Card</Text>
              <Text style={{ fontSize: 16, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, width: '85%', textAlign: 'center'}}>Select your preferred card type</Text>
            </View>
          )}
        </View>
      </CustomSafeArea>
    );
  }
}

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

export default connect(mapStateToProps, null)(ApplyCardD)


// export default function ApplyCardD(navigation) {
  
//   const [Cards, setCards] = useState([])
//   const [loading, setloading] = useState(false)
//   const [connection, setconnection] = useState(false)

//   const init = async () => {
//     setloading(true)
//     setconnection(true)
//     const SESSION = await DB.session()
//     await REQUEST("loyalty_cards", "get", {
//         Authorization: SESSION.token,
//       }, {}, {}, 
//       async (res) => {
//         if(res.status == 1 && res.data.length > 0){
//           await setCards(await res.data)
//           setloading(false)
//         }else{
//           console.log(res.message, res.data)
//           setloading(false)
//         }
//       }, function(error){  
//         console.log(error)
//         setloading(false)
//     })
//   }

//   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 renderCards = () => {
//     return Cards.map((data, index) => {
//       return (
//         <TouchableOpacity onPress={() => {
//           navigation.navigation.navigate("ApplyCardDetails", data)
//         }} key={index} style={{ flexBasis: '47%', width: '50%', height: 90, margin: 2, justifyContent:'center', alignItems:'center'}}>
//           <Image source={{uri: data.image}} style={{width: '100%', height: 90, borderRadius: 15, resizeMode:'stretch'}}/>
//         </TouchableOpacity>)
//     })
//   }

//   if(!connection){
//     return (
//       <SafeAreaView style={{flex: 1}}>
//         <Elements.loader visible={loading} />
//         <CustomHeader title="Apply Card" menu={false} back={true} backscreen="Login" navigation={navigation} />
//         <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()
//               }
//             })
//           }}
//         />
//       </SafeAreaView>
//     )
//   }

//   return (
//     <SafeAreaView style={{flex: 1}}>
//       <Elements.loader visible={loading} />
//       <CustomHeader title="" menu={false} back={true} backscreen="Login" navigation={navigation} />
//       <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
//         <Text style={{padding: 15, fontSize: 22, color: Theme.colors.textPrimary, fontWeight: 'bold'}}>Choose a Card</Text>
//         <Text style={{padding: 5, fontSize: 16, color: Theme.colors.textPrimary, width: '85%', textAlign: 'center'}}>Select your preferred card type</Text>
//         <View style={{padding: 30, flexWrap: 'wrap', flexDirection: 'row', width: '100%', alignContent: 'center'}}>
//           {renderCards()}
//         </View>
//         <View style={{padding: 25}}></View>
//       </View>
//     </SafeAreaView>
//   );
// }

/*

  let samplecards = [{
    image: Assets.cards.classic,
    name: "UNIOIL CLASSIC",
    description: "The Unioil Loyalty card rewards you points for every purchase of the cleanest range of high-performance fuel plus bonus for exceeded liters."
  },
  {
    image: Assets.cards.grab,
    id: "123",
    name: "GRAB LOYALTY CARD",
    description: "Exclusive to Grab accredited drivers that rewards 4 points/liter for Gasoline and 2 Points/liter for Diesel."
  },
  {
    image: Assets.cards.ica,
    id: "123",
    name: "ICA - UNIOIL LOYALTY CARD",
    description: "Exclusive to students, alumni and staff of Xavier School that rewards P2 points/liter for Gasoline and 1 point/liter for Diesel"
  },
  {
    image: Assets.cards.xavier,
    name: "XAVIER - UNIOIL LOYALTY CARD",
    description: "Exclusive for students, alumni and staff of Xavier School that rewards P2 points/liter for Gasoline and 1 point/liter for Diesel"
  }]

  */