import CustomButton from "@/components/common/CustomButton";
import CustomInput from "@/components/common/CustomInput";
import { Card } from "@/components/ui/card";
import React, { useEffect } from "react";
import { useForm } from "react-hook-form";
import { useUpdatePassword } from "../hooks/useUpdatePassword";
import { UpdatePasswordType } from "@/type/authType";
import { ProfileUpdateType } from "@/type/profileType";

const ProfileDetails = () => {
  //   const { ProfileDetails, isSuccess } = useUpdatePassword();

  const {
    control,
    register,
    watch,
    reset,

    formState: { errors },
    handleSubmit,
  } = useForm<ProfileUpdateType>();

  const onSubmit = () => {};

  return (
    <div>
      <Card className="font-poppins flex w-full flex-row gap-5 border-none px-5">
        <div>
          <h1 className="font-inter w-[200] text-[20px] font-extrabold whitespace-nowrap">
            Profile Details
          </h1>
        </div>

        <form
          onSubmit={handleSubmit(onSubmit)}
          className="flex w-full flex-col gap-5"
        >
          <div className="flex w-full flex-row items-start gap-5">
            <div className="flex w-full flex-col gap-5">
              <CustomInput
                label="Display Name"
                isRequired
                name="display_name"
                control={control}
                register={register}
                errors={errors}
                placeHolder="Enter Display Name"
                rules={{
                  required: "Enter your Display Name",
                }}
              />

              <CustomInput
                label="Mobile Number"
                isRequired
                name="mobile_number"
                control={control}
                register={register}
                errors={errors}
                placeHolder="+880 01XXXXXXXXX"
                rules={{
                  required: "Please enter your mobile number",

                  minLength: {
                    value: 10,
                    message: "Mobile number must be at least 11 characters",
                  },
                }}
              />
              <CustomInput
                label="Company Name(Optional)"
                name="company_name"
                control={control}
                register={register}
                errors={errors}
                placeHolder="Enter company name"
              />
            </div>
            <div className="flex w-full flex-col gap-5">
              <CustomInput
                label="Email Address"
                isRequired
                name="email_address"
                control={control}
                register={register}
                errors={errors}
                placeHolder="Enter email address"
                rules={{
                  required: "Email is required",
                  pattern: {
                    value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
                    message: "Invalid email address",
                  },
                }}
              />

              <CustomInput
                label="Location"
                name="location"
                control={control}
                register={register}
                errors={errors}
                placeHolder="Enter location"
              />
              <CustomInput
                label="Occupation (Optional)"
                name="occupation"
                control={control}
                register={register}
                errors={errors}
                placeHolder="Enter Occupation"
              />
            </div>
          </div>

          <div className="mt-5 w-50">
            <CustomButton
              btnText="Edit Profile"
              type="submit"
              addAnimation={false}
              className="bg-dark-button hover:bg-dark-button"
              //   disabled={isSuccess}
            />
          </div>
        </form>
      </Card>
    </div>
  );
};

export default ProfileDetails;