Untitled

import React, { useState, useEffect, useRef } from "react";
import {
  StyleSheet,
  Text,
  View,
  useWindowDimensions,
  TouchableOpacity,
  ScrollView,
  TextInput,
  Image,
  StatusBar,
  Button,
  Platform,
} from "react-native";
import { Header, Switch } from "react-native-elements";
import { DataFont } from "../../config/FontFamily";
import normalize from "react-native-normalize";

import moment_timezone from "moment-timezone";

import DatePicker from "react-native-date-picker";

import moment from "moment";
import AsyncStorage from "@react-native-async-storage/async-storage";

import axios from "axios";

import {
  BallIndicator,
  BarIndicator,
  DotIndicator,
  MaterialIndicator,
  PacmanIndicator,
  PulseIndicator,
  SkypeIndicator,
  UIActivityIndicator,
  WaveIndicator,
} from "react-native-indicators";

import Modal from "react-native-modal";

import ImagePicker from "react-native-image-crop-picker";

import { Picker } from "@react-native-picker/picker";

import Icon from "react-native-vector-icons/FontAwesome5";

import RBSheet from "react-native-raw-bottom-sheet";

import { url } from "../../config/api/apiUrl";

import Toast from "react-native-simple-toast";

import SelectDropdown from "react-native-select-dropdown";

export default function PagesFormData({ navigation }) {
  const windowWidth = useWindowDimensions().width;
  const windowHeight = useWindowDimensions().height;

  //pertama kali masuk clear halaman
  useEffect(() => {
    clearhalaman();
    return () => {};
  }, []);

  const [keyProvinsiAwal, setkeyProvinsiAwal] = useState("");
  const [idProvinsiAwal, setidProvinsiAwal] = useState("");
  const [Provinsiawal, setProvinsiawal] = useState("");

  const [keyCityAwal, setkeyCityAwal] = useState("");
  const [idCityAwal, setidCityAwal] = useState("");
  const [CityAwal, setCityAwal] = useState("");

  const [keyKabupatenAwal, setkeyKabupatenAwal] = useState("");
  const [idKabupatenAwal, setidKabupatenAwal] = useState("");
  const [KabupatenAwal, setKabupatenAwal] = useState("");

  const [keyKecamatanAwal, setkeyKecamatanAwal] = useState("");
  const [idKecamatanAwal, setidKecamatanAwal] = useState("");
  const [KecamatanAwal, setKecamatanAwal] = useState("");
  const [PostalCode, setPostalCode] = useState("");

  const [DataProvinsi, setDataProvinsi] = useState([]);
  const [DataCity, setDataCity] = useState([]);
  const [DataKabupaten, setDataKabupaten] = useState([]);
  const [DataKecamatan, setDataKecamatan] = useState([]);

  const [statussession, setstatussession] = useState(false);

  const [paksaberubahsatu, setpaksaberubahsatu] = useState(false);
  const [paksaberubahdua, setpaksaberubahdua] = useState(false);
  const [paksaberubahtiga, setpaksaberubahtiga] = useState(false);

  // load view ketika sudah siap jadi true

  const [loadView, setloadView] = useState(false);
  // setloadView(false);

  // untuk simpan address
  const [address, setaddress] = useState("");

  const [validateButton, setvalidateButton] = useState(true);

  const pickerRef = useRef();
  const hariPIckerRef = useRef();

  const useRefButtomSheet = useRef();

  function open() {
    pickerRef.current.focus();
  }

  function close() {
    pickerRef.current.blur();
  }

  useEffect(() => {
    const unsubscribe_page = navigation.addListener("focus", () => {
      // clearhalaman();
      getDataSession();
      // load data provinsi, kabupaten, kecamatan
      getDataProvinsi();
      getstatus();
      getValidationAddress();
    });
    return unsubscribe_page;
  }, [navigation]);

  useEffect(() => {
    // load ketika id provinsi berubah
    getDataCity();
    getValidationAddress();
    return () => {};
  }, [idProvinsiAwal]);

  useEffect(() => {
    getDataKabupaten();
    return () => {};
  }, [idCityAwal]);

  useEffect(() => {
    getDataKecamatan();
    return () => {};
  }, [idKabupatenAwal]);

  const getDataSession = async () => {
    let address_session = await AsyncStorage.getItem(
      "address_session_tambah_toko"
    );

    setidProvinsiAwal("");
    setDataProvinsi([]);

    setidCityAwal("");
    setDataCity([]);

    setidKabupatenAwal("");
    setDataKabupaten([]);

    setidKecamatanAwal("");
    setDataKecamatan([]);

    if (address_session != null && address_session != "") {
      setaddress(address_session);
    }
  };

  const getValidationAddress = async () => {
    let address = await AsyncStorage.getItem("address_session_tambah_toko");
    if (address != "" && address != null && address != undefined) {
      setaddress(address);
    } else {
      setaddress("");
    }
  };

  const getDataProvinsi = async () => {
    let token = await AsyncStorage.getItem("token");

    let nameProvinsi = "";
    let nameProvinsisession = await AsyncStorage.getItem("nameProvinsi");
    if (
      nameProvinsisession != null &&
      nameProvinsisession != undefined &&
      nameProvinsisession != ""
    ) {
      nameProvinsi = nameProvinsisession;
    } else {
      // nameProvinsi = value.provinceName;
    }

    let nameProvinsifix = nameProvinsi;

    // await AsyncStorage.getItem("nameProvinsi")

    let nilai = nameProvinsifix;

    var config = {
      method: "POST",
      url: `${url.server}v2/popaket/get-provinsi`,
      // url: `${url.server_}location/v1/provinces?province_name=${nilai}`,
      // headers: {
      //   Authorization: `Bearer ${token}`,
      // },
      // ?province_name=${nilai}&token=${token}
      data: {
        province_name: nilai,
        token: token,
      },
      validateStatus: () => true,
    };

    console.log(`post provinsi ${JSON.stringify(config)}`);

    axios(config)
      .then(function (res) {
        let response = JSON.parse(res.data);

        if (response.status == "success" && response.status_code == 200) {
          setDataProvinsi(response.data);
          setidProvinsiAwal(response.data[0].province_id);
          setProvinsiawal(response.data[0].province_name);
        } else {
          setDataProvinsi([]);

          setkeyCityAwal("");
          setidCityAwal("");
          setCityAwal("");
          setDataCity([]);

          setkeyKabupatenAwal("");
          setidKabupatenAwal("");
          setKabupatenAwal("");
          setDataKabupaten([]);

          setkeyKecamatanAwal("");
          setidKecamatanAwal("");
          setKecamatanAwal("");
          setDataKecamatan([]);
        }
      })
      .catch(function (error) {
        setkeyCityAwal("");
        setidCityAwal("");
        setCityAwal("");
        setDataCity([]);

        setkeyKabupatenAwal("");
        setidKabupatenAwal("");
        setKabupatenAwal("");
        setDataKabupaten([]);

        setkeyKecamatanAwal("");
        setidKecamatanAwal("");
        setKecamatanAwal("");
        setDataKecamatan([]);
      });
  };

  const getDataCity = async () => {
    let token = await AsyncStorage.getItem("token");
    let idProvinsiLocal = idProvinsiAwal;
    let province_id = idProvinsiLocal;
    let province_name = "";
    let city_name = "";
    //provinsi_id jadi prioritas saat search
    var config = {
      method: "POST",
      // url: `${url.server_}location/v1/cities?province_id=${province_id}&province_name=${province_name}&city_name=${city_name}`,
      // headers: {
      //   Authorization: `Bearer ${token}`,
      // },
      // ?province_id=${province_id}&province_name=${province_name}&city_name=${city_name}&token=${token}
      url: `${url.server}v2/popaket/get-city`,
      data: {
        province_id: province_id,
        province_name: province_name,
        city_name: city_name,
        token: token,
      },

      validateStatus: () => true,
    };

    console.log(`get city ${JSON.stringify(config)}`);

    axios(config)
      .then(function (res) {
        let response = JSON.parse(res.data);
        console.log(`daat city ${JSON.stringify(response)}`);

        if (response.status == "success") {
          setDataCity(response.data);
          setidCityAwal(response.data[0].city_id);
          setCityAwal(response.data[0].city_name);
        } else {
          setkeyCityAwal("");
          setidCityAwal("");
          setCityAwal("");
          setDataCity([]);

          setkeyKabupatenAwal("");
          setidKabupatenAwal("");
          setKabupatenAwal("");
          setDataKabupaten([]);

          setkeyKecamatanAwal("");
          setidKecamatanAwal("");
          setKecamatanAwal("");
          setDataKecamatan([]);
        }
      })
      .catch(function (error) {
        setkeyCityAwal("");
        setidCityAwal("");
        setCityAwal("");
        setDataCity([]);

        setkeyKabupatenAwal("");
        setidKabupatenAwal("");
        setKabupatenAwal("");
        setDataKabupaten([]);

        setkeyKecamatanAwal("");
        setidKecamatanAwal("");
        setKecamatanAwal("");
        setDataKecamatan([]);
      });
  };
  // kabupatenatau kota
  const getDataKabupaten = async () => {
    let token = await AsyncStorage.getItem("token");
    let idCityLocal = idCityAwal;

    let city_id = idCityLocal;
    let district_name = "";
    var config = {
      method: "POST",
      // url: `${url.server_}location/v1/districts?city_id=${city_id}&district_name=${district_name}`,
      // headers: {
      //   Authorization: `Bearer ${token}`,
      // },
      // ?city_id=${city_id}&district_name=${district_name}&token=${token}
      url: `${url.server}v2/popaket/get-kabupaten`,
      data: {
        city_id: city_id,
        district_name: district_name,
        token: token,
      },

      validateStatus: () => true,
    };

    axios(config)
      .then(function (res) {
        let response = JSON.parse(res.data);

        if (response.status == "success") {
          setDataKabupaten(response.data);
          setidKabupatenAwal(response.data[0].district_id);
          setKabupatenAwal(response.data[0].district_name);
        } else {
          setkeyKabupatenAwal("");
          setidKabupatenAwal("");
          setKabupatenAwal("");
          setDataKabupaten([]);

          setkeyKecamatanAwal("");
          setidKecamatanAwal("");
          setKecamatanAwal("");
          setDataKecamatan([]);
        }
      })
      .catch(function (error) {
        setkeyKabupatenAwal("");
        setidKabupatenAwal("");
        setKabupatenAwal("");
        setDataKabupaten([]);

        setkeyKecamatanAwal("");
        setidKecamatanAwal("");
        setKecamatanAwal("");
        setDataKecamatan([]);
      });
  };
  const getDataKecamatan = async () => {
    let token = await AsyncStorage.getItem("token");
    setloadView(true);

    let idKabupatenLocal = idKabupatenAwal;

    let district_id = idKabupatenLocal;
    let sub_district_name = "";
    let postal_code = "";
    var config = {
      method: "POST",
      // url: `${url.server_}location/v1/sub-districts?district_id=${district_id}&sub_district_name=${sub_district_name}&postal_code=${postal_code}`,
      // headers: {
      //   Authorization: `Bearer ${token} `,
      // },
      // ?district_id=${district_id}&sub_district_name=${sub_district_name}&postal_code=${postal_code}&token=${token}
      url: `${url.server}v2/popaket/get-kecamatan`,
      data: {
        district_id: district_id,
        sub_district_name: sub_district_name,
        postal_code: postal_code,
        token: token,
      },
      validateStatus: () => true,
    };

    axios(config)
      .then(function (res) {
        let response = JSON.parse(res.data);

        if (response.status == "success") {
          setDataKecamatan(response.data);
          setidKecamatanAwal(response.data[0].sub_district_id);
          setKecamatanAwal(response.data[0].sub_district_name);
          setPostalCode(response.data[0].postal_code);
        } else {
          setkeyKecamatanAwal("");
          setidKecamatanAwal("");
          setKecamatanAwal("");
          setDataKecamatan([]);
          setPostalCode("");
        }
      })
      .catch(function (error) {
        setkeyKecamatanAwal("");
        setidKecamatanAwal("");
        setKecamatanAwal("");
        setDataKecamatan([]);
        setPostalCode("");
      });
  };

  const Simpan = async () => {
    let address_session = await AsyncStorage.getItem("address_session");

    if (address == "") {
      Toast.show("Pilih Alamat Terdahulu");
      return;
    }

    if (idProvinsiAwal == "") {
      Toast.show("Pilih Provinsi Terdahulu");
      return;
    }

    if (idCityAwal == "") {
      Toast.show("Pilih Kota Terdahulu");
      return;
    }

    if (idKabupatenAwal == "") {
      Toast.show("Pilih Kabupaten Terdahulu");
      return;
    }
    if (idKecamatanAwal == "") {
      Toast.show("Pilih Kecamatan Terdahulu");
      return;
    }
    console.log(idProvinsiAwal);
    console.log(idCityAwal);
    console.log(idKabupatenAwal);
    console.log(idKecamatanAwal);
    console.log(PostalCode);

    await AsyncStorage.setItem("idProvinsiAwal", `${idProvinsiAwal}`);
    await AsyncStorage.setItem("Provinsiawal", `${Provinsiawal}`);
    await AsyncStorage.setItem("idCityAwal", `${idCityAwal}`);
    await AsyncStorage.setItem("CityAwal", `${CityAwal}`);
    await AsyncStorage.setItem("idKabupatenAwal", `${idKabupatenAwal}`);
    await AsyncStorage.setItem("KabupatenAwal", `${KabupatenAwal}`);
    await AsyncStorage.setItem("idKecamatanAwal", `${idKecamatanAwal}`);
    await AsyncStorage.setItem("KecamatanAwal", `${KecamatanAwal}`);
    await AsyncStorage.setItem("PostalCode", `${PostalCode}`);
    // if (idProvinsiAwal != "") {
    // }
    // if (idKabupatenAwal != "") {
    // }
    // if (idKecamatanAwal != "") {
    // }

    // console.log(`id provindi`,idProvinsiAwal);
    // console.log(`id kabupaten`,idKabupatenAwal);
    // console.log(`id kecamatan`,idKecamatanAwal);

    //  navigation.navigate("PendaftaranUsaha");
    navigation.goBack();

    // console.log(!statussession);
  };

  const getstatus = async () => {
    // setstatussession(false);
    // await AsyncStorage.setItem("simpan_id", "0");
  };

  const backToPageSebelumnya = async () => {
    navigation.goBack();

    //
    // nameProvinsi
    await AsyncStorage.removeItem("idProvinsiAwal");
    await AsyncStorage.removeItem("nameProvinsi");
    await AsyncStorage.removeItem("idKabupatenAwal");
    await AsyncStorage.removeItem("idKecamatanAwal");
    await AsyncStorage.removeItem("lot");
    await AsyncStorage.removeItem("long");
    await AsyncStorage.removeItem("address_session");
    await AsyncStorage.removeItem("address_session_tambah_toko");
    setaddress("");
  };
  const clearhalaman = async () => {
    // navigation.goBack();

    //
    // nameProvinsi
    await AsyncStorage.removeItem("idProvinsiAwal");
    await AsyncStorage.removeItem("nameProvinsi");
    await AsyncStorage.removeItem("idKabupatenAwal");
    await AsyncStorage.removeItem("idKecamatanAwal");
    await AsyncStorage.removeItem("lot");
    await AsyncStorage.removeItem("long");
    await AsyncStorage.removeItem("address_session");
    await AsyncStorage.removeItem("address_session_tambah_toko");
    setaddress("");
  };

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: "#f9f9f9",
      }}
    >
      <Header
        placement={"left"}
        leftComponent={{
          icon: "chevron-left",
          color: `${DataFont.colortitlewhite}`,
          onPress: backToPageSebelumnya,
          size: normalize(30),
        }}
        backgroundColor={`${DataFont.colorheader}`}
        centerComponent={{
          text: `Alamat`,
          style: {
            color: `${DataFont.colortitlewhite}`,
            fontFamily: `${DataFont.enamratus}`,
            fontSize: normalize(18),
            paddingTop: normalize(5),
          },
        }}
      />

      {loadView == false ? (
        <DotIndicator color="#4AB363" size={10} />
      ) : (
        <ScrollView showsVerticalScrollIndicator={false}>
          <View
            style={{
              width: windowWidth,
              height: "auto",
              alignItems: "center",
              paddingVertical: normalize(10),
            }}
          >
            <View
              style={{
                width: windowWidth * 0.92,
                height: windowHeight * 0.9,
                backgroundColor: "white",
                shadowColor: "#000",
                shadowOffset: {
                  width: 0,
                  height: 2,
                },
                shadowOpacity: 0.25,
                shadowRadius: 4,
                elevation: 1,
                borderRadius: normalize(10),
                paddingHorizontal: normalize(14),
                paddingVertical: normalize(14),
              }}
            >
              <View
                style={{
                  flexDirection: "row",
                }}
              >
                <Text
                  allowFontScaling={false}
                  style={{
                    fontFamily: `${DataFont.enamratus}`,
                  }}
                >
                  Pilih Alamat
                </Text>
                <Text
                  allowFontScaling={false}
                  style={{
                    fontFamily: `${DataFont.enamratus}`,
                    color: "red",
                  }}
                >
                  {" "}
                  *{" "}
                </Text>
              </View>

              <View padding={10} />
              {/* awal start */}
              <TouchableOpacity
                onPress={() => {
                  navigation.navigate("PagesMaps");
                }}
                style={{
                  flexDirection: "row",
                  //   paddingVertical:normalize(101)
                }}
              >
                <View
                  style={{
                    position: "absolute",
                    left: normalize(10),
                    top: normalize(14),
                  }}
                >
                  <Icon name="search" size={16} color="#dedede" />
                </View>
                <View
                  style={{
                    width: windowWidth * 0.86,
                    height: "auto",
                    borderColor: "#eaeaea",
                    borderWidth: 1,
                    borderRadius: normalize(10),
                    paddingLeft: normalize(40),
                    paddingVertical: normalize(20),
                  }}
                  // placeholder={"Ketik Alamat Anda disini"}
                >
                  <Text allowFontScaling={false}>{address}</Text>
                </View>
              </TouchableOpacity>
              <View padding={10} />
              <Text
                allowFontScaling={false}
                style={{
                  color: "#393D43",
                  fontFamily: `${DataFont.limaratus}`,
                  fontSize: normalize(13),
                }}
              >
                Provinsi
              </Text>

              <View
                style={{
                  width: windowWidth * 0.86,
                  height: windowHeight * 0.06,
                  // paddingLeft: normalize(10),
                }}
              >
                <SelectDropdown
                  data={DataProvinsi}
                  onSelect={(selectedItem, index) => {
                    setkeyProvinsiAwal(index);
                    setidProvinsiAwal(selectedItem.province_id);
                    setProvinsiawal(selectedItem.province_name);
                  }}
                  buttonStyle={{
                    borderColor: "#E5E7E9",
                    borderWidth: 1,
                    borderRadius: normalize(10),
                    width: windowWidth * 0.86,
                    height: windowHeight * 0.06,
                  }}
                  buttonTextStyle={{
                    textAlign: "left",
                    fontSize: normalize(12),
                    color: "#393D43",
                    fontFamily: `${DataFont.empatratus}`,
                  }}
                  rowTextStyle={{
                    fontSize: normalize(12),
                    color: "#393D43",
                    fontFamily: `${DataFont.empatratus}`,
                  }}
                  renderDropdownIcon={() => {
                    return (
                      <Icon
                        name="caret-down"
                        size={normalize(20)}
                        color="#424242"
                      />
                    );
                  }}
                  // dropdownIconPosition={"left"}
                  // defaultValue={Provinsiawal}
                  // defaultValueByIndex={0}
                  // defaultValueByIndex={keyProvinsiAwal}
                  defaultButtonText={`${Provinsiawal}`}
                  buttonTextAfterSelection={(selectedItem, index) => {
                    // text represented after item is selected
                    // if data array is an array of objects then return selectedItem.property to render after item is selected
                    return selectedItem.province_name;
                  }}
                  rowTextForSelection={(item, index) => {
                    // text represented for each item in dropdown
                    // if data array is an array of objects then return item.property to represent item in dropdown
                    return item.province_name;
                  }}
                />
              </View>

              <View padding={10} />
              <Text
                allowFontScaling={false}
                style={{
                  color: "#393D43",
                  fontFamily: `${DataFont.limaratus}`,
                  fontSize: normalize(13),
                }}
              >
                Kota
              </Text>

              <View
                style={{
                  width: windowWidth * 0.86,
                  height: windowHeight * 0.06,
                  // paddingLeft: normalize(10),
                }}
              >
                <SelectDropdown
                  data={DataCity}
                  onSelect={(selectedItem, index) => {
                    setkeyCityAwal(index);
                    setidCityAwal(selectedItem.city_id);
                    setCityAwal(selectedItem.city_name);
                  }}
                  buttonStyle={{
                    borderColor: "#E5E7E9",
                    borderWidth: 1,
                    borderRadius: normalize(10),
                    width: windowWidth * 0.86,
                    height: windowHeight * 0.06,
                  }}
                  buttonTextStyle={{
                    textAlign: "left",
                    fontSize: normalize(12),
                    color: "#393D43",
                    fontFamily: `${DataFont.empatratus}`,
                  }}
                  rowTextStyle={{
                    fontSize: normalize(12),
                    color: "#393D43",
                    fontFamily: `${DataFont.empatratus}`,
                  }}
                  renderDropdownIcon={() => {
                    return (
                      <Icon
                        name="caret-down"
                        size={normalize(20)}
                        color="#424242"
                      />
                    );
                  }}
                  // dropdownIconPosition={"left"}
                  // defaultValueByIndex={keyKabupatenAwal}
                  // defaultValue={NameDelivery}
                  // defaultButtonText={"oke"}
                  // defaultButtonText={`${CityAwal}`}
                  buttonTextAfterSelection={(selectedItem, index) => {
                    // text represented after item is selected
                    // if data array is an array of objects then return selectedItem.property to render after item is selected
                    return selectedItem.city_name;
                  }}
                  rowTextForSelection={(item, index) => {
                    // text represented for each item in dropdown
                    // if data array is an array of objects then return item.property to represent item in dropdown
                    return item.city_name;
                  }}
                />
              </View>

              <View padding={10} />
              <Text
                allowFontScaling={false}
                style={{
                  color: "#393D43",
                  fontFamily: `${DataFont.limaratus}`,
                  fontSize: normalize(13),
                }}
              >
                Kabupaten
              </Text>

              <View
                style={{
                  width: windowWidth * 0.86,
                  height: windowHeight * 0.06,
                  // paddingLeft: normalize(10),
                }}
              >
                <SelectDropdown
                  data={DataKabupaten}
                  onSelect={(selectedItem, index) => {
                    setkeyKabupatenAwal(index);
                    setidKabupatenAwal(selectedItem.district_id);
                    setKabupatenAwal(selectedItem.district_name);
                  }}
                  buttonStyle={{
                    borderColor: "#E5E7E9",
                    borderWidth: 1,
                    borderRadius: normalize(10),
                    width: windowWidth * 0.86,
                    height: windowHeight * 0.06,
                  }}
                  buttonTextStyle={{
                    textAlign: "left",
                    fontSize: normalize(12),
                    color: "#393D43",
                    fontFamily: `${DataFont.empatratus}`,
                  }}
                  rowTextStyle={{
                    fontSize: normalize(12),
                    color: "#393D43",
                    fontFamily: `${DataFont.empatratus}`,
                  }}
                  renderDropdownIcon={() => {
                    return (
                      <Icon
                        name="caret-down"
                        size={normalize(20)}
                        color="#424242"
                      />
                    );
                  }}
                  // dropdownIconPosition={"left"}
                  // defaultValueByIndex={keyKabupatenAwal}
                  // defaultValue={NameDelivery}
                  // defaultButtonText={"oke"}
                  // defaultButtonText={`${KabupatenAwal}`}
                  buttonTextAfterSelection={(selectedItem, index) => {
                    // text represented after item is selected
                    // if data array is an array of objects then return selectedItem.property to render after item is selected
                    return selectedItem.district_name;
                  }}
                  rowTextForSelection={(item, index) => {
                    // text represented for each item in dropdown
                    // if data array is an array of objects then return item.property to represent item in dropdown
                    return item.district_name;
                  }}
                />
              </View>

              <View padding={10} />
              <Text
                allowFontScaling={false}
                style={{
                  color: "#393D43",
                  fontFamily: `${DataFont.limaratus}`,
                  fontSize: normalize(13),
                }}
              >
                kecamatan
              </Text>

              <View
                style={{
                  width: windowWidth * 0.86,
                  height: windowHeight * 0.06,
                  // paddingLeft: normalize(10),
                }}
              >
                <SelectDropdown
                  data={DataKecamatan}
                  onSelect={(selectedItem, index) => {
                    setkeyKecamatanAwal(index);
                    setidKecamatanAwal(selectedItem.sub_district_id);
                    setKecamatanAwal(selectedItem.sub_district_name);
                    setPostalCode(selectedItem.postal_code);
                  }}
                  buttonStyle={{
                    borderColor: "#E5E7E9",
                    borderWidth: 1,
                    borderRadius: normalize(10),
                    width: windowWidth * 0.86,
                    height: windowHeight * 0.06,
                  }}
                  buttonTextStyle={{
                    textAlign: "left",
                    fontSize: normalize(12),
                    color: "#393D43",
                    fontFamily: `${DataFont.empatratus}`,
                  }}
                  rowTextStyle={{
                    fontSize: normalize(12),
                    color: "#393D43",
                    fontFamily: `${DataFont.empatratus}`,
                  }}
                  renderDropdownIcon={() => {
                    return (
                      <Icon
                        name="caret-down"
                        size={normalize(20)}
                        color="#424242"
                      />
                    );
                  }}
                  // dropdownIconPosition={"left"}
                  // defaultValueByIndex={keyKecamatanAwal}
                  // defaultValue={NameDelivery}
                  // defaultButtonText={"oke"}
                  // defaultButtonText={`${KecamatanAwal}`}
                  buttonTextAfterSelection={(selectedItem, index) => {
                    // text represented after item is selected
                    // if data array is an array of objects then return selectedItem.property to render after item is selected
                    return selectedItem.sub_district_name;
                  }}
                  rowTextForSelection={(item, index) => {
                    // text represented for each item in dropdown
                    // if data array is an array of objects then return item.property to represent item in dropdown
                    return item.sub_district_name;
                  }}
                />
              </View>

              <View padding={10} />
              <View
                style={{
                  // backgroundColor:"blue",
                  flex: 1,
                  justifyContent: "flex-end",
                }}
              >
                <TouchableOpacity
                  // disabled={validateButton}
                  onPress={Simpan}
                  style={{
                    width: windowWidth * 0.86,
                    height: "auto",
                    backgroundColor: "#4AB363",
                    // backgroundColor: `${
                    //   validateButton == true ? "grey" : "#4AB363"
                    // }`,
                    padding: 10,
                    justifyContent: "center",
                    alignItems: "center",
                    borderRadius: 12,
                  }}
                >
                  <Text
                    allowFontScaling={false}
                    style={{
                      fontFamily: `${DataFont.enamratus}`,
                      fontSize: normalize(18),
                      color: "white",
                    }}
                  >
                    Simpan
                  </Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </ScrollView>
      )}
    </View>
  );
}

const styles = StyleSheet.create({});