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'
import Menu from '@/lib/auth/components/Menu'

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 (
    <div className='max-w-none md:container mx-auto flex p-0 md:py-10'>
      <div className='hidden md:block w-3/12 pr-4'>
        <Menu />
      </div>
      <div className='w-full md:w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
        <h1 className='text-title-sm font-semibold mb-6 hidden md:block'>Ubah Alamat</h1>
        <form onSubmit={handleSubmit(onSubmitHandler)}>
          <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
            <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-danger-500 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-danger-500 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-danger-500 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-danger-500 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-danger-500 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-danger-500 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-danger-500 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 className='text-caption-2 text-danger-500 mt-1'>{errors.district?.message}</div>
            </div>

            <div>
              <label className='form-label mb-2'>Kelurahan</label>
              <Controller
                name='subDistrict'
                control={control}
                render={(props) => (
                  <HookFormSelect {...props} options={subDistricts} disabled={!watchDistrict} />
                )}
              />
            </div>
          </div>
          <button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'>
            Simpan
          </button>
        </form>
      </div>
    </div>
  )
}

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'),
  district: 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