import * as React from 'react';
import { SafeAreaView, ScrollView, TouchableOpacity, View, Text, Alert } from 'react-native';
import { Avatar } from 'react-native-elements';
import { connect } from "react-redux";
import { saveUserInfo, savePlainUserInfo } from "../../../redux/actions/AppUserInfoActions";
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 ImagePicker from 'react-native-image-picker';
import moment from 'moment';
import DB from '../../../components/storage/';
import REQUEST from '../../../components/api/';
import RNFETCHBLOB from '../../../components/api/file.manager';
import { ContactOptions, ContactOptionsWithParams } from '../../../components/contact.action';
import Utils from './utils';
import CustomSafeArea from '../../../components/safeArea.component';


class EditProfile extends React.PureComponent {

  constructor(props) {
    super(props)
  }

  state = {
    loading: false,
    userProfile: null,
    focused: false,
    editprofileselect: false,
    customerserviceselect: false,
    currentFocus: null,
    opendialog: false,
    currentDialog: null,
    currentphoto: null,
    newphoto: null,
    newmobile: "",
    newemail: null,
    newaddress: null,
    newcity: null,
    vehicleType: null,
    fuelType: null,
    maritalStatus: null,
    gender: null,
    is_deleted: false,
    errors: {},
    deleted: false
  }

  componentDidMount() {
    this.setState({ loading: false, userProfile: this.props.route.params.data })
  }

  componentWillUnmount() {

  }

  onInputFocus = (index) => {
    this.setState({ focused: true, currentFocus: index })
  }

  onSelectPress = (index) => {
    this.setState({ opendialog: true, currentDialog: index })
  }

  getFT = (type) => {
    let types = Assets.fueltypes
    for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
    return ""
  }

  getVT = (type) => {
    let types = Assets.vehicletypes
    for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
    return ""
  }

  getMS = (type) => {
    let types = Assets.civilstatus
    for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
    return ""
  }

  getG = (type) => {
    let types = Assets.gender
    for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
    return ""
  }

  getCN = () => {

  }

  onDeletePhoto = () => {
    this.setState({ is_deleted: true, currentphoto: Assets.logo.profileHolder })
  }

  formatBytes = (bytes, decimals = 2) => {
    if (bytes === 0) return '0 Bytes';

    const k = 1024;
    const dm = decimals < 0 ? 0 : decimals;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

    const i = Math.floor(Math.log(bytes) / Math.log(k));

    return { stringFormat: parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i], decimalFormat: parseFloat((bytes / Math.pow(k, i)).toFixed(dm)), sizeFormat: sizes[i] };
}

  onEditPhoto = () => {
    let options = {
      mediaType: 'photo',
      maxHeight: 1500,
      maxWidth: 1500,
      quality: 0.75
    }
    ImagePicker.launchImageLibrary(options, (response) => {
      let filesize = this.formatBytes(response.fileSize)
      console.log(filesize.stringFormat.includes('KB'))
      if(!filesize.stringFormat.includes('KB') && !filesize.stringFormat.includes('Bytes')) {
        Alert.alert("Error", "Image size too large.")
        return
      }
      if(!response.didCancel){
        if(this.state.is_deleted){
          this.setState({ is_deleted: false, currentphoto: null })
        }
        this.setState({ newphoto: response })
      }
    })
  }

  validateEmail = () => {
    let regEx = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
    return regEx.test(this.state.email)
  }

  FormValidate = async () => {
    let res = {}
    this.setState({ loading: true })
    if(this.state.newemail == ""){
      res = Object.assign(this.state.errors, {email: ["This field is required"]})
    }
    if(this.state.newaddress == "" || this.state.newaddress == null && this.state.userProfile.address == ""){
      res = Object.assign(this.state.errors, {address: ["This field is required"]})
    }
    if(!this.state.vehicleType && this.state.userProfile.vo_code == "0"){
      res = Object.assign(this.state.errors, {vehicleType: ["This field is required"]})
    }
    if(!this.state.fuelType && this.state.userProfile.fueltype_code == "0"){
      res = Object.assign(this.state.errors, {fuelType : ["This field is required"]})
    } 
    this.setState({ errors: res, loading: false })
    return Object.keys(this.state.errors).length > 0 ? false : true
  }

  Body = function() {
    return {
      image: this.state.newphoto ? this.state.newphoto.uri : null,
      mobile: this.state.newmobile,
      email: this.state.newemail,
      address: this.state.newaddress,
      city: this.state.newcity,
      vo_code: this.state.vehicleType ? this.state.vehicleType.value : null,
      fueltype_code: this.state.fuelType ? this.state.fuelType.value : null,
      civilstatus_code: this.state.maritalStatus ? this.state.maritalStatus.value : null,
      gender_code: this.state.gender ? this.state.gender.value : null,
      is_deleted: this.state.is_deleted
    }
  }

  fetchProfileBlob = async (successCallback, errorCallback) => {
    let SESSION = await DB.session()
    let params = { 
      newphoto: this.state.newphoto, 
      userProfile: this.state.userProfile, 
      newmobile: this.state.newmobile, 
      newemail: this.state.newemail, 
      newaddress: this.state.newaddress, 
      newcity: this.state.newcity, 
      vehicleType: this.state.vehicleType, 
      fuelType: this.state.fuelType, 
      maritalStatus: this.state.maritalStatus, 
      gender: this.state.gender, 
      is_deleted: this.state.is_deleted 
    }
    RNFETCHBLOB("update_profile_no_otp", "POST", 
      {Authorization: SESSION.token}, {}, Utils.blobBody(params), 
      (res) => {
        if(res.status == 1) {
          this.updateProfileInBackground(onSuccess => successCallback(onSuccess), onError => errorCallback(onError))
        } else {
          Utils.responseHandler(res, () => {
            successCallback(res)
          }, (errors) => {
            console.log(errors)
            errorCallback(errors)
          })
        }
    }, (err) => {
      errorCallback(err)
    })
  }

  updateProfileBlob = async (successCallback, errorCallback) => {
    let SESSION = await DB.session()
    let params = { 
      userProfile: this.state.userProfile, 
      newmobile: this.state.newmobile, 
      newemail: this.state.newemail, 
      newaddress: this.state.newaddress, 
      newcity: this.state.newcity, 
      vehicleType: this.state.vehicleType, 
      fuelType: this.state.fuelType, 
      maritalStatus: this.state.maritalStatus, 
      gender: this.state.gender, 
      is_deleted: this.state.is_deleted 
    }
    await REQUEST("update_profile_no_otp", "post", {
      Authorization: SESSION.token,
      "Content-Type": "multipart/form-data",
    }, {}, Utils.formData(params), 
    (res) => {
      if(res.status == 1) {
        this.updateProfileInBackground(onSuccess => successCallback(onSuccess), onError => errorCallback(onError))
      } else {
        Utils.responseHandler(res, () => {
          successCallback(res)
        }, (errors) => {
          console.log(errors)
          errorCallback(errors)
        })
      }
    }, (error) => {
      errorCallback(error)
    })
  }

  responseHandler = (res, responseCallback) => {
    if(res.status == 1){
      setTimeout(() => {
        Alert.alert(
          "Success",
          '\nYour profile is successfully updated\n',
            [{
              text: 'OK', onPress: () => {                    
                responseCallback()
              }
            }]
          );
      }, 700)
    } else {
      setTimeout(() => {
        Alert.alert("Error", res?.email[0]);
      }, 700)
    }
  }

  updateProfileInBackground = async (successCallback, errorCallback) => {
    const SESSION = await DB.session()
    try{
      this.props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number  }).then(res => {
        DB.updateProfile(res, () => {
          successCallback(res) 
        }, (error) => {
          errorCallback(error)
        })
      })
      .catch(error => this.setState({ loading: false }))
    } catch(error) {
      console.log(error)
    }
  }

  SaveNoOtp = async () => {
    this.setState({ loading: true })
    if(this.state.newphoto) {
      this.fetchProfileBlob(success => {
        this.setState({ loading: false })
        if(success.status == 0) {
          this.setState({ errors: success })
        } else {
          this.responseHandler(success, handler => {
            this.props.route.params.onGoBack(success.data)
            this.props.navigation.goBack()
          })
        }
      }, error => {
        this.setState({ loading: false })
        setTimeout(() => {
          if(this.state.newphoto) Alert.alert("Error", "Failed to upload image")
        }, 300)
      })
    } else {
      this.setState({ loading: true })
      this.updateProfileBlob(success => {
        this.setState({ loading: false })
        if(success.status == 0) {
          this.setState({ errors: success })
        } else {
          this.responseHandler(success, handler => {
            this.props.route.params.onGoBack(success.data)
            this.props.navigation.goBack()
          })
        }
      }, error => {
        this.setState({ loading: false })
        setTimeout(() => {
          if(this.state.newphoto) Alert.alert("Error", "Failed to upload image")
        }, 300)
      })
    }
  }

  SaveWithOtp = () => {
    this.props.navigation.navigate("AccountSendOtp", {
      data: {
        lcard_uuid: this.state.userProfile.lcard_uuid, 
        mobile_number: this.state.newmobile.replace("+", "")
      }, 
      type: 'edit', 
      callback: (res) => {
        if(res == "valid") this.SaveNoOtp()
      }, 
    })
  }

  onSubmit = () => {
    this.setState({ focused: false })
    if(this.hasChanges()){
      Alert.alert(
        "Update Profile",
        '\nAre you sure you want to save changes to your profile?\n',
        [{
          text: 'Cancel',
          style: 'cancel',
        },{
          text: 'OK', onPress: async () => {
            let validation = await this.FormValidate()
            if(!validation) return
            if(this.state.newmobile != "" && this.state.newmobile.replace("+", "") != this.state.userProfile.mobile){
              this.SaveWithOtp()
            }else{
              this.SaveNoOtp()
            }
          }
        }],
        {cancelable: true}
      );
    }else{
      this.props.navigation.goBack()
    }
  }

  hasChanges = () => {
    let values = Object.values(this.Body())
    for(var x=0;x<values.length;x++){
      if(values[x] || values[x] == "") return true
    }
    return false
  }

  handleUpdatePhotoOptions = () => {
    Elements.ActionOption({
      options: ['Edit Photo', 'Delete Photo', 'Cancel'],
      functions: [{
        execute: () =>  this.onEditPhoto()
      }, {
        execute: () =>  this.onDeletePhoto()
      }]
    })
  }

  renderProfilePhoto = () => {
    if(this.state.currentphoto) return Assets.logo.profileHolder
    else if(!this.state.currentphoto && this.state.newphoto || this.state.newphoto) return {uri: this.state.newphoto.uri} 
    else if(!this.state.currentphoto && !this.state.newphoto && this.state.userProfile && this.state.userProfile.photo) return {uri: this.state.userProfile.photo}
    else return Assets.logo.profileHolder
  }

  render() {
    return (
      <CustomSafeArea>
          <Elements.loaderView 
            title="Updating Profile"
            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} />
          <Elements.checkboxdialog
            title="Vehicle Type"
            selected={this.state.vehicleType ? this.state.vehicleType.value : this.state.userProfile ? this.state.userProfile.vo_code : 0} 
            shown={this.state.opendialog && this.state.currentDialog == 1 ? true : false}
            textColor={this.props.app_theme?.theme.colors.text}
            isDarkMode={this.props.app_theme?.theme.dark}
            modalBackgroundColor={this.props.app_theme?.theme.colors.border}
            onCancel={() => this.setState({ opendialog: !this.state.opendialog })}
            onSelect={(value, string) => {
              this.setState({ vehicleType: { value: value, string: string }, opendialog: !this.state.opendialog })
            }}
            items={Assets.vehicletypes}
          />
          <Elements.checkboxdialog
            title="Fuel Type"
            selected={this.state.fuelType ? this.state.fuelType.value : this.state.userProfile ? this.state.userProfile.fueltype_code : 0} 
            shown={this.state.opendialog && this.state.currentDialog == 2 ? true : false}
            textColor={this.props.app_theme?.theme.colors.text}
            isDarkMode={this.props.app_theme?.theme.dark}
            modalBackgroundColor={this.props.app_theme?.theme.colors.border}
            onCancel={() => this.setState({ opendialog: !this.state.opendialog })}
            onSelect={(value, string) => {
              this.setState({ fuelType: { value: value, string: string }, opendialog: !this.state.opendialog })
            }}
            items={Assets.fueltypes} 
          />
          <Elements.checkboxdialog
            title="Marital Status"
            selected={this.state.maritalStatus ? this.state.maritalStatus.value : this.state.userProfile ? this.state.userProfile.civilstatus_code : 0} 
            shown={this.state.opendialog && this.state.currentDialog == 3 ? true : false}
            textColor={this.props.app_theme?.theme.colors.text}
            isDarkMode={this.props.app_theme?.theme.dark}
            modalBackgroundColor={this.props.app_theme?.theme.colors.border}
            onCancel={() => this.setState({ opendialog: !this.state.opendialog })}
            onSelect={(value, string) => {
              this.setState({ maritalStatus: { value: value, string: string }, opendialog: !this.state.opendialog })
            }}
            items={Assets.civilstatus} 
          />
          <Elements.checkboxdialog
            title="Gender"
            selected={this.state.gender ? this.state.gender.value : this.state.userProfile ? this.state.userProfile.gender_code : 0} 
            shown={this.state.opendialog && this.state.currentDialog == 4 ? true : false}
            textColor={this.props.app_theme?.theme.colors.text}
            isDarkMode={this.props.app_theme?.theme.dark}
            modalBackgroundColor={this.props.app_theme?.theme.colors.border}
            onCancel={() => this.setState({ opendialog: !this.state.opendialog })}
            onSelect={(value, string) => {
              this.setState({ gender: { value: value, string: string }, opendialog: !this.state.opendialog })
            }}
            items={Assets.gender} 
          />
          
          <CustomHeader 
            title="Edit Profile" 
            menu={false} 
            backscreen="MyProfile" 
            back={true} 
            onBackPress={() => {
              if(this.hasChanges()){
                Alert.alert(
                null,
                'You have an unsaved profile information, are you sure you want to navigate back?\n',
                [{
                  text: 'Cancel',
                  style: 'cancel',
                },
                  {
                    text: 'OK', onPress: () => this.props.navigation.navigate("MyProfile")
                  },
                ],
                {cancelable: true}
                );
              }else{
                this.props.navigation.navigate("MyProfile")
              }
            }}
            navigation={this.props.navigation} 
          />
          
          <ScrollView style={{flex: 1}}>
            <View style={{flex: 1, flexDirection: 'row', padding: 15}}>
              <View style={{flex: 1}}>
                <Avatar rounded size="large" source={this.renderProfilePhoto()} />
              </View>
              <View style={{flex: 2.5, justifyContent: 'center'}}>
                {this.state.userProfile && this.state.userProfile.photo && !this.state.is_deleted || this.state.userProfile && !this.state.userProfile.photo && this.state.newphoto && !this.state.is_deleted ? 
                <TouchableOpacity onPress={() => this.handleUpdatePhotoOptions()}>
                  <Text style={{fontFamily: 'Arial', fontSize: 15, color: Theme.colors.accent}}>Edit Photo</Text>
                </TouchableOpacity> :
                <TouchableOpacity onPress={() => this.onEditPhoto()}>
                  <Text style={{fontFamily: 'Arial', fontSize: 15, color: Theme.colors.accent}}>Add Photo</Text>
                </TouchableOpacity>
                }
              </View>
            </View>
            <View style={{flex: 1, width: '100%', padding: 5}}>
              <View>
                <Elements.custominput
                  type="input" 
                  title="First Name"
                  placeholder={this.state.userProfile ? this.state.userProfile.firstname : ''}
                  placeholderColor='gray'
                  disabled 
                  onChange={null} 
                  bottomOption={true} 
                  onContact={() => ContactOptionsWithParams({ cardnumber: this.state?.userProfile?.data?.card_number })}
                  error={"This field is required"} />

                <Elements.custominput
                  type="input" 
                  title="Last Name" 
                  placeholder={this.state.userProfile ? this.state.userProfile.lastname : ''}
                  placeholderColor='gray'
                  disabled 
                  onChange={null} 
                  bottomOption={true} 
                  onContact={() => ContactOptionsWithParams({ cardnumber: this.state?.userProfile?.data?.card_number })} 
                  error={"This field is required"} />

                <Elements.custominput
                  type="input" 
                  title="Birthday" 
                  placeholder={this.state.userProfile ? new moment(new Date(this.state.userProfile.birthdate)).format("DD MMM YYYY") : ''}
                  placeholderColor='gray'
                  disabled 
                  onChange={null} 
                  bottomOption={true} 
                  onContact={() => ContactOptionsWithParams({ cardnumber: this.state?.userProfile?.data?.card_number })}
                  error={"This field is required"} />

                <Elements.custominput
                  type="input" 
                  title="Mobile Number"
                  keyboardType="numeric"
                  maxLength={13}
                  textColor={this.props.app_theme?.theme.colors.text}
                  isDarkMode={this.props.app_theme?.theme.dark}
                  value={this.state.newmobile ? this.state.newmobile.length <= 2 ? '+63' : this.state.newmobile : this.state.userProfile ? "+" + this.state.userProfile.mobile : ''} 
                  placeholder=""
                  onChangeText={(value) => {
                    this.setState({ newmobile: value })
                  }}
                  focused={this.state.focused && this.state.currentFocus == 3 ? true : false}
                  onFocus={() => this.onInputFocus(3)} 
                  error={"This field is required"} />

                <Elements.custominput
                  type="input" 
                  title="Email Address" 
                  value={this.state.newemail ? this.state.newemail : this.state.userProfile && this.state.newemail != '' ? this.state.userProfile.email : ''}
                  bottomText="your@email.com"
                  textColor={this.props.app_theme?.theme.colors.text}
                  isDarkMode={this.props.app_theme?.theme.dark}
                  focused={this.state.focused && this.state.currentFocus == 4 || this.state.errors && this.state.errors.email ? true : false}
                  onFocus={() => this.onInputFocus(4)}
                  onChangeText={(value) => {
                    this.setState({ newemail: value })
                    delete this.state.errors["email"]
                  }}
                  hasError={this.state.errors && this.state.errors.email ? true : false}
                  errorMessage={this.state.errors && this.state.errors.email ? this.state.errors?.email[0] : "Invalid email"}
                />

                <Elements.custominput
                  type="input" 
                  title="Address"
                  textColor={this.props.app_theme?.theme.colors.text}
                  isDarkMode={this.props.app_theme?.theme.dark}
                  value={this.state.newaddress ? this.state.newaddress : this.state.userProfile && this.state.newaddress != '' ? this.state.userProfile.address : ''}
                  focused={this.state.focused && this.state.currentFocus == 5 || this.state.errors && this.state.errors.address ? true : false}
                  onFocus={() => this.onInputFocus(5)}
                  onChangeText={(value) => {
                    this.setState({ newaddress: value })
                    delete this.state.errors["address"]
                  }}
                  hasError={this.state.errors && this.state.errors.address ? true : false}
                  errorMessage={this.state.errors && this.state.errors.address ? this.state.errors?.address[0] : "Invalid address"}
                />

                <Elements.custominput 
                  type="select"
                  title="Vehicle Type"
                  textColor={this.props.app_theme?.theme.colors.text}
                  isDarkMode={this.props.app_theme?.theme.dark}
                  value={this.state.vehicleType ? this.state.vehicleType.string : this.state.userProfile ? this.getVT(this.state.userProfile.vo_code) : 'Select'}
                  focused={this.state.focused && this.state.currentFocus == 7 ? true : false}
                  onPress={() => {
                    this.onInputFocus(7)
                    this.onSelectPress(1)
                    delete this.state.errors["vehicleType"]
                  }}
                  hasError={this.state.errors && this.state.errors.vehicleType ? true : false}
                  errorMessage={this.state.errors && this.state.errors.vehicleType ? this.state.errors?.vehicleType[0] : "Invalid vehicle type"}  
                />

                <Elements.custominput 
                  type="select"
                  title="Fuel Type"
                  textColor={this.props.app_theme?.theme.colors.text}
                  isDarkMode={this.props.app_theme?.theme.dark}
                  value={this.state.fuelType ? this.state.fuelType.string : this.state.userProfile ? this.getFT(this.state.userProfile.fueltype_code) : 'Select'}
                  focused={this.state.focused && this.state.currentFocus == 8 ? true : false}
                  onPress={() => {
                    this.onInputFocus(8)
                    this.onSelectPress(2)
                    delete this.state.errors["fuelType"]
                  }}
                  hasError={this.state.errors && this.state.errors.fuelType ? true : false}
                  errorMessage={this.state.errors && this.state.errors.fuelType ? this.state.errors?.fuelType[0] : "Invalid fuel type"}
                />

                <Elements.custominput 
                  type="select"
                  title="Marital Status"
                  textColor={this.props.app_theme?.theme.colors.text}
                  isDarkMode={this.props.app_theme?.theme.dark}
                  value={this.state.maritalStatus ? this.state.maritalStatus.string : this.state.userProfile ? this.getMS(this.state.userProfile.civilstatus_code) : 'Select'}
                  focused={this.state.focused && this.state.currentFocus == 9 ? true : false}
                  onPress={() => {
                    this.onInputFocus(9)
                    this.onSelectPress(3)
                  }}
                  error={"This field is required"} />

                <Elements.custominput 
                  type="select"
                  title="Gender"
                  textColor={this.props.app_theme?.theme.colors.text}
                  isDarkMode={this.props.app_theme?.theme.dark}
                  value={this.state.gender ? this.state.gender.string : this.state.userProfile ? this.getG(this.state.userProfile.gender_code) : 'Select'}
                  focused={this.state.focused && this.state.currentFocus == 10 ? true : false}
                  onPress={() => {
                    this.onInputFocus(10)
                    this.onSelectPress(4)
                  }}
                  error={"This field is required"} />

              </View>
            </View>
            <View style={{flex: 1, alignItems: 'center', marginTop: 5, marginBottom: 30}}>
              <TouchableOpacity onPress={() => this.onSubmit()} style={{width: '92%', padding: 15, borderRadius: 10, backgroundColor: Theme.colors.primary}}>
                <Text style={{alignSelf:'center', color: '#fff', fontSize: 16}}>Save Changes</Text>
              </TouchableOpacity>
            </View>
          </ScrollView>
        </CustomSafeArea>
    )
  }
}

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

const mapDispatchToProps = {
  saveUserInfo
}

export default connect(mapStateToProps, mapDispatchToProps)(EditProfile)


// export default function EditProfile(navigation) {

//   const [loading, setloading] = useState(false)
//   const [userProfile, setUserProfile] = useState(null)
//   const [focused, setfocused] = useState(false);
//   const [editprofileselect, seteditprofileselect] = useState(false)
//   const [customerserviceselect, setcustomerserviceselect] = useState(false)
//   const [currentFocus, setCurrentFocus] = useState(null);
  
//   const [opendialog, setopendialog] = useState(false);
//   const [currentDialog, setCurrentDialog] = useState(null);

//   const [currentphoto, setcurrentphoto] = useState(null)
//   const [newphoto, setnewphoto]= useState(null)
//   const [newmobile, setnewmobile]= useState("")
//   const [newemail, setnewemail]= useState(null)
//   const [newaddress, setnewaddress]= useState(null)
//   const [newcity, setnewcity]= useState(null)

//   const [vehicleType, setVehicleTyle] = useState(null);
//   const [fuelType, setFuelType] = useState(null);
//   const [maritalStatus, setMaritalStatus] = useState(null);
//   const [gender, setGender] = useState(null);
//   const [is_deleted, setdeleted] = useState(false);

//   const [errors, seterrors] = useState({});


//   useEffect(() => {
//     // navigation.route.params.data.photo = ''
//     setloading(true)
//     setUserProfile(navigation.route?.params.data)
//     setloading(false)
//     console.log("PROFILE", navigation.route?.params.data)
//   }, [])

//   const onInputFocus = (index) => {
//     setfocused(true)
//     setCurrentFocus(index)
//   }
//   const onSelectPress = (index) => {
//     setopendialog(true)
//     setCurrentDialog(index)
//   }

//   const getFT = (type) => {
//     let types = Assets.fueltypes
//     for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
//     return ""
//   }
//   const getVT = (type) => {
//     let types = Assets.vehicletypes
//     for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
//     return ""
//   }
//   const getMS = (type) => {
//     let types = Assets.civilstatus
//     for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
//     return ""
//   }
//   const getG = (type) => {
//     let types = Assets.gender
//     for(var x=0;x<types.length;x++){if(type == types[x].value){return types[x].string}}
//     return ""
//   }
//   const getCN = () => {

//   }

//   const onDeletePhoto = () => {
//     setdeleted(true)
//     setcurrentphoto(Assets.logo.profileHolder)
//   }

//   const onEditPhoto = () => {
//     ImagePicker.launchImageLibrary({}, (response) => {
//       // let b64 = response.data
//       // response.data = ''
//       if(!response.didCancel){
//         if(is_deleted){
//           setdeleted(false)
//           setcurrentphoto(null)
//         }
//         setnewphoto(response)
//       }
//       // console.log(response)  
//     });
//   }

//   const FormValidate = async () => {
//     let res = {}
//     setloading(true)
//     if(newemail == ""){
//       res = Object.assign(errors, {email: ["This field is required"]})
//     }
//     if(newaddress == "" || newaddress == null && userProfile.address == ""){
//       // seterrors(Object.assign(errors, {address: ["This field is required"]}))
//       res = Object.assign(errors, {address: ["This field is required"]})
//     }
//     if(!vehicleType && userProfile.vo_code == "0"){
//       // seterrors(Object.assign(errors, {vehicleType: ["This field is required"]}))
//       res = Object.assign(errors, {vehicleType: ["This field is required"]})
//     }
//     if(!fuelType && userProfile.fueltype_code == "0"){
//       // seterrors(Object.assign(errors, {fuelType : ["This field is required"]}))
//       res = Object.assign(errors, {fuelType : ["This field is required"]})
//     } 
//     seterrors(res)
//     setloading(false)
//     return Object.keys(errors).length > 0 ? false : true
//   }

//   const Body = function(){
//     return {
//       image: newphoto ? newphoto.uri : null,
//       mobile: newmobile,
//       email: newemail,
//       address: newaddress,
//       city: newcity,
//       vo_code: vehicleType ? vehicleType.value : null,
//       fueltype_code: fuelType ? fuelType.value : null,
//       civilstatus_code: maritalStatus ? maritalStatus.value : null,
//       gender_code: gender ? gender.value : null,
//       is_deleted: is_deleted
//     }
//   }

//   const SaveNoOtp = async () => {

//     let SESSION = await DB.session()
//     if(newphoto){      
//       // console.log("BLOB BODY", blobBody.image.uri)
//       setloading(true)
//       RNFETCHBLOB("update_profile_no_otp", "POST", 
//         {Authorization: SESSION.token}, {}, Utils.blobBody({newphoto, userProfile, newmobile, newemail, newaddress, newcity, vehicleType, fuelType, maritalStatus, gender, is_deleted}), 
//         function(res){
//           console.log(res)
//           setloading(false)
//           Utils.responseHandler(res, () => {
//             navigation.route.params.onGoBack()
//             navigation.navigation.goBack()
//           }, (errors) => {
//             seterrors(errors)
//           })
//       }, function(err){
//         setloading(false)
//         setTimeout(() => {
//           if(newphoto) Alert.alert("Error", "Failed to upload image")
//         }, 300)
//       })

//     }else{
//       setloading(true)
//       await REQUEST("update_profile_no_otp", "post", {
//         Authorization: SESSION.token,
//         "Content-Type": "multipart/form-data",
//       }, {}, Utils.formData({userProfile, newmobile, newemail, newaddress, newcity, vehicleType, fuelType, maritalStatus, gender, is_deleted}), 
//       function(res){
//         setloading(false)
//         console.log("Update Res", res)
//         Utils.responseHandler(res, () => {
//           navigation.route.params.onGoBack()
//           navigation.navigation.goBack()
//         }, (errors) => {
//           seterrors(errors)
//         })
//       }, function(error){
//         console.log("Failed", error)
//         setloading(false)
//         setTimeout(() => {
//           if(newphoto) Alert.alert("Error", "Failed to upload image")
//         }, 300)
//       })
//     }
    
//   }

//   const SaveWithOtp = () => {

//     navigation.navigation.navigate("AccountSendOtp", {
//       data: {
//         lcard_uuid: userProfile.lcard_uuid, 
//         mobile_number: newmobile.replace("+", "")
//       }, 
//       type: 'edit', 
//       callback: (res) => {
//         if(res == "valid") SaveNoOtp()
//       }, 
//     })
//   }

//   const onSubmit = () => {
//     setfocused(false)
//     if(hasChanges()){
//       Alert.alert(
//         "Update Profile",
//         '\nAre you sure you want to save changes to your profile?\n',
//         [{
//           text: 'Cancel',
//           style: 'cancel',
//         },{
//           text: 'OK', onPress: async () => {
//             let validation = await FormValidate()
//             if(!validation) return
//             if(newmobile != "" && newmobile.replace("+", "") != userProfile.mobile){
//               SaveWithOtp()
//             }else{
//               SaveNoOtp()
//             }
//           }
//         }],
//         {cancelable: true}
//       );
//     }else{
//       navigation.navigation.goBack()
//     }
//   }

//   const hasChanges = () => {
//     let values = Object.values(Body())
//     for(var x=0;x<values.length;x++){
//       if(values[x] || values[x] == "") return true
//     }
//     return false
//   }

//   const handleUpdatePhotoOptions = () => {
//     Elements.ActionOption({
//       options: ['Edit Photo', 'Delete Photo', 'Cancel'],
//       functions: [{
//         execute: () =>  onEditPhoto()
//       }, {
//         execute: () =>  onDeletePhoto()
//       }]
//     })
//   }

//   const renderProfilePhoto = () => {
//     if(currentphoto) return Assets.logo.profileHolder
//     else if(!currentphoto && newphoto || newphoto) return {uri: newphoto.uri} 
//     else if(!currentphoto && !newphoto && userProfile && userProfile.photo) return {uri: userProfile.photo}
//     else return Assets.logo.profileHolder
//   }

//   return (
//     <SafeAreaView style={{flex: 1}}>
//       <Elements.loader visible={loading} />
//       <Elements.checkboxdialog
//         title="Vehicle Type"
//         selected={vehicleType ? vehicleType.value : userProfile ? userProfile.vo_code : 0} 
//         shown={opendialog && currentDialog == 1 ? true : false}
//         onCancel={() => setopendialog(!opendialog)}
//         onSelect={(value, string) => {
//           setVehicleTyle({
//             value: value,
//             string: string
//           })
//           setopendialog(!opendialog)
//         }}
//         items={Assets.vehicletypes}
//       />
//       <Elements.checkboxdialog
//         title="Fuel Type"
//         selected={fuelType ? fuelType.value : userProfile ? userProfile.fueltype_code : 0} 
//         shown={opendialog && currentDialog == 2 ? true : false}
//         onCancel={() => setopendialog(!opendialog)}
//         onSelect={(value, string) => {
//           setFuelType({
//             value: value,
//             string: string
//           })
//           setopendialog(!opendialog)
//         }}
//         items={Assets.fueltypes} 
//       />
//       <Elements.checkboxdialog
//         title="Marital Status"
//         selected={maritalStatus ? maritalStatus.value : userProfile ? userProfile.civilstatus_code : 0} 
//         shown={opendialog && currentDialog == 3 ? true : false}
//         onCancel={() => setopendialog(!opendialog)}
//         onSelect={(value, string) => {
//           setMaritalStatus({
//             value: value,
//             string: string
//           })
//           setopendialog(!opendialog)
//         }}
//         items={Assets.civilstatus} 
//       />
//       <Elements.checkboxdialog
//         title="Gender"
//         selected={gender ? gender.value : userProfile ? userProfile.gender_code : 0} 
//         shown={opendialog && currentDialog == 4 ? true : false}
//         onCancel={() => setopendialog(!opendialog)}
//         onSelect={(value, string) => {
//           setGender({
//             value: value,
//             string: string
//           })
//           setopendialog(!opendialog)
//         }}
//         items={Assets.gender} 
//       />
      
//       <CustomHeader 
//         title="Edit Profile" 
//         menu={false} 
//         backscreen="MyProfile" 
//         back={true} 
//         onBackPress={() => {
//           if(hasChanges()){
//             Alert.alert(
//             null,
//             'You have an unsaved profile information, are you sure you want to navigate back?\n',
//             [{
//               text: 'Cancel',
//               style: 'cancel',
//             },
//               {
//                 text: 'OK', onPress: () => navigation.navigation.navigate("MyProfile")
//               },
//             ],
//             {cancelable: true}
//             );
//           }else{
//             navigation.navigation.navigate("MyProfile")
//           }
//         }}
//         navigation={navigation} 
//       />
      
//       <ScrollView style={{flex: 1}}>
        
//         <View style={{flex: 1, flexDirection: 'row', padding: 15}}>
//           <View style={{flex: 1}}>
//             {/* <Avatar rounded source={currentphoto ? Assets.logo.profileHolder : {uri: newphoto ? newphoto.uri : userProfile ? userProfile.photo === '' ? Assets.logo.profileHolder : userProfile.photo : Assets.logo.profileHolder}} size="large" /> */}
//             <Avatar rounded size="large" source={renderProfilePhoto()} />
//           </View>
//           <View style={{flex: 2.5, justifyContent: 'center'}}>
//             {userProfile && userProfile.photo && !is_deleted || userProfile && !userProfile.photo && newphoto && !is_deleted ? 
//             <TouchableOpacity onPress={handleUpdatePhotoOptions}>
//               <Text style={{fontFamily: 'Arial', fontSize: 15, color: Theme.colors.accent}}>Edit Photo</Text>
//             </TouchableOpacity> :
//             <TouchableOpacity onPress={() => onEditPhoto()}>
//               <Text style={{fontFamily: 'Arial', fontSize: 15, color: Theme.colors.accent}}>Add Photo</Text>
//             </TouchableOpacity>
//             }
//           </View>
//         </View>
//         <View style={{flex: 1, width: '100%', padding: 5}}>
//          <View>
//           <Elements.custominput
//             type="input" 
//             title="First Name" 
//             placeholder={userProfile ? userProfile.firstname : ''}
//             disabled 
//             onChange={null} 
//             bottomOption={true} 
//             onContact={ContactOptions}
//             error={"This field is required"} />

//           <Elements.custominput
//             type="input" 
//             title="Last Name" 
//             placeholder={userProfile ? userProfile.lastname : ''}
//             disabled 
//             onChange={null} 
//             bottomOption={true} 
//             onContact={ContactOptions} 
//             error={"This field is required"} />

//           <Elements.custominput
//             type="input" 
//             title="Birthday" 
//             placeholder={userProfile ? new moment(new Date(userProfile.birthdate)).format("DD MMM YYYY") : ''}
//             disabled 
//             onChange={null} 
//             bottomOption={true} 
//             onContact={ContactOptions}
//             error={"This field is required"} />

//           <Elements.custominput
//             type="input" 
//             title="Mobile Number"
//             keyboardType="numeric"
//             maxLength={13}
//             value={newmobile ? newmobile.length <= 2 ? '+63' : newmobile : userProfile ? "+" + userProfile.mobile : ''} 
//             placeholder=""
//             onChangeText={(value) => {
//               setnewmobile(value)
//               console.log(value)
//             }}
//             focused={focused && currentFocus == 3 ? true : false}
//             onFocus={() => onInputFocus(3)} 
//             error={"This field is required"} />

//           <Elements.custominput
//             type="input" 
//             title="Email Address" 
//             value={newemail ? newemail : userProfile && newemail != '' ? userProfile.email : ''}
//             bottomText="your@email.com"
//             focused={focused && currentFocus == 4 || errors && errors.email ? true : false}
//             onFocus={() => onInputFocus(4)}
//             onChangeText={(value) => {
//               setnewemail(value)
//               delete errors["email"]
//             }}
//             hasError={errors && errors.email ? true : false}
//             errorMessage={errors && errors.email ? errors.email[0] : "Invalid email"}
//           />

//           <Elements.custominput
//             type="input" 
//             title="Address" 
//             value={newaddress ? newaddress : userProfile && newaddress != '' ? userProfile.address : ''}
//             focused={focused && currentFocus == 5 || errors && errors.address ? true : false}
//             onFocus={() => onInputFocus(5)}
//             onChangeText={(value) => {
//               setnewaddress(value)
//               delete errors["address"]
//             }}
//             hasError={errors && errors.address ? true : false}
//             errorMessage={errors && errors.address ? errors.address[0] : "Invalid address"}
//           />

//           {/* <Elements.custominput 
//             type="input"
//             title="City" 
//             value={newcity ? newcity : userProfile && newcity != '' ? userProfile.city_name : ''}
//             focused={focused && currentFocus == 6 ? true : false}
//             onFocus={() => onInputFocus(6)} 
//             onChangeText={(value) => setnewcity(value)}
//             error={"This field is required"} /> */}

//           <Elements.custominput 
//             type="select"
//             title="Vehicle Type" 
//             value={vehicleType ? vehicleType.string : userProfile ? getVT(userProfile.vo_code) : 'Select'}
//             focused={focused && currentFocus == 7 ? true : false}
//             onPress={() => {
//               onInputFocus(7)
//               onSelectPress(1)
//               delete errors["vehicleType"]
//             }}
//             hasError={errors && errors.vehicleType ? true : false}
//             errorMessage={errors && errors.vehicleType ? errors.vehicleType[0] : "Invalid vehicle type"}  
//           />

//           <Elements.custominput 
//             type="select"
//             title="Fuel Type" 
//             value={fuelType ? fuelType.string : userProfile ? getFT(userProfile.fueltype_code) : 'Select'}
//             focused={focused && currentFocus == 8 ? true : false}
//             onPress={() => {
//               onInputFocus(8)
//               onSelectPress(2)
//               delete errors["fuelType"]
//             }}
//             hasError={errors && errors.fuelType ? true : false}
//             errorMessage={errors && errors.fuelType ? errors.fuelType[0] : "Invalid fuel type"}
//           />

//           <Elements.custominput 
//             type="select"
//             title="Marital Status" 
//             value={maritalStatus ? maritalStatus.string : userProfile ? getMS(userProfile.civilstatus_code) : 'Select'}
//             focused={focused && currentFocus == 9 ? true : false}
//             onPress={() => {
//               onInputFocus(9)
//               onSelectPress(3)
//             }}
//             error={"This field is required"} />

//           <Elements.custominput 
//             type="select"
//             title="Gender" 
//             value={gender ? gender.string : userProfile ? getG(userProfile.gender_code) : 'Select'}
//             focused={focused && currentFocus == 10 ? true : false}
//             onPress={() => {
//               onInputFocus(10)
//               onSelectPress(4)
//             }}
//             error={"This field is required"} />

//            </View>
//          </View>
//          <View style={{flex: 1, alignItems: 'center', marginTop: 5, marginBottom: 30}}>
//           <TouchableOpacity onPress={onSubmit} style={{width: '92%', padding: 15, borderRadius: 10, backgroundColor: Theme.colors.primary}}>
//             <Text style={{alignSelf:'center', color: '#fff', fontSize: 16}}>Save Changes</Text>
//           </TouchableOpacity>
//          </View>
//       </ScrollView>
//     </SafeAreaView>
//   );
// }