import React, { useEffect, useRef, useState } from "react";
import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
import { KebabIcon } from "../../icons/ExportCommonIcons";
import { adjustHeight } from "./function/textAreaHeightAdjust";

interface MessageProps {
  val: Reply | CommentSchema;
  i: number;
}

const Messages: React.FC<MessageProps> = ({ val, i }) => {
  const [isEditing, setIsEditing] = useState(false);
  const [openOptions, setOpenOptions] = useState(false);

  // input
  const [value, setValue] = useState<string>(
    "reply" in val ? val.reply : val.comment
  );
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const currentUser = "1";

  const UserName = "username";

  useEffect(() => {
    if (textareaRef.current) adjustHeight(textareaRef.current);
  }, [value]);

  function handleCancelAction() {
    setIsEditing(false);
  }

  function handleSaveAction() {
    setIsEditing(false);
  }

  function handleDeleteAction() {
    setOpenOptions(false);
  }

  return (
    <>
      {isEditing ? (
        <div className="edit-container">
          <div className="input-container">
            <textarea
              placeholder="type here"
              ref={textareaRef}
              autoFocus
              value={value}
              onChange={(e) => setValue(e.target.value)}
              style={{ resize: "none" }}
            />
          </div>
          <div className="actions-container">
            <div className="options"></div>
            <div className="actions">
              <button
                className="cancel-button"
                onClick={() => {
                  handleCancelAction();
                }}
              >
                Cancel
              </button>
              <button
                className="save-button"
                onClick={() => {
                  handleSaveAction();
                }}
              >
                Save
              </button>
            </div>
          </div>
        </div>
      ) : (
        <div className="message-container">
          <div
            className="profile"
            style={{ background: getAvatarColor(i, UserName) }}
          >
            {UserName[0]}
          </div>
          <div className="content">
            <div className="user-details">
              <div className="user-name">{UserName}</div>
              <div className="time">{val.createdAt}</div>
            </div>
            {val.creatorId === currentUser && (
              <div className="more-options">
                <button
                  className="more-options-button"
                  onClick={() => {
                    setOpenOptions(!openOptions);
                  }}
                >
                  <KebabIcon />
                </button>
                {openOptions && (
                  <div className="options-list">
                    <button
                      className="option"
                      onClick={() => {
                        setOpenOptions(false);
                        setIsEditing(true);
                      }}
                    >
                      Edit
                    </button>
                    <button
                      className="option"
                      onClick={() => {
                        handleDeleteAction();
                      }}
                    >
                      Delete
                    </button>
                  </div>
                )}
              </div>
            )}
            <div className="message">
              {"reply" in val ? val.reply : val.comment}
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default Messages;
