import apiInterceptor from "@/interceptor/interceptor";
import Cookies from "js-cookie";
import { useRouter } from "next/router";
import React, { useEffect, useState } from "react";

import toast, { Toaster } from "react-hot-toast";

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

const UpdateUser = () => {
  const router = useRouter();
  const { id } = router.query;
  const [formData, setFormData] = useState<UserData>({
    firstName: "",
    lastName: "",
    phone: "",
    email: "",
    role: "",
    address: "",
  });

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

  useEffect(() => {
    const getUserData = async () => {
      try {
        const accessToken = Cookies.get("jazz_token");
        const responseUser = await apiInterceptor(
          `/api/admin/userManagement/${id}/edit`,
          {
            headers: { authorization: `Bearer ${accessToken}` },
          }
        );
        const userData = responseUser.data;
        console.log(userData);
        setFormData({
          firstName: userData.user.firstName,
          lastName: userData.user.lastName,
          phone: userData.user.phone,
          email: userData.user.email,
          role: userData.user.role,
          address: userData.user.address,
        });
      } catch (error) {
        console.log("Error", error);
      }
    };
    getUserData();
  }, []);

  const handleChange = async (
    event: React.ChangeEvent<
      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
    >
  ) => {
    const { id, value } = event.target;
    setFormData((prevFormData) => ({ ...prevFormData, [id]: value }));
  };
  const handleSubmit = async (event: any) => {
    event.preventDefault();
    try {
      console.log(formData);
      const accessToken = Cookies.get("jazz_token");
      const response = await apiInterceptor.put(
        `/api/admin/userManagement/${id}`,
        formData,
        {
          headers: {
            authorization: `Bearer ${accessToken}`,
          },
        }
      );
      if (response) successNotify();
    } catch (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] ">
          Update User
        </h2>
        <Toaster
          toastOptions={{
            className: "",
            duration: 5000,
            style: {
              marginTop: "3rem",
              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}
                    value={formData.firstName}
                  />
                </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}
                    value={formData.lastName}
                  />
                </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}
                  value={formData.phone}
                />
              </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}
                  value={formData.email}
                />
              </div>

              <div>
                <label
                  htmlFor="role"
                  className="block mb-2 text-sm font-medium text-[#FE342B] "
                >
                  Role
                </label>
                <select
                  name="role"
                  id="role"
                  onChange={handleChange}
                  value={formData.role}
                  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 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"
          >
            Update
          </button>
        </form>
      </div>
    </section>
  );
};

export default UpdateUser;