"use client";

import { useRef } from "react";
import { Autocomplete, LoadScript } from "@react-google-maps/api";
import { useLanguage } from "@/app/context/LanguageContext";

const libraries: ("places")[] = ["places"];

interface Props {
  label: string;
  register: any;
  setValue: any;
  error: any;
}

export default function LocationAutocomplete({
  label,
  register,
  setValue,
  error,
}: Props) {
  const { t } = useLanguage();
  const autocompleteRef = useRef<google.maps.places.Autocomplete | null>(null);

  const onLoad = (autocomplete: google.maps.places.Autocomplete) => {
    autocompleteRef.current = autocomplete;
  };

  const onPlaceChanged = () => {
    if (!autocompleteRef.current) return;

    const place = autocompleteRef.current.getPlace();

    let city = "";
    let state = "";
    let country = "";
    let postalCode = "";

    place.address_components?.forEach((component) => {
      const types = component.types;

      if (types.includes("locality")) city = component.long_name;

      if (types.includes("administrative_area_level_1"))
        state = component.long_name;

      if (types.includes("country")) country = component.long_name;

      if (types.includes("postal_code"))
        postalCode = component.long_name;
    });

    setValue("birthPlace", place.formatted_address || "");
    setValue("city", city);
    setValue("state", state);
    setValue("country", country);
    setValue("pincode", postalCode);
  };

  return (
    <LoadScript
      googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY!}
      libraries={libraries}
    >
      <div className="mb-3">
        <label className="form-label">{label}</label>

        <Autocomplete onLoad={onLoad} onPlaceChanged={onPlaceChanged}>
          <input
            className="form-control"
            placeholder={t("auth.locationAutocomplete.placeholder", "Search location")}
            {...register("birthPlace", {
              required: t("auth.locationAutocomplete.required", "Birth Place is required"),
            })}
          />
        </Autocomplete>

        {error && (
          <small className="text-danger">
            {error.message}
          </small>
        )}
      </div>
    </LoadScript>
  );
}