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

const CreateAddress = () => {
  const auth = useAuth()
  const router = useRouter()
  const { 
    register, 
    formState: { errors }, 
    handleSubmit,
    watch,
    setValue,
    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)
      }
      loadDistricts()
    }
  }, [ watchCity, setValue ])

  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)
      }
      loadSubDistricts()
    }
   }, [ watchDistrict, setValue ])

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

    const address = await createAddressApi({ data })
    if (address?.id) {
      toast.success('Berhasil menambahkan 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="contoh@email.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 contoh@email.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 defaultValues = {
  type: '',
  name: '',
  email: '',
  mobile: '',
  street: '',
  city: '',
  district: '',
  subDistrict: '',
  zip: '',
}

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

export default CreateAddress