// import "react-phone-number-input/style.css";
// import PhoneInput from "react-phone-number-input";
// import React from "react";
// import { useForm, Controller } from "react-hook-form";
// import Button from "../../../shared/reusableComponents/Reusablebutton";
// import InputComponent from "../../../shared/reusableComponents/InputComponent";

// interface InputProps {
//   name: string;
//   email: string;
//   phone: string;
// }

// interface BodyFiveProps {
//   input: InputProps;
//   setInput: (input: InputProps) => void;
//   isClose: () => void;
// }

// const BodyFive: React.FC<BodyFiveProps> = ({ input, setInput, isClose }) => {
//   const {
//     register,
//     handleSubmit,
//     control,
//     formState: { errors },
//   } = useForm<InputProps>({
//     defaultValues: input,
//   });

//   const onSubmit = (data: InputProps) => {
//     setInput(data);
//     localStorage.setItem("step5", JSON.stringify(data));
//     isClose();
//   };

//   return (
//     <div>
//       <div className="bg-neutral-300 h-[8px] md:w-[534px] w-[200px] mt-6 rounded-b-xl  rounded-t-xl mx-auto my-auto">
//         <div className="bg-[#CEA768] h-[8px] w-5/5 mt-6 rounded-b-xl  rounded-t-xl"></div>
//       </div>
//       <h1 className="flex justify-center items-center text-black mt-3 font-light font-[Roboto] text-[16px]">
//         Step 5/5
//       </h1>
//       <h1 className="text-black flex justify-center items-center font-normal font-[Raleway] text-[12px] sm:text-[20px] md:text-[24px]">
//         Share Your Contact Details
//       </h1>
//       <h1 className="text-[#6B665F] text-wrap text-[10px] sm:text-[16px] md:text-[18px] text-lg font-[Raleway] flex justify-center items-center text-center">
//         We need your info to connect you with our experts and provide tailored
//         recommendations.
//       </h1>

//       <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
//         <InputComponent
//           label="Name"
//           placeholder="Enter your name"
//           {...register("name", { required: "Name is required" })}
//           error={errors.name?.message}
//         />

//         <InputComponent
//           label="Email"
//           type="email"
//           placeholder="Enter your email"
//           {...register("email", {
//             required: "Email is required",
//             pattern: {
//               value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
//               message: "Invalid email address",
//             },
//           })}
//           error={errors.email?.message}
//         />

//         <div className="space-y-2">
//           <label className="block text-sm font-medium text-gray-700">
//             Phone
//           </label>
//           <Controller
//             name="phone"
//             control={control}
//             rules={{ required: "Phone number is required" }}
//             render={({ field: { onChange, value } }) => (
//               <PhoneInput
//                 international
//                 countryCallingCodeEditable={false}
//                 defaultCountry="EG"
//                 value={value}
//                 onChange={onChange}
//                 className="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
//               />
//             )}
//           />
//           {errors.phone && (
//             <p className="text-red-500 text-sm">{errors.phone.message}</p>
//           )}
//         </div>

//         <div className="flex justify-end space-x-4">
//           <Button
//             type="button"
//             onClick={isClose}
//             className="bg-gray-200 hover:bg-gray-300"
//           >
//             Cancel
//           </Button>
//           <Button type="submit">Get Your Offer</Button>
//         </div>
//       </form>
//     </div>
//   );
// };

// export default BodyFive;

// // ---------------------------------------------

import "react-phone-number-input/style.css";
import PhoneInput from "react-phone-number-input";
import React from "react";
import Button from "../../../shared/reusableComponents/Reusablebutton";
import { Controller, useForm } from "react-hook-form";
import InputComponent from "../../../shared/reusableComponents/InputComponent";
import { useTranslations } from "next-intl";
import PhoneValidationExample from "../../../shared/PhoneInput";
import { useMutation } from "@tanstack/react-query";
import apiServiceCall from "@/utils/api/shared/apiServiceCall";

interface InputProps {
  name: string;
  email: string;
  phone: string;
}

interface BodyFiveProps {
  input: InputProps;
  setInput: (input: InputProps) => void;
  isClose: () => void;
}

const BodyFive: React.FC<BodyFiveProps> = ({ input, setInput, isClose }) => {
  const t = useTranslations("ContactusForm"); // استخدم useTranslations للـ client side
  const {
    register,
    handleSubmit,
    control,
    watch,
    reset,
    formState: { errors },
  } = useForm<InputProps>({
    defaultValues: input,
  });

  //   const handelInputChange = (e: any, key: any) => {
  //     setInput((prev) => ({
  //       ...prev,
  //       [key]: e.target.value || "",
  //     }));
  //   };

  //   const phoneInput = (value: string | undefined) => {
  //     setInput({ ...input, phone: value || "" });
  //   };

 
 

  const { mutate, isError, isSuccess, isPending ,error } = useMutation({
    mutationFn: (data) =>
      apiServiceCall({ url: "pop_up", body: data, method: "POST" }),

    onError: (error, variables, context) => {
      
 
 
    },
    onSuccess: (data, variables, context) => {
 
      reset();
      localStorage.removeItem("step5");
      localStorage.removeItem("type");
      localStorage.removeItem("number_bedrooms");
      localStorage.removeItem("goals");
      localStorage.removeItem("range");
    },
    onSettled: (data, error, variables, context) => {
 
    },
  });


  

  const onSubmit = (data) => {
    // e.preventDefault();
 

    const formData = new FormData();
    Object.keys(data).forEach((key) => {
      formData.append(key, data[key]);
    });

    mutate(formData);

    // localStorage.setItem("step5", JSON.stringify(input));
    // setInput({ name: "", email: "", phone: "" });
    // isClose();
  };

  return (
    <div>
      <div className="bg-neutral-300  h-[8px] md:w-[534px] w-[200px] mt-6 rounded-b-xl  rounded-t-xl mx-auto my-auto">
        <div className="bg-[#CEA768] h-[8px] w-5/5 mt-6 rounded-b-xl  rounded-t-xl"></div>
      </div>
      <h1 className="flex justify-center items-center text-black mt-3 font-light font-[Roboto] text-[16px]">
        Step 5/5
      </h1>
      <h1 className="text-black flex justify-center items-center font-normal font-[Raleway] text-[12px] sm:text-[20px] md:text-[24px]">
        Share Your Contact Details
      </h1>
      <h1 className="text-[#6B665F] text-wrap text-[10px] sm:text-[16px] md:text-[18px] text-lg font-[Raleway] flex justify-center items-center text-center">
        We need your info to connect you with our experts and provide tailored
        recommendations.
      </h1>

      <form onSubmit={handleSubmit(onSubmit)} className="space-y-5 mx-4 mt-5">
        <div
          className="flex flex-col  text-black
        justify-center items-center
        lg:justify-start lg:items-start
        md:justify-center md:items-center
        sm:justify-center sm:items-center "
        >
          {/* <h1 className="text-[11px] md:text-[13px] font-[Raleway] mt-2">
            Full Name
          </h1> */}
          <InputComponent
            className="w-full iiiiiiiiiisasasas"
            type="text"
            name="name"
            label={t("full_name")}
            placeholder={t("full_name")}
            required
            {...register("name", { required: t("full_name_required") })}
          />
          {errors.name && (
            <p className="text-red-500 text-sm mt-1">{errors.name.message}</p>
          )}
        </div>
        <div className="">
          {/* <h1 className="text-[13px] font-[Raleway]">Email Address</h1> */}
          <InputComponent
            className="w-full zzzzzzzzzzzmnbmnbmn"
            type="email"
            name="email"
            label={t("email")}
            placeholder={t("email")}
            required
            {...register("email", { required: t("email_required") })}
          />
          {errors.email && (
            <p className="text-red-500 text-sm mt-1">{errors.email.message}</p>
          )}
        </div>
        <div
          className="flex flex-col text-black
        justify-center items-center
        lg:justify-start lg:items-start  md:justify-center md:items-center  sm:justify-center sm:items-center"
        >
          {/* <h1 className="text-[13px] font-[Raleway]">Phone Number</h1> */}
          <Controller
            name="phone"
            control={control}
            defaultValue=""
            rules={{ required: t("phone_required") }}
            render={({ field }) => (
              <PhoneValidationExample
                className="w-full text-sm font-medium"
                label={t("phone_number")}
                value={field.value}
                onChange={field.onChange}
              />
            )}
          />
          {errors.phone && (
            <p className="text-red-500 text-sm mt-1">{errors.phone.message}</p>
          )}

          {/* <PhoneInput
            className=" border-2 border-[#C8C8CA] p-2
            w-[200px] h-[30px]
            sm:w-[400px] sm:h-[40px]
             md:w-[600px] md:h-[40px]
              lg:w-[718px] lg:h-[51px]
               rounded-lg font-normal font-[Raleway] text-[13px] "
            placeholder="Enter phone number"
            value={input.phone}
            onChange={phoneInput}
            defaultCountry="EG"
          />
          {errors.phone && (
            <p className="text-red-500 text-sm">{errors.phone.message}</p>
          )} */}
        </div>

        {error?.message && <p className="text-red-500 text-sm">{error?.message}</p>}
        <div className="w-full flex items-center justify-center">
          <Button className="mb-5 mx-4 lg:0" type="submit" styleMe>
            {/* {t("send")} */}
            Get Your Offer
          </Button>
        </div>
      </form>
    </div>
  );
};

export default BodyFive;