import { IoCloseOutline } from "react-icons/io5";
import { useState } from "react";
import styles from "./EditPopUp.module.css";
import updateUser from "./update-user";
import { useAuthToken } from "../../../auth/Hooks/use-auth-token";

type EditPopUpProps = {
  closePopup: () => void;
  refetchUsers: () => Promise<void>;
  user: {
    id: string;
    name: string;
    email: string;
    role: string;
    position: string;
    azure_id: string;
  };
};

const EditPopUp = ({ closePopup, refetchUsers, user }: EditPopUpProps) => {
    const { getToken } = useAuthToken();
    const [formData, setFormData] = useState({
        name: user.name,
        email: user.email,
        role: user.role,
        position: user.position || ""
    });

    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
        const { name, value } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: value
        }));
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        try {
            const token = await getToken();
            await updateUser(user.azure_id, formData, token);
            await refetchUsers();
            closePopup();
        } catch (error) {
            console.error("Failed to update user:", error);
        }
    };

    return (
        <div style={popupStyles.overlay}>
            <div style={popupStyles.popup}>
                <div className={styles.popupHeader}>
                    <p>Edit User</p>
                    <button 
                        className={styles.closeButton}
                        onClick={closePopup}><IoCloseOutline className={styles.closeIcon}/>
                    </button>
                </div>
                <div className={styles.horizontalLineLight}></div>
                <form onSubmit={handleSubmit} className={styles.form}>
                    <div className={styles.formGroup}>
                        <label htmlFor="name">Name:</label>
                        <input
                            type="text"
                            id="name"
                            name="name"
                            value={formData.name}
                            onChange={handleChange}
                            required
                        />
                    </div>
                    <div className={styles.formGroup}>
                        <label htmlFor="email">Email:</label>
                        <input
                            type="email"
                            id="email"
                            name="email"
                            value={formData.email}
                            onChange={handleChange}
                            required
                        />
                    </div>
                    <div className={styles.formGroup}>
                        <label htmlFor="role">Role:</label>
                        <select
                            id="role"
                            name="role"
                            value={formData.role}
                            onChange={handleChange}
                            required
                        >
                            <option value="admin">admin</option>
                            <option value="member">member</option>
                        </select>
                    </div>
                    <div className={styles.formGroup}>
                        <label htmlFor="position">Position:</label>
                        <input
                            type="text"
                            id="position"
                            name="position"
                            value={formData.position}
                            onChange={handleChange}
                        />
                    </div>
                    <div className={styles.horizontalLineLight}></div>
                    <div className={styles.submitButtonDiv}>
                        <button 
                            type="submit"
                            className={styles.submitButton}>
                                Update
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};

const popupStyles: { overlay: React.CSSProperties; popup: React.CSSProperties } = {
  overlay: {
    position: "fixed",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "rgba(0,0,0,0.5)",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",

  },
  popup: {
    backgroundColor: "#fff",
    borderRadius: "8px",
    boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
    position: "relative",
    width: "400px",
    maxWidth: "90%"
  }
};

export default EditPopUp;