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 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 from '../../components/storage/';
import REQUEST from '../../components/api/';
import CustomSafeArea from '../../components/safeArea.component.js';


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 init = async () => {
    await setcardnumber(navigation.route.params?.cardnumber)
    await setdeviceUUID(navigation.route.params?.deviceUUID)
    await DB.remove("is_guest")
  }

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

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

  const onAgree = () => {
    setagree(agree == false ? true : false)
    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){
        DB.set("fcmRegistration", "registered", (r) => {}, (e) => console.log(e))
      }, function(err){
        Alert.alert("Information", `\n${err.message}`);
      }, "FCM", "Register")
    }
  }

  const onSubmit = async () => {
    if(valid){
      setloading(true)
      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){

          //MOBILE NUMBER FROM MOBILE API
          let MOBILE = data.data?.mobile_number
          
          //MOBILE NUMBER FROM LOYALTY CMS
          let STMOBILE = data.data?.state_retrieve.mobile
          
          let sessiondata = {
            birthdate: formatbday,
            card_number: cardnumber,
            lcard_uuid: data.data?.lcard_uuid,
            mobile_number: MOBILE != STMOBILE ? STMOBILE : MOBILE
          }

          setloading(false)
          DB.setsession(sessiondata, function(res){
            navigation.navigation.navigate("LoginSendOTP", {
              lcard_uuid: data.data?.lcard_uuid,
              mobile_number: MOBILE != STMOBILE ? STMOBILE : MOBILE
            })
          }, function(error){
            console.log(error)
          })
        }else{
          setloading(false)
          if(Platform.OS == 'ios'){
            setTimeout(() => {
              Alert.alert("Information", '\n' + data.message)
            }, 700)
          }else{
            Alert.alert("Information", '\n' + data.message)
          }          
        }
      }, function(error){
        setloading(false)
        console.log(error)
      }, "Login", "Submit")
    }
  }

  return (
    <CustomSafeArea>
      <Elements.loader visible={loading} />
    
      <CustomHeader title="" menu={false} back={true} backscreen={navigation.route.params?.screen ? navigation.route.params?.screen : "Login"} 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.navigate("Login")} 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)
              }} 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: "LoginBirthday"})}>
                  <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 => {
                if(state.isConnected){
                  onSubmit()
                }else{
                  Elements.nointernet2(this.props)
                }
              })
            }} 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)}
        textColor={navigation.app_theme?.theme.colors.text}
        isDarkMode={navigation.app_theme?.theme.dark}
        modalBackgroundColor={navigation.app_theme?.theme.colors.border} 
        onConfirm={(selectedDate) => {
          setbirthdate(selectedDate ? moment(selectedDate).format("MMMM DD, YYYY") : birthdate != null ? birthdate : null)
          setdatepicker(false)
        }}
        onCancel={() => setdatepicker(false)}
      />
    </CustomSafeArea>
  );
}

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

export default connect(mapStateToProps, null)(LoginBirthday);