DentalManagementMH07/apps/Frontend/src/components/staffs/staff-form.jsx

import React, { useState, useEffect } from "react";
export function StaffForm({ initialData, onSubmit, onCancel, isLoading, }) {
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [role, setRole] = useState("Staff");
    const [phone, setPhone] = useState("");
    const [hasTypedRole, setHasTypedRole] = useState(false);
    // Set initial values once on mount
    useEffect(() => {
        if (initialData) {
            if (initialData.name)
                setName(initialData.name);
            if (initialData.email)
                setEmail(initialData.email);
            if (initialData.role)
                setRole(initialData.role);
            if (initialData.phone)
                setPhone(initialData.phone);
        }
    }, []); // run once only
    const handleSubmit = (e) => {
        e.preventDefault();
        if (!name.trim()) {
            alert("Name is required");
            return;
        }
        onSubmit({
            name: name.trim(),
            email: email.trim() || undefined,
            role: role.trim(),
            phone: phone.trim() || undefined,
        });
    };
    return (<form onSubmit={handleSubmit} className="space-y-4">
      <div>
        <label className="block text-sm font-medium text-gray-700">
          Name *
        </label>
        <input type="text" className="mt-1 block w-full border rounded p-2" value={name} onChange={(e) => setName(e.target.value)} required disabled={isLoading}/>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700">Email</label>
        <input type="email" className="mt-1 block w-full border rounded p-2" value={email} onChange={(e) => setEmail(e.target.value)} disabled={isLoading}/>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700">
          Role *
        </label>
        <input type="text" className="mt-1 block w-full border rounded p-2" value={role} onChange={(e) => {
            setHasTypedRole(true);
            setRole(e.target.value);
        }} onFocus={() => {
            if (!hasTypedRole && role === "Staff") {
                setRole("");
            }
        }} required disabled={isLoading}/>
      </div>

      <div>
        <label className="block text-sm font-medium text-gray-700">Phone</label>
        <input type="tel" className="mt-1 block w-full border rounded p-2" value={phone} onChange={(e) => setPhone(e.target.value)} disabled={isLoading}/>
      </div>

      <div className="flex justify-end space-x-2">
        <button type="button" onClick={onCancel} className="px-4 py-2 border rounded" disabled={isLoading}>
          Cancel
        </button>
        <button type="submit" className="px-4 py-2 bg-teal-600 text-white rounded disabled:opacity-50" disabled={isLoading}>
          {isLoading ? "Saving..." : "Save"}
        </button>
      </div>
    </form>);
}