path: root/src/lib/address/components/CreateAddress.jsx

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

import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
import { Button } from '@chakra-ui/react';
import { MapPinIcon } from 'lucide-react';
import PinPointMap from '../../maps/components/PinPointMap';
import { useMaps } from '../../maps/stores/useMaps';

const CreateAddress = () => {
  const auth = useAuth();
  const router = useRouter();
  const {
    register,
    formState: { errors },
    handleSubmit,
    watch,
    setValue,
    control,
  } = useForm({
    resolver: yupResolver(validationSchema),
    defaultValues,
  });
  const { addresses = [] } = useAddresses(); // Ensure addresses is an array
  const [states, setState] = useState([]);
  const [cities, setCities] = useState([]);
  const [districts, setDistricts] = useState([]);
  const [subDistricts, setSubDistricts] = useState([]);
  const [filteredTypes, setFilteredTypes] = useState(types); // State to manage filtered types
  const {
    addressMaps,
    selectedPosition,
    detailAddress,
    setAddressMaps,
    pinedMaps,
    setPinedMaps
  } = useMaps();
  
  const resetPin = useMaps((state) => state.resetPin);
  const [showValidationPopup, setShowValidationPopup] = useState(false);
  const [popupMessage, setPopupMessage] = useState("");
  const [selectedCityName, setSelectedCityName] = useState("");
  const [normalizedDistrict, setNormalizedDistrict] = useState("");

   useEffect(() => {
    resetPin();
  }, [resetPin]);

  useEffect(() => {
    const loadState = async () => {
      let dataState = await stateApi({ tempo: false });
      dataState = dataState.map((state) => ({
        value: state.id,
        label: state.name,
      }));
      setState(dataState);
    };
    loadState();
    setAddressMaps('');
  }, []);

  useEffect(() => {
    if (detailAddress) {
      setValue('zip', detailAddress.postalCode);
      const selectedState = states.find(
        (state) =>
          (detailAddress?.province || "").includes(state.label) ||
          state.label.includes(detailAddress?.province)
      );
      setValue('state', selectedState?.value);
      setValue('street', detailAddress?.street);
    
    }
  }, [detailAddress, setValue]);

  const watchState = watch('state');
  useEffect(() => {
    setValue('city', '');
    if (watchState) {
      const loadCities = async () => {
        let dataCities = await cityApi({ stateId: watchState });
        dataCities = dataCities.map((city) => ({
          value: city.id,
          label: city.name,
        }));
        setCities(dataCities);
      };
      loadCities();
    }
  }, [watchState, setValue]);


  useEffect(() => {
    if (addresses) {
      let hasContactAddress = false;

      for (let i = 0; i < addresses?.data?.length; i++) {
        if (addresses.data[i].type === 'contact') {
          hasContactAddress = true;
          break;
        }
      }
      if (hasContactAddress) {
        setFilteredTypes(types.filter((type) => type.value !== 'contact'));
      } else {
        setFilteredTypes(types);
      }
    }
  }, [auth]);

  const normalizeName = (name = "") => {
    return name
      .toLowerCase()
      .replace(/\bkabupaten\b/gi, "")
      .replace(/\bkota\b/gi, "")
      .trim();
  };

  useEffect(() => {
    if (detailAddress?.district) {
      const normalizedDistrict = normalizeName(detailAddress.district);

      const selectedCity = cities.find((city) => {
        const normalizedCity = normalizeName(city.label);
        return normalizedCity === normalizedDistrict;
      });

      if (selectedCity) {
        setValue("city", selectedCity.value);
      }
    }
  }, [cities, detailAddress, setValue]);

  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]);

  useEffect(() => {
    if (detailAddress && Object.keys(detailAddress).length > 0) {
      const selectedDistrict = districts.find(
        (district) =>
          detailAddress.subDistrict
            .toLowerCase()
            .includes(district.label.toLowerCase()) ||
          district.label
            .toLowerCase()
            .includes(detailAddress.subDistrict.toLowerCase())
      );
      setValue('district', selectedDistrict?.value);
    }
  }, [districts, detailAddress, 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]);

  useEffect(() => {
    if (detailAddress && Object.keys(detailAddress).length > 0) {
      const selectedSubDistrict = subDistricts.find(
        (district) =>
          detailAddress.village
            .toLowerCase()
            .includes(district.label.toLowerCase()) ||
          district.label
            .toLowerCase()
            .includes(detailAddress.village.toLowerCase())
      );

      setValue('subDistrict', selectedSubDistrict?.value);
    }
  }, [subDistricts, detailAddress, setValue]);

  
  
  // console.log(selectedCityName, '=', normalizedDistrict);
  const onSubmitHandler = async (values) => {
    if (detailAddress) {
      const cityName = normalizeName(
        cities.find((c) => c.value === watch("city"))?.label || ""
      );
      const districtName = normalizeName(detailAddress?.district || "");
      // console.log(cityName, '=', districtName);

      if (cityName && cityName !== districtName) {
        setPopupMessage("Titik Koordinat tidak sesuai dengan Kota yang dipilih");
        setShowValidationPopup(true);
        return;
      }
    }
    const data = {
      ...values,
      state_id: values.state,
      city_id: values.city,
      district_id: values.district,
      sub_district_id: values.subDistrict,
      parent_id: auth.partnerId,
      latitude: selectedPosition?.lat,
      longtitude: selectedPosition?.lng,
      address_map: addressMaps,
    };
    const address = await createAddressApi({ data });
    if (address?.id) {
      toast.success('Berhasil menambahkan alamat');
      router.back();
    }
  };

  return (
    <>
      <BottomPopup
        className=' !h-[75%]'
        title='Pin Koordinat Address'
        active={pinedMaps}
        close={() => setPinedMaps(false)}
      >
        <div className='flex mt-4'>
          <PinPointMap />
        </div>
      </BottomPopup>
      <BottomPopup
        active={showValidationPopup}
        close={() => setShowValidationPopup(false)}
      >
        <div className="leading-7 text-gray_r-12/80 text-center">
          {popupMessage}
        </div>

        <div className="flex justify-center mt-6">
          <button
            className="btn-solid-red w-full md:w-auto"
            type="button"
            onClick={() => setShowValidationPopup(false)}
          >
            OK
          </button>
        </div>
      </BottomPopup>
      <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'>
          <form onSubmit={handleSubmit(onSubmitHandler)}>
            <div className='mb-4 items-start'>
              <label className='form-label mb-2'>Koordinat Alamat</label>
              {addressMaps ? (
                <div className='flex items-center'>
                  <button type='button' className="flex items-center justify-center me-3 p-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition">
                  <MapPinIcon class='h-6 w-6' onClick={() => setPinedMaps(true)} />{' '}
                    </button>
                  <span> {addressMaps} </span>
                </div>
              ) : (
                <Button variant='plain' style={{ padding: 0 }} onClick={() => setPinedMaps(true)}>
                 <button type='button' className="flex items-center justify-center me-3 p-2 bg-red-500 text-white rounded-full hover:bg-red-600 transition">
                    <MapPinIcon className="h-6 w-6" />
                  </button>
                    Pin Koordinat Alamat
                </Button>
              )}
            </div>
            <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={filteredTypes}
                    />
                  )}
                />
                <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='contoh@email.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'>Provinsi</label>
                <Controller
                  name='state'
                  control={control}
                  render={(props) => (
                    <HookFormSelect {...props} options={states} />
                  )}
                />
                <div className='text-caption-2 text-danger-500 mt-1'>
                  {errors.state?.message}
                </div>
              </div>

              <div>
                <label className='form-label mb-2'>Kota</label>
                <Controller
                  name='city'
                  control={control}
                  render={(props) => (
                    <HookFormSelect
                      {...props}
                      options={cities}
                      disabled={!watchState}
                    />
                  )}
                />
                <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'),
  mobile: Yup.string().required('Harus di-isi'),
  street: Yup.string().required('Harus di-isi'),
  zip: Yup.string().required('Harus di-isi'),
  state: Yup.string().required('Harus di-pilih'),
  city: Yup.string().required('Harus di-pilih'),
  district: Yup.string().required('Harus di-pilih'),
});

const defaultValues = {
  type: '',
  name: '',
  email: '',
  mobile: '',
  street: '',
  state: '',
  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;