import { yupResolver } from "@hookform/resolvers/yup"
import { useRouter } from "next/router"
import { useEffect, useState } from "react"
import * as Yup from "yup"
import cityApi from "../api/cityApi"
import { Controller, useForm } from "react-hook-form"
import districtApi from "../api/districtApi"
import subDistrictApi from "../api/subDistrictApi"
import editAddressApi from "../api/editAddressApi"
import HookFormSelect from "@/core/components/elements/Select/HookFormSelect"
import { toast } from "react-hot-toast"

const EditAddress = ({ id, defaultValues }) => {
  const router = useRouter()
  const {
    register,
    formState: { errors },
    handleSubmit,
    watch,
    setValue,
    getValues,
    control,
  } = useForm({
    resolver: yupResolver(validationSchema),
    defaultValues,
  })

  const [cities, setCities] = useState([])
  const [districts, setDistricts] = useState([])
  const [subDistricts, setSubDistricts] = useState([])

  useEffect(() => {
    const loadCities = async () => {
      let dataCities = await cityApi()
      dataCities = dataCities.map((city) => ({
        value: city.id,
        label: city.name,
      }))
      setCities(dataCities)
    }
    loadCities()
  }, [])

  const watchCity = watch("city")
  useEffect(() => {
    setValue("district", "")
    if (watchCity) {
      const loadDistricts = async () => {
        let dataDistricts = await districtApi({ cityId: watchCity })
        dataDistricts = dataDistricts.map((district) => ({
          value: district.id,
          label: district.name,
        }))
        setDistricts(dataDistricts)
        let oldDistrict = getValues("oldDistrict")
        if (oldDistrict) {
          setValue("district", oldDistrict)
          setValue("oldDistrict", "")
        }
      }
      loadDistricts()
    }
  }, [watchCity, setValue, getValues])

  const watchDistrict = watch("district")
  useEffect(() => {
    setValue("subDistrict", "")
    if (watchDistrict) {
      const loadSubDistricts = async () => {
        let dataSubDistricts = await subDistrictApi({
          districtId: watchDistrict,
        })
        dataSubDistricts = dataSubDistricts.map((district) => ({
          value: district.id,
          label: district.name,
        }))
        setSubDistricts(dataSubDistricts)
        let oldSubDistrict = getValues("oldSubDistrict")

        if (oldSubDistrict) {
          setValue("subDistrict", oldSubDistrict)
          setValue("oldSubDistrict", "")
        }
      }
      loadSubDistricts()
    }
  }, [watchDistrict, setValue, getValues])

  const onSubmitHandler = async (values) => {
    const data = {
      ...values,
      city_id: values.city,
      district_id: values.district,
      sub_district_id: values.subDistrict,
    }

    const address = await editAddressApi({ id, data })
    if (address?.id) {
      toast.success("Berhasil mengubah alamat")
      router.back()
    }
  }

  return (
    <form
      className="p-4 flex flex-col gap-y-4"
      onSubmit={handleSubmit(onSubmitHandler)}
    >
      <div>
        <label className="form-label mb-2">Label Alamat</label>
        <Controller
          name="type"
          control={control}
          render={(props) => (
            <HookFormSelect {...props} isSearchable={false} options={types} />
          )}
        />
        <div className="text-caption-2 text-red_r-11 mt-1">
          {errors.type?.message}
        </div>
      </div>

      <div>
        <label className="form-label mb-2">Nama</label>
        <input
          {...register("name")}
          placeholder="John Doe"
          type="text"
          className="form-input"
        />
        <div className="text-caption-2 text-red_r-11 mt-1">
          {errors.name?.message}
        </div>
      </div>

      <div>
        <label className="form-label mb-2">Email</label>
        <input
          {...register("email")}
          placeholder="johndoe@example.com"
          type="email"
          className="form-input"
        />
        <div className="text-caption-2 text-red_r-11 mt-1">
          {errors.email?.message}
        </div>
      </div>

      <div>
        <label className="form-label mb-2">Mobile</label>
        <input
          {...register("mobile")}
          placeholder="08xxxxxxxx"
          type="tel"
          className="form-input"
        />
        <div className="text-caption-2 text-red_r-11 mt-1">
          {errors.mobile?.message}
        </div>
      </div>

      <div>
        <label className="form-label mb-2">Alamat</label>
        <input
          {...register("street")}
          placeholder="Jl. Bandengan Utara 85A"
          type="text"
          className="form-input"
        />
        <div className="text-caption-2 text-red_r-11 mt-1">
          {errors.street?.message}
        </div>
      </div>

      <div>
        <label className="form-label mb-2">Kode Pos</label>
        <input
          {...register("zip")}
          placeholder="10100"
          type="number"
          className="form-input"
        />
        <div className="text-caption-2 text-red_r-11 mt-1">
          {errors.zip?.message}
        </div>
      </div>

      <div>
        <label className="form-label mb-2">Kota</label>
        <Controller
          name="city"
          control={control}
          render={(props) => <HookFormSelect {...props} options={cities} />}
        />
        <div className="text-caption-2 text-red_r-11 mt-1">
          {errors.city?.message}
        </div>
      </div>

      <div>
        <label className="form-label mb-2">Kecamatan</label>
        <Controller
          name="district"
          control={control}
          render={(props) => (
            <HookFormSelect
              {...props}
              options={districts}
              disabled={!watchCity}
            />
          )}
        />
      </div>

      <div>
        <label className="form-label mb-2">Kelurahan</label>
        <Controller
          name="subDistrict"
          control={control}
          render={(props) => (
            <HookFormSelect
              {...props}
              options={subDistricts}
              disabled={!watchDistrict}
            />
          )}
        />
      </div>

      <button type="submit" className="btn-yellow mt-2 w-full">
        Simpan
      </button>
    </form>
  )
}

const validationSchema = Yup.object().shape({
  type: Yup.string().required("Harus di-pilih"),
  name: Yup.string().min(3, "Minimal 3 karakter").required("Harus di-isi"),
  email: Yup.string()
    .email("Format harus seperti johndoe@example.com")
    .required("Harus di-isi"),
  mobile: Yup.string().required("Harus di-isi"),
  street: Yup.string().required("Harus di-isi"),
  zip: Yup.string().required("Harus di-isi"),
  city: Yup.string().required("Harus di-pilih"),
})

const types = [
  { value: "contact", label: "Contact Address" },
  { value: "invoice", label: "Invoice Address" },
  { value: "delivery", label: "Delivery Address" },
  { value: "other", label: "Other Address" },
]

export default EditAddress