import React, { useState } from "react";

const MultiEmailInvite: React.FC = () => {
  const [emails, setEmails] = useState<string[]>([]);
  const [inputValue, setInputValue] = useState("");

  const handleAddEmail = () => {
    const trimmedEmail = inputValue.trim();

    // Validate email
    if (!trimmedEmail || !validateEmail(trimmedEmail)) {
      alert("Please enter a valid email address.");
      return;
    }

    // Check for duplicates
    if (emails.includes(trimmedEmail)) {
      alert("This email has already been added.");
      return;
    }

    // Add email to the list
    setEmails([...emails, trimmedEmail]);
    setInputValue(""); // Clear the input field after adding
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === "Enter" || e.key === ",") {
      e.preventDefault();
      handleAddEmail();
    }
  };

  const handleRemoveEmail = (emailToRemove: string) => {
    setEmails(emails.filter((email) => email !== emailToRemove));
  };

  const validateEmail = (email: string) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  };

  const [inputFocus, setInputFocus] = useState(false);

  return (
    <div className="multi-email-invite-input-container">
      <div className={`multi-email-invite-input${inputFocus ? " active" : ""}`}>
        {emails.map((email, index) => (
          <div key={index} className="entered-emails">
            {email}
            <span onClick={() => handleRemoveEmail(email)}>&times;</span>
          </div>
        ))}
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          onFocus={() => setInputFocus(true)}
          onBlur={() => setInputFocus(false)}
          onKeyDown={handleKeyDown}
          placeholder="Enter email and press Enter or comma"
        />
      </div>
      <div onClick={handleAddEmail} className="invite-button">
        Invite
      </div>
    </div>
  );
};

export default MultiEmailInvite;