import apiInterceptor from "@/interceptor/interceptor";
import Cookies from "js-cookie";
import React, { useState } from "react";
import toast, { Toaster } from "react-hot-toast";

interface UserData {
  firstName: string;
  lastName: string;
  phone: string;
  email: string;
  password: string;
  role: string;
  address: string;
}

const AddUser = () => {
  const [formData, setFormData] = useState<UserData>({
    firstName: "",
    lastName: "",
    phone: "",
    email: "",
    password: "",
    role: "",
    address: "",
  });

  const successNotify = () => toast.success("Added Successfully !");
  const errorNotify = () => toast.error("Something went wrong !");

  const handleChange = async (
    event: React.ChangeEvent<
      HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
    >
  ) => {
    const { id, value } = event.target;
    setFormData((prevData) => ({ ...prevData, [id]: value }));
  };

  const handleSubmit = async (event: any) => {
    event.preventDefault();

    try {
      const accessToken = Cookies.get("jazz_token");
      const response = apiInterceptor.post(
        `/api/admin/userManagement`,
        formData,
        { headers: { authorization: `Bearer ${accessToken}` } }
      );
      console.log(response)
      successNotify();
    } catch (error) {
      console.log("Error", error);
      errorNotify();
    }
  };
  return (
    <>
      <section className="bg-white ">
        <div className="py-8 lg:py-16 px-4 mx-auto max-w-screen-md">
          <h2 className="mb-4 text-3xl sm:text-4xl tracking-tight font-semibold text-center text-[#FE342B] ">
            Add User
          </h2>
          <Toaster
            toastOptions={{
              className: "",
              duration: 5000,
              style: {
                marginTop: "4rem",
                background: "#FE342B",
                color: "#fff",
              },
            }}
          />
          <form action="#" className="space-y-8" onSubmit={handleSubmit}>
            <div className="">
              <div className="space-y-8">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                  <div>
                    <label
                      htmlFor="firstName"
                      className="block mb-2 text-sm font-medium text-[#FE342B] "
                    >
                      First Name
                    </label>
                    <input
                      type="text"
                      id="firstName"
                      name="firstName"
                      className="shadow-sm bg-gray-50 border border-gray-300 text-[#FE342B] text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5"
                      required
                      onChange={handleChange}
                    />
                  </div>

                  <div>
                    <label
                      htmlFor="lastName"
                      className="block mb-2 text-sm font-medium text-[#FE342B] "
                    >
                      Last Name
                    </label>
                    <input
                      type="text"
                      id="lastName"
                      name="lastName"
                      className="shadow-sm bg-gray-50 border border-gray-300 text-[#FE342B] text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5"
                      required
                      onChange={handleChange}
                    />
                  </div>
                </div>

                <div>
                  <label
                    htmlFor="phone"
                    className="block mb-2 text-sm font-medium text-[#FE342B] "
                  >
                    Phone
                  </label>
                  <input
                    type="text"
                    id="phone"
                    name="phone"
                    className="shadow-sm bg-gray-50 border border-gray-300 text-[#FE342B] text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5"
                    required
                    onChange={handleChange}
                  />
                </div>

                <div>
                  <label
                    htmlFor="password"
                    className="block mb-2 text-sm font-medium text-[#FE342B] "
                  >
                    Password
                  </label>
                  <input
                    type="password"
                    id="password"
                    name="password"
                    className="shadow-sm bg-gray-50 border border-gray-300 text-[#FE342B] text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5"
                    required
                    onChange={handleChange}
                  />
                </div>

                <div>
                  <label
                    htmlFor="email"
                    className="block mb-2 text-sm font-medium text-[#FE342B] "
                  >
                    User Email
                  </label>
                  <input
                    type="email"
                    id="email"
                    name="email"
                    className="shadow-sm bg-gray-50 border border-gray-300 text-[#FE342B] text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5"
                    required
                    onChange={handleChange}
                  />
                </div>

                <div>
                  <label
                    htmlFor="role"
                    className="block mb-2 text-sm font-medium text-[#FE342B] "
                  >
                    Role
                  </label>
                  <select
                    name="role"
                    id="role"
                    onChange={handleChange}
                    className="shadow-sm bg-gray-50 border border-gray-300 text-[#FE342B] text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5"
                  >
                    <option disabled selected>
                      Select type
                    </option>
                    <option value="user">User</option>
                    <option value="admin">Admin</option>
                  </select>
                </div>

                <div>
                  <label
                    htmlFor="address"
                    className="block mb-2 text-sm font-medium text-[#FE342B] "
                  >
                    Address
                  </label>
                  <textarea
                    id="address"
                    name="address"
                    rows={3}
                    className="shadow-sm bg-gray-50 border border-gray-300 text-[#FE342B] text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5"
                    required
                    value={formData.address}
                    onChange={handleChange}
                  ></textarea>
                </div>
              </div>
            </div>

            <button
              type="submit"
              className="py-3 px-5 text-sm font-medium text-center rounded-lg bg-gray-300 sm:w-fit hover:bg-[#FE342B] hover:text-white transition-all duration-300"
            >
              Submit
            </button>
          </form>
        </div>
      </section>
    </>
  );
};

export default AddUser;