import { useState, ChangeEvent, KeyboardEvent, useRef, useEffect } from "react";
import { useNotesStore } from "../contexts/NotesStore"

type ListItemProps = {
  id: string;
  label: string;
  callback: React.MouseEventHandler<HTMLDivElement>;
}

function ListItem(props: ListItemProps) {
  const { updateNote } = useNotesStore();
  const [tempLabel, setTempLabel] = useState(props.label);
  const [isEditing, setIsEditing] = useState(false);
  const containerRef = useRef<HTMLDivElement | null>(null);

  const iconClasses = () => {
    return `bi bi-file-earmark-text me-2` + (isEditing ? "m-0" : "");
  };

  const handleDoubleClick = () => setIsEditing(true)

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setTempLabel(event.target.value)
  }

  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
    if (event.key === "Enter") {
      saveEdit();
    }
    if (event.key === "Escape") {
      cancelEdit();
    }
  }

  const cancelEdit = () => {
    setTempLabel(props.label); // reset
    setIsEditing(false);
  };

  const saveEdit = () => {
    updateNote(props.id, { title: tempLabel });
    setIsEditing(false);
  };

  useEffect(() => {
    if (!isEditing) return;

    const handleClickOutside = (event: MouseEvent) => {
      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
        cancelEdit();
      }
    };

    document.addEventListener("mousedown", handleClickOutside);

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [isEditing]);

  return (
    <div
      ref={containerRef}
      className="d-flex align-items-center text-white-50 sidebar-listItem"
      onClick={props.callback}
      onDoubleClick={handleDoubleClick} 
    >
      <i className={iconClasses()} />
      {
        isEditing ? (
          <input
            type="text"
            className="form-control form-control-sm bg-dark text-white ms-2"
            value={tempLabel}
            onChange={handleChange}
            onKeyDown={handleKeyDown}
            autoFocus
          />
        ) : (
          <span>
            {props.label}
          </span>
        )
      }
    </div>
  )
}

export default ListItem