"use client";

import {
  useEffect,
  useState,
  useMemo,
  useRef,
  useImperativeHandle,
  forwardRef,
} from "react";
import { useForm, Controller } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { toast } from "react-toastify";
import { Form } from "@/components/ui/form";
import { FormFieldWrapper } from "@/components/ui/form-field";
import { useTranslation } from "react-i18next";
import { useCheckout } from "@/context/helpers/checkout/CheckoutContext";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  FormItem,
  FormLabel,
  FormMessage,
  FormControl,
} from "@/components/ui/form";
import Loading from "@/components/Loading";
import { useRouter } from "next/router";

// Dynamic checkout form that generates fields from API
const CheckoutForm = forwardRef((_, ref) => {
  const { t, i18n } = useTranslation("checkout");
  const isArabic = i18n.language === "ar";
  const router = useRouter();

  const {
    getCheckoutForm,
    checkoutFormInputs,
    checkoutFormCountries,
    checkoutFormCities,
    checkoutFormDistricts,
    addresses,
    newAddress,
    setNewAddress,
    selectedAddress,
    setSelectedAddress,
    setOrderAddress,
    setOrderNote,
    isLoading,
    getShippingMethods,
    getAddresses,
  } = useCheckout();

  const [selectedCountry, setSelectedCountry] = useState(null);
  const [selectedState, setSelectedState] = useState(null);
  const [selectedCity, setSelectedCity] = useState(null);
  const autoPopulatedRef = useRef(false);
  const restoredFromContextRef = useRef(false);

  // Fetch checkout form data on mount
  useEffect(() => {
    getCheckoutForm();
    getAddresses();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // Only set newAddress to true if no addresses exist
  // Don't automatically switch away from newAddress if user explicitly selected it
  useEffect(() => {
    if ((!addresses || addresses.length === 0) && !newAddress) {
      setNewAddress(true);
    }
    // Don't automatically set newAddress to false when addresses load
    // Let the user choose whether to use existing or add new
  }, [addresses, newAddress, setNewAddress]);

  // Auto-select and populate first address when addresses are loaded
  // Only auto-select if user hasn't explicitly chosen "new address"
  useEffect(() => {
    // Auto-select first address if addresses exist and no address is currently selected
    // AND user hasn't explicitly selected "new address"
    if (
      addresses &&
      addresses.length > 0 &&
      !selectedAddress &&
      !newAddress &&
      checkoutFormInputs &&
      checkoutFormInputs.length > 0 &&
      !autoPopulatedRef.current
    ) {
      const firstAddress = addresses[0];
      autoPopulatedRef.current = true;
      // Set selected address and populate form
      const firstAddressId = firstAddress.id || firstAddress.entity_id;
      setSelectedAddress(firstAddressId);
      handleAddressSelect(firstAddressId);
    }

    // Also handle case where selectedAddress is already set (e.g., user selection)
    // Only if user hasn't explicitly selected "new address"
    else if (
      selectedAddress &&
      addresses &&
      addresses.length > 0 &&
      !newAddress &&
      checkoutFormInputs &&
      checkoutFormInputs.length > 0 &&
      !autoPopulatedRef.current
    ) {
      const address = addresses.find(
        (addr) => (addr.id || addr.entity_id) === selectedAddress
      );
      if (address) {
        autoPopulatedRef.current = true;
        handleAddressSelect(selectedAddress);
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [addresses, checkoutFormInputs, newAddress, selectedAddress]);

  // Restore form data from localStorage when returning from review page
  useEffect(() => {
    if (
      checkoutFormInputs &&
      checkoutFormInputs.length > 0 &&
      newAddress &&
      !restoredFromContextRef.current &&
      !autoPopulatedRef.current &&
      typeof window !== "undefined"
    ) {
      // Try localStorage first (more reliable for page navigation)
      const savedAddressData = localStorage.getItem("checkoutAddressData");
      const savedOrderNotes = localStorage.getItem("checkoutOrderNotes");

      if (savedAddressData) {
        try {
          const addressData = JSON.parse(savedAddressData);

          if (Object.keys(addressData).length > 0) {
            console.log("Restoring form data from localStorage");
            restoredFromContextRef.current = true;

            // Set dropdowns in correct order with timing for dependent fields
            // 1. Set country first
            if (addressData.country) {
              setSelectedCountry(addressData.country);
            }

            // 2. Set state/city after country (wait for dropdown to load)
            setTimeout(() => {
              if (addressData.city) {
                setSelectedState(addressData.city);
              }

              // 3. Set district after city (wait for dropdown to load)
              setTimeout(() => {
                if (addressData.district) {
                  setSelectedCity(addressData.district);
                }
              }, 100);
            }, 100);

            // Prepare form data including order notes
            const formData = {
              ...addressData,
              ...(savedOrderNotes && { orderNotes: savedOrderNotes }),
            };

            // Populate form with slight delay to ensure dropdowns are ready
            setTimeout(() => {
              form.reset(formData);
            }, 250);

            // Also update context
            setOrderAddress(addressData);
            if (savedOrderNotes) {
              setOrderNote(savedOrderNotes);
            }
          }
        } catch (error) {
          console.error("Failed to restore checkout data:", error);
        }
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [checkoutFormInputs, newAddress]);

  // Build dynamic Zod schema from API inputs
  const formSchema = useMemo(() => {
    if (!checkoutFormInputs || checkoutFormInputs.length === 0) {
      return z.object({});
    }

    const schemaFields = {};
    checkoutFormInputs.forEach((input) => {
      const fieldName = input.input_name;
      let fieldSchema = z.string();

      if (input.required) {
        fieldSchema = fieldSchema.min(1, `${input.label} is required`);
      } else {
        fieldSchema = fieldSchema.optional();
      }

      schemaFields[fieldName] = fieldSchema;
    });

    // Add optional fields that might not be in inputs
    schemaFields.orderNotes = z.string().optional();

    return z.object(schemaFields);
  }, [checkoutFormInputs]);

  // Setup form with dynamic schema
  const form = useForm({
    resolver: zodResolver(formSchema),
    defaultValues: {},
  });

  // Expose submit handler via ref for external button (must be before any conditional returns)
  useImperativeHandle(ref, () => ({
    submit: () => {
      console.log("Form submit called");
      console.log("newAddress:", newAddress);
      console.log("selectedAddress:", selectedAddress);
      console.log("Form values:", form.getValues());
      console.log("Form errors:", form.formState.errors);

      // If using an existing address, skip form validation and use address data directly
      if (!newAddress && selectedAddress && addresses && addresses.length > 0) {
        const address = addresses.find(
          (addr) => (addr.id || addr.entity_id) === selectedAddress
        );
        if (address) {
          console.log("Using existing address, skipping validation");
          console.log("Address object:", address);
          
          // Use address data directly - ensure all fields have values
          // Use the same structure as handleAddressSelect for consistency
          const addressData = {
            first_name: address.first_name || "",
            last_name: address.last_name || "",
            email: address.email || "",
            phone: address.phone || "",
            address1: address.address1 || "",
            address2: address.address2 || "",
            postcode: address.postcode || "",
            country: address.country || "",
            city: address.city || "",
            state: address.state || "",
            district: address.CityId || address.district || "",
          };
          
          // If address has an ID, we can also use addressId for the API
          // But we still need the full data for localStorage
          const addressId = address.id || address.entity_id;
          
          // If address has an ID, we can use it for the API call
          // Otherwise, use the full address data
          const addressForAPI = addressId ? { addressId: addressId } : addressData;
          
          // Get order notes from form if provided
          const formValues = form.getValues();
          const orderNotes = formValues.orderNotes || "";
          
          // Set order address in context immediately
          // Use addressId if available, otherwise use full address data
          setOrderAddress(addressForAPI);
          
          // Save to localStorage for review page (critical for existing addresses)
          // Save both addressId and full address data for flexibility
          if (typeof window !== "undefined") {
            const dataToSave = addressId 
              ? { ...addressData, addressId: addressId }
              : addressData;
            
            localStorage.setItem(
              "checkoutAddressData",
              JSON.stringify(dataToSave)
            );
            
            // Save order notes separately if provided
            if (orderNotes) {
              localStorage.setItem("checkoutOrderNotes", orderNotes);
              setOrderNote(orderNotes);
            }
          }
          
          // Redirect to review order page
          router.push("/checkout/review-order");
          return;
        }
      }

      // For new address, validate form
      form.handleSubmit(
        (values) => {
          console.log("Form validation passed, submitting:", values);
          onSubmit(values);
        },
        (errors) => {
          console.error("Form validation failed:", errors);
          // Show first validation error
          const firstError = Object.values(errors)[0];
          if (firstError?.message) {
            toast.error(firstError.message);
          } else {
            toast.error("Please fill in all required fields.");
          }
        }
      )();
    },
  }));

  // Watch form values to update orderAddress
  // Use ref to track previous values and prevent unnecessary updates
  const prevValuesRef = useRef({});

  useEffect(() => {
    const subscription = form.watch((values) => {
      const addressData = {};
      let hasData = false;

      Object.entries(values || {}).forEach(([key, value]) => {
        if (key !== "orderNotes" && value && value !== "") {
          addressData[key] = value;
          hasData = true;
        }
      });

      // Only update if values actually changed
      const valuesString = JSON.stringify(addressData);
      const prevValuesString = JSON.stringify(prevValuesRef.current);

      if (hasData && valuesString !== prevValuesString) {
        prevValuesRef.current = addressData;
        setOrderAddress(addressData);

        // Also save to localStorage for persistence across navigation
        if (newAddress && typeof window !== "undefined") {
          localStorage.setItem(
            "checkoutAddressData",
            JSON.stringify(addressData)
          );
        }
      } else if (!hasData && Object.keys(prevValuesRef.current).length > 0) {
        prevValuesRef.current = {};
        setOrderAddress({});
      }
    });

    return () => subscription.unsubscribe();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [newAddress]);

  // Handle saved address selection
  const handleAddressSelect = async (addressId) => {
    setSelectedAddress(addressId);
    const address = addresses.find(
      (addr) => (addr.id || addr.entity_id) === addressId
    );
    if (address) {
      // Set country and state first so dropdowns show correct options
      if (address.country) {
        setSelectedCountry(address.country);
      }

      // Set state/city selection state
      // The city field in the form actually stores state ID
      if (address.city) {
        // Find the state ID that matches the city value
        if (address.country && checkoutFormCities?.[address.country]) {
          const states = checkoutFormCities[address.country];
          // Try to find state by code or name
          const state = states.find(
            (s) =>
              String(s.id) === String(address.city) ||
              s.code === address.city ||
              s.default_name === address.city
          );
          if (state) {
            setSelectedState(String(state.id));
          }
        }
      }

      // Populate form with selected address
      const formData = {
        first_name: address.first_name || "",
        last_name: address.last_name || "",
        email: address.email || "",
        phone: address.phone || "",
        address1: address.address1 || "",
        address2: address.address2 || "",
        postcode: address.postcode || "",
        country: address.country || "",
        city: address.city ? String(address.city) : "",
        state: address.state || "",
        district: address.CityId ? String(address.CityId) : "",
      };
      form.reset(formData);

      // Set order address
      setOrderAddress({
        first_name: address.first_name,
        last_name: address.last_name,
        email: address.email,
        phone: address.phone,
        address1: address.address1,
        address2: address.address2 || "",
        postcode: address.postcode,
        country: address.country,
        city: address.city,
        state: address.state,
        district: address.CityId || "",
      });

      // Get shipping methods for selected address
      if (addressId) {
        await getShippingMethods(addressId);
      }
    }
  };

  // Handle country change
  const handleCountryChange = (countryCode) => {
    setSelectedCountry(countryCode);
    setSelectedState(null);
    setSelectedCity(null);
    form.setValue("state", "");
    form.setValue("city", "");
    form.setValue("district", "");
  };

  // Handle state change
  const handleStateChange = (stateId) => {
    setSelectedState(stateId);
    setSelectedCity(null);
    // Don't clear city field - it should store the state ID
    // Only clear district when state changes
    form.setValue("district", "");
  };

  // Get available states based on selected country
  const availableStates = useMemo(() => {
    if (!selectedCountry || !checkoutFormCities) return [];
    return checkoutFormCities[selectedCountry] || [];
  }, [selectedCountry, checkoutFormCities]);

  // Get state code from state ID
  const getStateCode = (stateId) => {
    if (!selectedCountry || !checkoutFormCities) return null;
    const states = checkoutFormCities[selectedCountry] || [];
    const state = states.find((s) => String(s.id) === String(stateId));
    return state?.code || null;
  };

  // Get available districts (cities) based on selected state
  const availableDistricts = useMemo(() => {
    if (!selectedState || !checkoutFormDistricts) return [];
    const stateCode = getStateCode(selectedState);
    if (!stateCode) return [];
    return checkoutFormDistricts[stateCode] || [];
  }, [
    selectedState,
    checkoutFormDistricts,
    selectedCountry,
    checkoutFormCities,
  ]);

  // Render form field based on input type
  const renderFormField = (input) => {
    const fieldName = input.input_name;
    const label = input.label;
    const isRequired = input.required;
    const fieldType = input.type;

    if (fieldType === "select") {
      // Handle country select
      if (fieldName === "country") {
        return (
          <Controller
            key={fieldName}
            name={fieldName}
            control={form.control}
            render={({ field }) => (
              <FormItem className="space-y-2">
                <FormLabel className="mb-2">
                  {label} {isRequired && "*"}
                </FormLabel>
                <Select
                  onValueChange={(value) => {
                    field.onChange(value);
                    handleCountryChange(value);
                  }}
                  value={field.value ? String(field.value) : ""}
                >
                  <FormControl>
                    <SelectTrigger dir={isArabic ? "rtl" : "ltr"}>
                      <SelectValue placeholder={`Select ${label}`} />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent
                    dir={isArabic ? "rtl" : "ltr"}
                    className="max-h-[300px]"
                  >
                    {checkoutFormCountries?.map((country) => {
                      const translatedName = isArabic && country.translations?.[0]?.name
                        ? country.translations[0].name
                        : country.name;
                      return (
                        <SelectItem key={country.id} value={country.code}>
                          {translatedName}
                        </SelectItem>
                      );
                    })}
                  </SelectContent>
                </Select>
                <FormMessage />
              </FormItem>
            )}
          />
        );
      }

      // Handle state/city select
      if (fieldName === "city") {
        return (
          <Controller
            key={fieldName}
            name={fieldName}
            control={form.control}
            render={({ field }) => (
              <FormItem className="space-y-2">
                <FormLabel className="mb-2">
                  {label} {isRequired && "*"}
                </FormLabel>
                <Select
                  onValueChange={(value) => {
                    field.onChange(value);
                    handleStateChange(value);
                  }}
                  value={field.value ? String(field.value) : ""}
                  disabled={!selectedCountry}
                >
                  <FormControl>
                    <SelectTrigger dir={isArabic ? "rtl" : "ltr"}>
                      <SelectValue placeholder={`Select ${label}`} />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent
                    dir={isArabic ? "rtl" : "ltr"}
                    className="max-h-[300px]"
                  >
                    {availableStates.map((state) => {
                      const translatedName = isArabic && state.translations?.[0]?.default_name
                        ? state.translations[0].default_name
                        : state.default_name;
                      return (
                        <SelectItem key={state.id} value={String(state.id)}>
                          {translatedName}
                        </SelectItem>
                      );
                    })}
                  </SelectContent>
                </Select>
                <FormMessage />
              </FormItem>
            )}
          />
        );
      }

      // Handle district select
      if (fieldName === "district") {
        return (
          <Controller
            key={fieldName}
            name={fieldName}
            control={form.control}
            render={({ field }) => (
              <FormItem className="space-y-2">
                <FormLabel className="mb-2">
                  {label} {isRequired && "*"}
                </FormLabel>
                <Select
                  onValueChange={field.onChange}
                  value={field.value ? String(field.value) : ""}
                  disabled={!selectedState}
                >
                  <FormControl>
                    <SelectTrigger dir={isArabic ? "rtl" : "ltr"}>
                      <SelectValue placeholder={`Select ${label}`} />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent
                    dir={isArabic ? "rtl" : "ltr"}
                    className="max-h-[300px]"
                  >
                    {availableDistricts.map((district) => {
                      const translatedName = isArabic && district.translations?.[0]?.default_name
                        ? district.translations[0].default_name
                        : district.default_name;
                      return (
                        <SelectItem key={district.id} value={String(district.id)}>
                          {translatedName}
                        </SelectItem>
                      );
                    })}
                  </SelectContent>
                </Select>
                <FormMessage />
              </FormItem>
            )}
          />
        );
      }
    }

    // Default text input
    return (
      <FormFieldWrapper
        key={fieldName}
        control={form.control}
        name={fieldName}
        label={label}
        type="text"
        required={isRequired}
        optional={!isRequired}
      />
    );
  };

  // Submit handler - redirects to review order page
  const onSubmit = async (values) => {
    try {
      // Set order note if provided
      if (values.orderNotes) {
        setOrderNote(values.orderNotes);
      }

      // Prepare address data for order review
      const addressData = {};
      Object.entries(values).forEach(([key, value]) => {
        if (key !== "orderNotes" && value && value !== "") {
          addressData[key] = value;
        }
      });

      // Set order address in context
      setOrderAddress(addressData);

      // Save to localStorage for reliable persistence
      if (typeof window !== "undefined") {
        localStorage.setItem(
          "checkoutAddressData",
          JSON.stringify(addressData)
        );

        // Save order notes separately
        if (values.orderNotes) {
          localStorage.setItem("checkoutOrderNotes", values.orderNotes);
        }
      }

      // Redirect to review order page
      router.push("/checkout/review-order");
    } catch (error) {
      console.error("Form submission error", error);
      toast.error("Failed to submit the form. Please try again.");
    }
  };

  // Show skeleton while loading checkout form
  // Show if loading OR if checkoutFormInputs hasn't loaded yet
  if (!checkoutFormInputs || (isLoading && checkoutFormInputs.length === 0)) {
    return (
      <div className="py-10 space-y-5">
        {/* Form skeleton */}
        <div className="space-y-5 animate-pulse">
          {[...Array(6)].map((_, index) => (
            <div key={index} className="space-y-2">
              <div className="h-4 w-24 bg-gray-200 rounded" />
              <div className="h-10 w-full bg-gray-200 rounded" />
            </div>
          ))}
        </div>
      </div>
    );
  }

  // Group inputs for better layout
  const nameInputs =
    checkoutFormInputs?.filter(
      (input) =>
        input.input_name === "first_name" || input.input_name === "last_name"
    ) || [];
  const contactInputs =
    checkoutFormInputs?.filter(
      (input) => input.input_name === "email" || input.input_name === "phone"
    ) || [];
  const locationInputs =
    checkoutFormInputs?.filter(
      (input) =>
        input.input_name === "country" ||
        input.input_name === "city" ||
        input.input_name === "district" ||
        input.input_name === "address1" ||
        input.input_name === "postcode"
    ) || [];
  const otherInputs =
    checkoutFormInputs?.filter(
      (input) =>
        !nameInputs.includes(input) &&
        !contactInputs.includes(input) &&
        !locationInputs.includes(input)
    ) || [];

  return (
    <Form {...form}>
      <form
        onSubmit={form.handleSubmit(onSubmit)}
        className="py-10 space-y-5"
        id="checkout-form"
      >
        {/* Saved Addresses Selection */}
        {addresses && addresses.length > 0 && (
          <section
            dir={isArabic ? "rtl" : "ltr"}
            className="mb-6 p-4 border rounded"
          >
            <h3
              className={`text-lg font-semibold mb-4 ${
                isArabic ? "text-right" : "text-left"
              }`}
            >
              {t("form.savedAddresses", "Saved Addresses")}
            </h3>
            <RadioGroup
              dir={isArabic ? "rtl" : "ltr"}
              value={
                selectedAddress
                  ? String(selectedAddress)
                  : newAddress
                    ? "new"
                    : ""
              }
              onValueChange={(value) => {
                if (value === "new") {
                  setNewAddress(true);
                  setSelectedAddress(null);
                  autoPopulatedRef.current = false; // Reset ref when switching to new address
                  // Reset country/state selection state
                  setSelectedCountry(null);
                  setSelectedState(null);
                  setSelectedCity(null);
                  // Reset form to empty values
                  const emptyValues = {};
                  checkoutFormInputs?.forEach((input) => {
                    emptyValues[input.input_name] = "";
                  });
                  form.reset(emptyValues);
                  prevValuesRef.current = {};
                  setOrderAddress({});
                } else {
                  handleAddressSelect(Number(value));
                  setNewAddress(false);
                }
              }}
            >
              {addresses.map((address) => {
                const addressId = address.id || address.entity_id;
                return (
                  <div
                    key={addressId}
                    className={`flex items-center gap-3 mb-3 p-3 border rounded ${
                      isArabic ? "flex-row-reverse" : ""
                    }`}
                  >
                    <RadioGroupItem
                      value={String(addressId)}
                      id={`address-${addressId}`}
                    />
                    <Label
                      htmlFor={`address-${addressId}`}
                      className="flex-1 cursor-pointer"
                    >
                      <div
                        className={`text-sm text-gray-700 whitespace-pre-line ${
                          isArabic ? "text-right" : "text-left"
                        }`}
                      >
                        {address.value ||
                          `${address.first_name || ""} ${address.last_name || ""}`.trim()}
                      </div>
                    </Label>
                  </div>
                );
              })}
              <div
                className={`flex items-center gap-3 p-3 border rounded ${
                  isArabic ? "flex-row-reverse" : ""
                }`}
              >
                <RadioGroupItem value="new" id="address-new" />
                <Label htmlFor="address-new" className="flex-1 cursor-pointer">
                  <div
                    className={`text-sm font-semibold ${
                      isArabic ? "text-right" : "text-left"
                    }`}
                  >
                    {t("form.newAddress", "Add New Address")}
                  </div>
                </Label>
              </div>
            </RadioGroup>
          </section>
        )}

        {/* New Address Form - Only show if no addresses or new address selected */}
        {(newAddress || !addresses || addresses.length === 0) && (
          <>
            {/* Name fields */}
            {nameInputs.length > 0 && (
              <fieldset className="grid grid-cols-12 gap-4">
                <legend className="sr-only">{t("form.legends.name")}</legend>
                {nameInputs.map((input) => (
                  <div key={input.input_name} className="col-span-6">
                    {renderFormField(input)}
                  </div>
                ))}
              </fieldset>
            )}

            {/* Other individual fields */}
            {otherInputs
              .filter((input) => !nameInputs.includes(input))
              .map((input) => renderFormField(input))}

            {/* Location fields */}
            {locationInputs
              .filter((input) => input.input_name === "country")
              .map((input) => renderFormField(input))}

            {locationInputs
              .filter((input) => input.input_name === "address1")
              .map((input) => renderFormField(input))}

            {/* Contact fields */}
            {contactInputs.length > 0 && (
              <fieldset className="grid grid-cols-12 gap-4">
                <legend className="sr-only">{t("form.legends.contact")}</legend>
                {contactInputs.map((input) => (
                  <div key={input.input_name} className="col-span-6">
                    {renderFormField(input)}
                  </div>
                ))}
              </fieldset>
            )}

            {/* Location fields - City and District */}
            <fieldset className="grid grid-cols-12 gap-4">
              <legend className="sr-only">{t("form.legends.location")}</legend>
              {locationInputs
                .filter(
                  (input) =>
                    input.input_name === "city" ||
                    input.input_name === "district"
                )
                .map((input) => (
                  <div key={input.input_name} className="col-span-6">
                    {renderFormField(input)}
                  </div>
                ))}
            </fieldset>

            {/* Postcode */}
            {locationInputs
              .filter((input) => input.input_name === "postcode")
              .map((input) => renderFormField(input))}
          </>
        )}

        {/* Order notes */}
        <FormFieldWrapper
          control={form.control}
          name="orderNotes"
          label={t("form.orderNotes")}
          type="textarea"
          placeholder={t("form.orderNotesPlaceholder")}
          optional={true}
          inputClassName="rounded"
        />
      </form>
    </Form>
  );
});

CheckoutForm.displayName = "CheckoutForm";

export default CheckoutForm;