/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-static-element-interactions: warn */
import React, { useEffect, useRef, useState } from 'react';

import { EditIcon } from '@/icons';

interface ProjectNameEditableProps {
  name: string;
  onSave: (newName: string) => void;
  disabled?: boolean;
  className?: string;
}

const ProjectNameEditable: React.FC<ProjectNameEditableProps> = ({
  name,
  onSave,
  disabled = false,
  className,
}) => {
  const [isEditing, setIsEditing] = useState(false);
  const [editedName, setEditedName] = useState(name);
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    setEditedName(name);
  }, [name]);

  useEffect(() => {
    if (isEditing && inputRef.current) {
      inputRef.current.focus();
    }
  }, [isEditing]);

  const handleClick = () => {
    if (!disabled) {
      setIsEditing(true);
    }
  };

  const handleBlur = () => {
    setIsEditing(false);
    if (editedName !== name) {
      onSave(editedName);
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      handleBlur();
    }
  };

  return (
    <div onClick={handleClick} className={className}>
      {isEditing ? (
        <div className='relative'>
          <input
            ref={inputRef}
            type='text'
            maxLength={100}
            value={editedName}
            onChange={(e) => setEditedName(e.target.value)}
            onBlur={handleBlur}
            onKeyDown={handleKeyDown}
            className='w-full truncate bg-transparent font-serif text-3xl leading-8 font-light text-foreground-primary outline-none'
          />
          {isEditing && (
            <div className='bg-o-50 absolute right-2 bottom-[-14px] bg-inherit font-sans text-[12px] text-secondary opacity-50'>
              {editedName?.length} / 100
            </div>
          )}
        </div>
      ) : (
        <div className='flex w-full min-w-0 items-center gap-2'>
          <h2 className='cursor-pointer truncate font-serif text-3xl leading-8 font-light text-foreground-primary'>
            {editedName || name}
          </h2>
          {!disabled && (
            <EditIcon className='h-[14px] w-[14px] shrink-0 cursor-pointer text-secondary transition-colors hover:text-primary' />
          )}
        </div>
      )}
    </div>
  );
};

export default ProjectNameEditable;