import React, { useState } from "react";
import Modal from "@/components/Modal/Modal";
import { Trash2, Eye, EyeOff } from "lucide-react";
import { getCookie } from "cookies-next";
import { useAddUser } from "@/models/Users/UserModel";
import { AddUserRequest } from "@/Redux/Users/UserTypes";
import CustomUploadBtn from "@/components/UploadBtn/CustomUploadBtn";

const AddUser = ({
  isOpen,
  setIsOpen,
}: {
  isOpen: boolean;
  setIsOpen: (isOpen: boolean) => void;
}) => {
  const user = getCookie("lookna_admin");
  const parsedUser = user ? JSON.parse(user as string) : null;
  const adminID = parsedUser?.data?.user?._id;

  const [form, setForm] = useState<{
    firstName: string;
    lastName: string;
    email: string;
    phoneNumber: string;
    password: string;
    profilePicture: File | null;
  }>({
    firstName: "",
    lastName: "",
    email: "",
    phoneNumber: "",
    password: "",
    profilePicture: null,
  });

  const [showPassword, setShowPassword] = useState(false);

  const { handleAddUser, isLoading } = useAddUser({ setIsOpen });

  const handleChange = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    setForm({ ...form, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    const formData = new FormData();
    formData.append("firstName", form.firstName);
    formData.append("lastName", form.lastName);
    formData.append("email", form.email);
    formData.append("phoneNumber", form.phoneNumber);
    formData.append("password", form.password);

    if (form.profilePicture) {
      formData.append("profilePicture", form.profilePicture);
    }

    handleAddUser(formData as unknown as AddUserRequest);

    // Do something with form data
    setForm({
      firstName: "",
      lastName: "",
      email: "",
      phoneNumber: "",
      password: "",
      profilePicture: null,
    });
  };

  return (
    <>
      <Modal
        width={"w-full sm:w-[55vw] md:w-[55vw] lg:w-[65vw]"}
        height={"max:h-[80vh]"}
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Add User"
        footer={
          <div className="text-center pt-2">
            {false ? (
              <button
                className="px-4 py-2 bg-[var(--primary-theme-color)] text-white rounded"
                // onClick={handleSubmit}
                type="submit"
              >
                Uploading...
              </button>
            ) : (
              <button
                className="px-4 py-2 bg-[var(--primary-theme-color)] text-white rounded"
                onClick={handleSubmit}
                type="submit"
              >
                Upload
              </button>
            )}
          </div>
        }
      >
        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
          <div className="flex flex-col gap-4 ">
            <div className="flex w-full flex-col sm:flex-row gap-5 w-full">
              <div className="flex flex-col gap-2 w-full">
                <label className="text-sm text-textColorDark">First Name</label>
                <input
                  type="text"
                  placeholder="John Doe example"
                  className="p-2 md:p-3 rounded-md bg-transparent text-white focus:outline-none border-2 focus:border-white focus:border-2 placeholder:text-[12px] md:placeholder:text-[14px]"
                  name="firstName"
                  value={form.firstName}
                  onChange={handleChange}
                />
              </div>

              <div className="flex flex-col gap-2 w-full">
                <label className="text-sm text-textColorDark">Last Name</label>
                <input
                  type="text"
                  placeholder="John Doe example"
                  className="p-2 md:p-3 rounded-md bg-transparent text-white focus:outline-none border-2 focus:border-white focus:border-2 placeholder:text-[12px] md:placeholder:text-[14px]"
                  name="lastName"
                  value={form.lastName}
                  onChange={handleChange}
                />
              </div>
            </div>
            <div className="flex w-full flex-col sm:flex-row gap-5 w-full">
              <div className="flex flex-col gap-2 w-full">
                <label className="text-sm text-textColorDark">Email</label>
                <input
                  type="text"
                  placeholder="example@gmail.com"
                  className="p-2 md:p-3 rounded-md bg-transparent text-white focus:outline-none border-2 focus:border-white focus:border-2 placeholder:text-[12px] md:placeholder:text-[14px]"
                  name="email"
                  value={form.email}
                  onChange={handleChange}
                />
              </div>

              <div className="flex flex-col gap-2 w-full">
                <label className="text-sm text-textColorDark">
                  Phone Number
                </label>
                <input
                  type="number"
                  placeholder="08012345678"
                  className="p-2 md:p-3 rounded-md bg-transparent text-white focus:outline-none border-2 focus:border-white focus:border-2 placeholder:text-[12px] md:placeholder:text-[14px]"
                  name="phoneNumber"
                  value={form.phoneNumber}
                  onChange={handleChange}
                />
              </div>
            </div>
            <div className="flex flex-col gap-2 w-full">
              <label className="text-sm text-textColorDark">Password</label>
              <div className="relative">
                <input
                  type={showPassword ? "text" : "password"}
                  placeholder="Enter Your Password"
                  className="p-2 md:p-3 rounded-md bg-transparent text-white focus:outline-none border-2 focus:border-white focus:border-2 placeholder:text-[12px] md:placeholder:text-[14px] w-full pr-10"
                  name="password"
                  value={form.password}
                  onChange={handleChange}
                />
                <button
                  type="button"
                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white"
                  onClick={() => setShowPassword((prev) => !prev)}
                  tabIndex={-1}
                >
                  {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
                </button>
              </div>
            </div>
            <div className="flex flex-col gap-2">
              <CustomUploadBtn
                label="Upload Profile Picture"
                className="w-[35vw] sm:w-[15vw] md:w-[20vw] lg:w-[20vw] xl:w-[15vw]"
                value={form.profilePicture}
                onChange={(file) => setForm({ ...form, profilePicture: file })}
              />
            </div>
          </div>
        </form>
      </Modal>
    </>
  );
};

export default AddUser;