import * as React from 'react';
import { useState, useEffect, useRef } from 'react';
import { connect } from "react-redux";
import { Platform, StyleSheet, SafeAreaView, TouchableOpacity, Button, View, Text, Image, TextInput, Alert, Modal } 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 Elements from '../../components/elements.js';
import Theme from '../../components/theme.style.js';
import Icon from '../../components/icons.js';
import moment from 'moment';
import DB, { setsession } from '../../components/storage/';
import REQUEST from '../../components/api/';
import CustomSafeArea from '../../components/safeArea.component';

class LoginBirthday extends React.Component {

  constructor(props) {
    super(props)
  }

  state = {
    loading: false,
    datepicker: false,
    focus: false,
    activeInput: null,
    agree: false,
    birthdate: "",
    cardnumber: null,
    deviceUUID: null,
    valid: false,
  }

  componentDidMount() {
    this.init()
  }

  componentWillUnmount() {

  }

  init = async () => {
    this.setState({ cardnumber: this.props.route.params?.cardnumber, deviceUUID: this.props.route.params?.deviceUUID })
  }

  setCardNumber = () => {
    this.setState({ valid: cardnumber.length == 15 ? true : false })
  }

  onAgree = () => {
    this.setState({ agree: this.state.agree == false ? true : false })
    if(this.state.cardnumber && !this.state.agree && this.state.birthdate){
      this.setState({ valid: true })
    }else{
      this.setState({ valid: false })
    }
  }

  requestOTP = async (lcard_uuid, mobile_number, successCallback, errorCallback) => {
    this.setState({ loading: true })
    let params = `lcard_uuid=${lcard_uuid}&mobile=${Theme.formatter.PMBL(mobile_number)}&is_resend=false`;
    await REQUEST("requestOTP", "get", {}, params, {}, 
        function(res){
            successCallback(res)
        }, function(error){
            errorCallback(error)
        }
    )
  }

  submitForm = () => {
    NetInfo.netstatus(isConnected => {
      if(isConnected) {
        this.onSubmit(success => {
          this.requestOTP(success.lcard_uuid, success.mobile_number, onSuccess => {
            this.setState({ loading: false })
            console.log(onSuccess, this.props)
            if(onSuccess.status == 1) {
              this.props.navigation.navigate("AccountOtp", {
                data: success, 
                callback: this.props.route.params?.callback, 
                type: this.props.route.params?.type
              })
            }
          }, onError => {
            this.setState({ loading: false })
          })
        }, error => {
          this.setState({ loading: false })
        })
      } else {
        Elements.nointernet2()
      }
    })
  }

  onSubmit = async (successCallback, errorCallback) => {
    if(this.state.valid){
      this.setState({ loading: true })
      let formatbday = Theme.formatter.DT4API(this.state.birthdate)
      await REQUEST("login", "post", {}, {}, {
        birthdate: formatbday,
        deviceUUID: this.state.deviceUUID,
        card_number: this.state.cardnumber
      }, (data) => {
        if(data.data?.lcard_uuid && data.status == 1) {
          let sessiondata = {
            birthdate: formatbday,
            card_number: this.state.cardnumber,
            lcard_uuid: data.data?.lcard_uuid,
            mobile_number: data.data?.mobile_number
          }
          successCallback(sessiondata)
          
          // DB.setsession(sessiondata, (res) => {
          //   successCallback(sessiondata)
          // }, (error) => {
          //   errorCallback(error)
          // })
        } else {
          this.setState({ loading: false })
          if(Platform.OS == 'ios'){
            setTimeout(() => {
              Alert.alert("Error", '\n' + data.message)
            }, 700)
          }else{
            Alert.alert("Error", data.message)
          }   
          errorCallback()       
        }
        console.log("RESPONSE: " , data.message)
      }, (error) => { 
        this.setState({ loading: false })
        errorCallback(error)
        console.log(error)
      })
    }
  }

  render() {
    return (
      <CustomSafeArea>
        <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} />
        <CustomHeader title="" menu={false} back={true} onBackPress={() => this.props.navigation.goBack()} navigation={this.props.navigation} />
        <View style={{flex: 1}}> 
          <View style={{width: '100%', height: 90, alignSelf: 'center', marginTop: 50}}>
            <Image source={Assets.logo.unioil} style={{width: '100%', height: '85%', resizeMode: 'contain'}} />
          </View>
          <View style={{flex: 1, alignItems: 'center'}}>
            <Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>Login</Text>
            <Text style={{alignSelf: 'center', marginTop: 5, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
              Have an activated card?
            </Text>
            <View style={{flexDirection: 'row', width: '80%', marginTop: 20, alignItems: 'center'}}> 
              <View style={{flex: 1, flexDirection: 'row', padding: 20, paddingVertical: 15, borderColor: 'lightgray', borderWidth: 1}}>
                <Text style={{flex: 4, alignSelf: 'flex-end', textAlign: 'center', fontSize: 17, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.darkGray}}>{this.state.cardnumber}</Text>
                <TouchableOpacity onPress={() => this.props.navigation.goBack()} style={{flex: 0.4, alignSelf: 'flex-end', textAlign: 'right'}}>
                  <Icon.AntDesign name="close" size={20} color={Theme.colors.darkGray} />
                </TouchableOpacity>
              </View>
            </View>
            <View style={{flexDirection: 'row', width: '80%', marginTop: 15, alignItems: 'center'}}> 
              <View style={{flex: 1}}>
                <TouchableOpacity onPress={() => this.setState({ datepicker: true })}>
                  <Text style={{fontSize: 14, color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.darkGray}}>Birthday</Text>
                  <View style={{paddingTop: 15, paddingBottom: 5,borderColor: 'gray',borderBottomWidth: 1}}>
                    <Text style={{fontSize: 17, fontFamily: 'Arial', color: (this.props.app_theme?.theme.dark && this.state.birthdate) ? this.props.app_theme?.theme.colors.text : this.state.birthdate ? Theme.colors.textPrimary : Theme.colors.darkGray}}>{this.state.birthdate || "Select Date"}</Text>
                  </View>
                </TouchableOpacity>
              </View>
            </View>
            <View style={{flexDirection: 'row', width: '80%', marginTop: 15, alignItems: 'center'}}> 
              <TouchableOpacity onPress={() => this.state.birthdate ? this.onAgree() : null} style={{flex: 0, paddingTop: 15}}>
                {!this.state.agree ? <Icon.Feather color={this.props.app_theme?.theme.colors.text} name="square" size={20} /> : <Icon.AntDesign name="checksquare" color={Theme.colors.accent} size={20} />}
              </TouchableOpacity>
              <View style={{flex: 1, paddingTop: 10, paddingHorizontal: 10}}>
                <View style={{flexDirection: 'row', paddingTop: 5}}>
                  <Text style={{ color: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.text : Theme.colors.textPrimary}}>I agree to </Text>
                  <TouchableOpacity onPress={() => this.props.navigation.navigate("TermsConditions", {screen: "back"})}>
                    <Text style={{color: Theme.colors.primary}}>Unioil's Data Privacy Policy.</Text>
                  </TouchableOpacity>
                </View>
              </View>
            </View>
            <View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 0}}>
              <TouchableOpacity onPress={() => this.submitForm()} disabled={!this.state.valid} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 60, paddingBottom: 15, borderRadius: 10, backgroundColor: this.state.valid ? Theme.colors.primary : this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.border : Theme.colors.primary + "15"}}>
                <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Next</Text>
              </TouchableOpacity>
            </View>
          </View>
        </View>
        <Elements.CustomDatePicker 
          visible={this.state.datepicker}
          date={this.state.birthdate ? new Date(this.state.birthdate) : new Date(Date.now())} 
          textColor={this.props.app_theme?.theme.colors.text}
          isDarkMode={this.props.app_theme?.theme.dark}
          modalBackgroundColor={this.props.app_theme?.theme.colors.border}
          onConfirm={(selectedDate) => {
            this.setState({ birthdate: selectedDate ? moment(selectedDate).format("DD MMM YYYY") : this.state.birthdate != null ? this.state.birthdate : null, datepicker: false })
          }}
          onCancel={() => this.setState({ datepicker: false })}
        />
      </CustomSafeArea>
    );
  }
}

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

export default connect(mapStateToProps, null)(LoginBirthday)

// export default function LoginBirthday(navigation) {

//   var pickerRef = useRef()
//   const [loading, setloading] = useState(false);
//   const [datepicker, setdatepicker] = useState(false);
//   const [focus, setfocus] = useState(false);
//   const [activeInput, setActiveInput] = useState(null);
//   const [agree, setagree] = useState(false);

//   const [birthdate, setbirthdate] = useState("");
//   const [cardnumber, setcardnumber] = useState(null);
//   const [deviceUUID, setdeviceUUID] = useState(null);
//   const [valid, setvalid] = useState(false);

//   // const cardnumber = navigation.route.params.cardnumber || ""

//   const init = async () => {
//     await setcardnumber(navigation.route.params?.cardnumber)
//     await setdeviceUUID(navigation.route.params?.deviceUUID)
//   }

//   useEffect(() => {
//     init()
//   }, [])

//   const setCardNumber = () => {
//     setvalid(cardnumber.length == 15 ? true : false)
//   }

//   const onAgree = () => {
//     setagree(agree == false ? true : false)
//     // console.log(cardnumber, agree, birthdate)
//     if(cardnumber && !agree && birthdate){
//       setvalid(true)
//     }else{
//       setvalid(false)
//     }
//   }

//   const FCMRegister = async () => {
//     let fcmRegistration = await DB.get("fcmRegistration")
//     let fcmToken = await DB.get("fcmToken")
//     if(fcmRegistration == "new"){
//       REQUEST("fcm_registration", "post", {}, {}, {
//         token: fcmToken,
//         c_number: cardnumber,
//         notifs: ""
//       }, function(res){
//         console.log(res)
//         DB.set("fcmRegistration", "registered", (r) => console.log(r), (e) => console.log(e))
//       }, function(error){
//         console.log(error)
//       })
//     }
//   }

//   const requestOTP = async (lcard_uuid, mobile_number, successCallback, errorCallback) => {
//     setloading(true)
//     let params = `lcard_uuid=${lcard_uuid}&mobile=${Theme.formatter.PMBL(mobile_number)}&is_resend=false`;
//     await REQUEST("requestOTP", "get", {}, params, {}, 
//         function(res){
//             successCallback(res)
//         }, function(error){
//             errorCallback(error)
//         }
//     )
//   }

//   const onSubmit = async () => {

//     if(valid){
//       setloading(true)
//       console.log("BDAY",birthdate)
//       console.log("UUID",deviceUUID)
//       console.log("cn",cardnumber)
//       // let formatbday = new moment(new Date(birthdate)).format("YYYY-MM-DD")
//       let formatbday = Theme.formatter.DT4API(birthdate)
//       await REQUEST("login", "post", {}, {}, {
//         birthdate: formatbday,
//         deviceUUID: deviceUUID,
//         card_number: cardnumber
//       }, function(data){
//         if(data.data?.lcard_uuid && data.status == 1){
//           let sessiondata = {
//             birthdate: formatbday,
//             card_number: cardnumber,
//             lcard_uuid: data.data?.lcard_uuid,
//             mobile_number: data.data?.mobile_number
//           }
          
//           DB.setsession(sessiondata, function(res){
//             requestOTP(sessiondata.lcard_uuid, sessiondata.mobile_number, success => {
//               setloading(false)
//               if(success.status == 1) {
//                 navigation.navigation.navigate("AccountOtp", {
//                   data: sessiondata, 
//                   callback: navigation.route.params?.callback, 
//                   type: navigation.route.params?.type
//                 })
//               }
//             }, error => {
//               setloading(false)
//             })
//             // navigation.navigation.navigate("AccountSendOtp", {data: data.data, callback: navigation.route.params?.callback, type: navigation.route.params?.type})
//           }, function(error){
//             console.log(error)
//           })
//         }else{
//           setloading(false)
//           if(Platform.OS == 'ios'){
//             setTimeout(() => {
//               Alert.alert("Error", '\n' + data.message)
//             }, 700)
//           }else{
//             Alert.alert("Error", data.message)
//           }          
//         }
//         console.log("RESPONSE: " , data.message)
//       }, function(error){ 
//         setloading(false) 
//         console.log(error)
//       })
//     }
//   }

//   return (
//     <SafeAreaView style={{flex: 1}}>
//       <Elements.loaderView 
//         title="Validating"
//         message="Please wait..."
//         color={Theme.colors.black}
//         visible={loading} />
//       <CustomHeader title="" menu={false} back={true} onBackPress={() => navigation.navigation.goBack()} navigation={navigation} />
//       <View style={{flex: 1}}> 
//         <View style={{width: '100%', height: 90, alignSelf: 'center', marginTop: 50}}>
//           <Image source={Assets.logo.unioil} style={{width: '100%', height: '85%', resizeMode: 'contain'}} />
//         </View>
//         <View style={{flex: 1, alignItems: 'center'}}>
//           <Text style={{alignSelf: 'center', fontFamily: 'Arial', fontWeight: 'bold', fontSize: 25, padding: 15, color: Theme.colors.textPrimary}}>Login</Text>
//           <Text style={{alignSelf: 'center', marginTop: 5, color: Theme.colors.textPrimary, fontFamily: 'Arial', fontSize: 16}}>
//             Have an activated card?
//           </Text>
//           <View style={{flexDirection: 'row', width: '80%', marginTop: 20, alignItems: 'center'}}> 
//             <View style={{flex: 1, flexDirection: 'row', padding: 20, paddingVertical: 15, borderColor: 'lightgray', borderWidth: 1}}>
//               <Text style={{flex: 4, alignSelf: 'flex-end', textAlign: 'center', fontSize: 17, color: Theme.colors.darkGray}}>{cardnumber}</Text>
//               <TouchableOpacity onPress={() => navigation.navigation.goBack()} style={{flex: 0.4, alignSelf: 'flex-end', textAlign: 'right'}}>
//                 <Icon.AntDesign name="close" size={20} color={Theme.colors.darkGray} />
//               </TouchableOpacity>
//             </View>
//           </View>
          
//           <View style={{flexDirection: 'row', width: '80%', marginTop: 15, alignItems: 'center'}}> 
//             <View style={{flex: 1}}>
//               <TouchableOpacity onPress={() => {
//                 setdatepicker(true)
//                 // console.log(pickerRef)
//                 // pickerRef.showDatePicker()
//               }} style={{}}>
//                 <Text style={{fontSize: 14, color: Theme.colors.darkGray}}>Birthday</Text>
//                 <View style={{paddingTop: 15, paddingBottom: 5,borderColor: 'gray',borderBottomWidth: 1}}>
//                   <Text style={{fontSize: 17, fontFamily: 'Arial', color: birthdate ? Theme.colors.textPrimary : Theme.colors.darkGray}}>{birthdate || "Select Date"}</Text>
//                 </View>
//               </TouchableOpacity>
//             </View>
//           </View>
//           <View style={{flexDirection: 'row', width: '80%', marginTop: 15, alignItems: 'center'}}> 
//             <TouchableOpacity onPress={birthdate ? onAgree : null} style={{flex: 0, paddingTop: 15}}>
//               {!agree ? <Icon.Feather name="square" size={20} /> : <Icon.AntDesign name="checksquare" color={Theme.colors.accent} size={20} />}
//             </TouchableOpacity>
//             <View style={{flex: 1, paddingTop: 10, paddingHorizontal: 10}}>
//               <View style={{flexDirection: 'row', paddingTop: 5}}>
//                 <Text style={{ color: Theme.colors.textPrimary}}>I agree to </Text>
//                 <TouchableOpacity onPress={() => navigation.navigation.navigate("TermsConditions", {screen: "back"})}>
//                   <Text style={{color: Theme.colors.primary}}>Unioil's Data Privacy Policy.</Text>
//                 </TouchableOpacity>
//               </View>
//             </View>
//           </View>

//           <View style={{alignItems: 'center', justifyContent: 'flex-end', padding: 20, marginTop: 0}}>
//             <TouchableOpacity onPress={() => {
//               NetInfo.fetch().then(state => {
//                 console.log("Connection type", state.type);
//                 console.log("Is connected?", state.isConnected);
//                 if(state.isConnected){
//                   onSubmit()
//                 }else{
//                   Elements.nointernet2()
//                 }
//               })
//             }} disabled={!valid} style={{padding: 20, paddingTop: 15, width: Theme.screen.w - 60, paddingBottom: 15, borderRadius: 10, backgroundColor: valid ? Theme.colors.primary : Theme.colors.primary + "15"}}>
//               <Text style={{fontSize: 16, fontFamily: 'Arial', textAlign: 'center', color: '#fff'}}>Next</Text>
//             </TouchableOpacity>
//           </View>

//         </View>
//       </View>

//       <Elements.CustomDatePicker 
//         visible={datepicker}
//         date={birthdate ? new Date(birthdate) : new Date(Date.now())} 
//         onConfirm={(selectedDate) => {
//           // console.warn("A date has been picked: ", selectedDate)
//           setbirthdate(selectedDate ? moment(selectedDate).format("DD MMM YYYY") : birthdate != null ? birthdate : null)
//           setdatepicker(false)
//         }}
//         onCancel={() => setdatepicker(false)}
//       />

//       {/* <Modal
//         animationType="none"
//         transparent={true}
//         visible={datepicker}
//         style={{flex: 1, height: 400}}
//       >
//         <Content>
//         <TouchableOpacity style={{
//           flex: 1,
//           justifyContent: "center",
//           alignItems: "center",
//           backgroundColor: '#00000090',
//           padding: 30}}
//         >
//           <TouchableOpacity activeOpacity={1} style={{backgroundColor: '#fff', padding: 20, width: '95%'}}>
//             <DateTimePicker
//               testID="BirthDate"
//               timeZoneOffsetInMinutes={0}
//               value={birthdate ? new Date(birthdate) : new Date(Date.now())}
//               mode={"date"}
//               is24Hour={true}
//               display="spinner"
//               style={{ height: 220, backgroundColor: "#fff"}}
//               onChange={(event, selectedDate) => {
//                 setbirthdate(selectedDate ? moment(selectedDate).subtract(1, "days").format("DD MMM YYYY") : birthdate != null ? birthdate : null)
//               }}
//             />
//             <DatePicker
//             // defaultDate={new Date(2018, 4, 4)}
//             ref={(r) => pickerRef = r}
//             minimumDate={new Date(2018, 1, 1)}
//             maximumDate={new Date(2018, 12, 31)}
//             locale={"en"}
//             timeZoneOffsetInMinutes={undefined}
//             modalTransparent={true}
//             animationType={"fade"}
//             androidMode={"default"}
//             placeHolderText="Select date"
//             textStyle={{ color: "green" }}
//             placeHolderTextStyle={{ color: "#d3d3d3" }}
//             onDateChange={this.setDate}
//             disabled={false}
//             />
//             <View style={{ marginTop: 15, marginBottom: 0, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-end'}}>
//               <TouchableOpacity onPress={() => setdatepicker(false)} style={{padding: 10, marginRight: 5}}>
//                 <Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>CANCEL</Text>
//               </TouchableOpacity>
//               <TouchableOpacity onPress={() => {
//                 setagree(false)
//                 setdatepicker(false)
//               }} style={{padding: 10, marginLeft: 5}}>
//                 <Text style={{color: Theme.colors.accent, fontWeight: 'bold'}}>OK</Text>
//               </TouchableOpacity>
//             </View>
//           </TouchableOpacity>
//         </TouchableOpacity>
//         </Content>
//       </Modal> */}

//       {/* {datepicker ? <DateTimePicker
//         testID="BirthDate"
//         timeZoneOffsetInMinutes={0}
//         value={birthdate ? new Date(birthdate) : new Date(Date.now())}
//         mode={"date"}
//         is24Hour={true}
//         display="spinner"
//         style={{ height: '100%', backgroundColor: "#fff"}}
//         onChange={(event, selectedDate) => {
//           setdatepicker(false)
//           setagree(false)
//           setbirthdate(selectedDate ? moment(selectedDate).format("DD MMM YYYY") : birthdate != null ? birthdate : null)
//         }}
//       /> : null} */}

//     </SafeAreaView>
//   );
// }

const styles = StyleSheet.create({
  input: {
    flex: 1, padding: 0, margin: 5, fontSize: 18, textAlign: 'center', borderBottomColor: Theme.colors.accent, borderBottomWidth: 1.5
  }
});