import AppBar from "../../../components/AppBar";
import Layout from "../../../components/Layout";
import WithAuth from "../../../components/WithAuth";
import apiOdoo from "../../../helpers/apiOdoo";
import ReactSelect from "react-select";
import { useEffect, useState } from "react";

export default function CreateAddress() {
  // Master Data
  const [cities, setCities] = useState([]);
  const [districts, setDistricts] = useState([]);
  const [subDistricts, setSubDistricts] = useState([]);

  // Input Data
  const [city, setCity] = useState(null);
  const [district, setDistrict] = useState(null);
  const [subDistrict, setSubDistrict] = useState(null);
  const [formValue, setFormValue] = useState({});
  
  useEffect(() => {
    if (cities.length == 0) {
      const loadCities = async () => {
        let dataCities = await apiOdoo('GET', '/api/v1/city');
        setCities(dataCities);
      };
      loadCities();
    }
  }, [cities]);
  
  useEffect(() => {
    setDistrict(null);
    if (city) {
      const loadDistricts = async () => {
        let dataDistricts = await apiOdoo('GET', `/api/v1/district?city_id=${city.id}`);
        setDistricts(dataDistricts);
      };
      loadDistricts();
    }
  }, [city]);

  useEffect(() => {
    setSubDistrict(null);
    if (district) {
      const loadSubDistricts = async () => {
        let dataSubDistricts = await apiOdoo('GET', `/api/v1/sub_district?district_id=${district.id}`);
        console.log(dataSubDistricts);
        setSubDistricts(dataSubDistricts);
      };
      loadSubDistricts();
    }
  }, [district]);

  const handleChange = (e) => {
    setFormValue({
      ...formValue,
      [e.target.name]: e.target.value
    });
  };
  
  return (
    <WithAuth>
      <Layout>
        <AppBar title="Tambah Alamat" />

        <form className="px-4">
          <label className="form-label mt-4 mb-2">Label Alamat</label>
          <input 
            type="text"
            className="form-input" 
            placeholder="Invoice Address"
            name="name"
          />
          <label className="form-label mt-4 mb-2">Nama Kontak</label>
          <input 
            type="text"
            className="form-input" 
            placeholder="John Doe"
            name="name"
          />
          <label className="form-label mt-4 mb-2">Email <span className="text-gray_r-11">(opsional)</span></label>
          <input 
            type="text"
            className="form-input" 
            placeholder="johndoe@gmail.com"
            name="name"
          />
          <label className="form-label mt-4 mb-2">No. Handphone</label>
          <input 
            type="tel"
            className="form-input" 
            placeholder="08xxxxxxxx"
            name="mobile"
          />
          <label className="form-label mt-4 mb-2">Alamat</label>
          <input 
            type="text"
            className="form-input" 
            placeholder="Jl. Bandengan Utara"
            name="street"
          />
          <label className="form-label mt-4 mb-2">Kota</label>
          <ReactSelect
            placeholder="Pilih kota..."
            classNamePrefix="form-select"
            classNames={{ control: (state) => state.menuIsOpen || state.isFocused ? '!border-yellow_r-9' : '' }}
            options={cities}
            getOptionLabel={e => e.name}
            getOptionValue={e => e.id}
            onChange={(value) => setCity(value)}
            value={city}
          />
          <label className="form-label mt-4 mb-2">Kecamatan <span className="text-gray_r-11">(opsional)</span></label>
          <ReactSelect
            placeholder="Pilih Kecamatan..."
            classNamePrefix="form-select"
            classNames={{ control: (state) => state.menuIsOpen || state.isFocused ? '!border-yellow_r-9' : '' }}
            options={districts}
            getOptionLabel={e => e.name}
            getOptionValue={e => e.id}
            onChange={(value) => setDistrict(value)}
            value={district}
            isDisabled={!city}
          />
          <label className="form-label mt-4 mb-2">Kelurahan <span className="text-gray_r-11">(opsional)</span></label>
          <ReactSelect
            placeholder="Pilih Kelurahan..."
            classNamePrefix="form-select"
            classNames={{ control: (state) => state.menuIsOpen || state.isFocused ? '!border-yellow_r-9' : '' }}
            options={subDistricts}
            getOptionLabel={e => e.name}
            getOptionValue={e => e.id}
            onChange={(value) => setSubDistrict(value)}
            value={subDistrict}
            isDisabled={!district}
          />
          <label className="form-label mt-4 mb-2">Kode Pos</label>
          <input 
            type="number"
            className="form-input" 
            placeholder="10100"
            name="zip"
          />

          <button 
            type="button" 
            className="btn-yellow float-right mt-6 w-full"
          >
            Simpan
          </button>
        </form>
      </Layout>
    </WithAuth>
  );
}