import { useEffect, useState } from "@wordpress/element";
import ClockIcon from "../icons/Clock.jsx";
import PlusIcon from "../icons/Plus.jsx";
import CrossIcon from "../icons/Cross.jsx";

const Message = ({
  messages,
  addMessageField,
  handleInputChange,
  imgDir,
  setMessages,
  tabMessages,
  setTabMessages,
  delay,
  updateDelay,
}) => {
  // const [delay, setDelay] = useState(1000);
  const [msgEditing, setMsgEditing] = useState(false);

  const removeMessage = (indexToRemove) => {
    const updatedMessages = messages.filter(
      (_, index) => index !== indexToRemove
    );
    setMessages(updatedMessages);
  };

  const handleTabMessages = (index, value) => {
    const newMessages = [...tabMessages];
    newMessages[index] = value;
    setTabMessages(newMessages);
  }

  // useEffect(() => {
    
  // }, [msgEditing]);

  return (
    <div className="container msg_container tabrecall_pb_24 tabrecall_mb_20">
      <div className="msg_header">
        <h3 className="tabrecall_heading_1">Message</h3>
        <div className="tabrecall_header_time">
          <ClockIcon />
          <p className="tabrecall_text">Delay (milliseconds)</p>
          <input
            type="number"
            className="tabrecall_text msg_header_input"
            onChange={updateDelay && ((e) => updateDelay("message", parseInt(e.target.value)))}
            readOnly={!updateDelay}
            value={delay}
            autoFocus
          />
        </div>
      </div>

      <div className="input-container">
        {messages.map((message, index) => (
          <div
            key={index}
            className="input-wrapper"
            style={{ position: "relative", marginBottom: "24px" }}
          >
            <input
              type="text"
              placeholder={`Type Message ${index + 1}`}
              value={message}
              onBlur={e => handleTabMessages(index, e.target.value)}
              onFocus={e => setMsgEditing(true)}
              onChange={handleInputChange && ((e) => handleInputChange(index, e.target.value))}
              readOnly={!handleInputChange}
              style={{ width: "100%", paddingRight: "30px" }}
            />
            {messages.length > 1 && (
              setMessages && (
                <button
                type="button"
                onClick={() => removeMessage(index)}
                className="crossButton"
              >
                <CrossIcon />
              </button>
              )
            )}
          </div>
        ))}
      </div>

      {
        setMessages && (
          <div style={{paddingBottom: "12px"}}>
            <button type="button" onClick={addMessageField} className="addMoreBtn" style={{
                        opacity: (messages.length >= 3) ? "0.8" : "1",
                        cursor: (messages.length >= 3) ? "not-allowed" : "pointer"
                    }}>
              <PlusIcon />
              <p className="tabrecall_text tabrecall_text_primary">Add Another Message</p>
            </button>
            <div className="tabrecall_note">
                <p>Note: You can show multiple messages which will change after {(delay/1000).toFixed(2)} sec</p>
            </div>
          </div>
        )
      }
    </div>
  );
};

export default Message;